Jonathan Miles, Freelance Web Designer

The default design for my website is called “Night”. It’s a particularly graphical design that is intended to be both visually striking and distinctive. I was inspired to take this approach after reading an article about websites with large backgrounds. One of my aims in creating different designs for my website is to make them as diverse as possible – to try and push my skills and, to some extent, CSS itself. It was therefore an easy decision to make a design that used a large background.

The background

I began by drawing the large background in Illustrator, as I wanted a clean, vector art look. I used a grid when laying out the rolling hills, to ensure that both ends lined up and would thus join seamlessly together when repeated horizontally. The background is 1280 pixels wide, so even for visitors using wider resolutions the landscape will appear to stretch on continuously (albeit in a familiar looking way).

An overview of the finished background, drawn using Illustrator

The bottom of the background fades to a dark blue, which matches the CSS background colour set on the page.

Moon

The moon graphic isn’t part of the large background itself, as it would look silly to see it appear for a second time when the background repeats. Admittedly only a fraction of visitors will be using a wide enough resolution for that to happen, but I like to cover all the details. I made the moon into a separate graphic and applied it as a CSS background on an element that wraps the page content. Backgrounds can be positioned, so I offset it by 800 pixels from the left of the screen to get the placement I wanted.

Trees

The trees primarily consist of a couple of simple shapes drawn with the pen tool. To achieve the shading on the foliage I used a gradient mesh. A simple linear gradient would have been flat and unconvincing, whereas a gradient mesh can be warped to follow the contours of a shape. By shaping the mesh, and applying different colours to the nodes, I gave the trees a more three dimensional feel. I also used a white highlight on the edges to give the impression of moon light catching the tree tops, making the background feel more connected.

Complex shading can be achieved using Illustrator's gradient mesh feature

To add more detail I used the spiral tool to create an impression of stylised leaves.

The menu

I integrated the navigation menu into the landscape, using Illustrator’s “type on a path” tool to make the text follow the hills. I particularly liked using a flowing curve as I think it draws the eye along, in addition to making the design feel fluid and less boxy.

The flowing navigation menu

XHTML

The menu is marked up as an unordered list, with each list item containing a link to a different section of the website. The use of an unordered list is an example of semantic HTML because it is a structure that describes the menu (as being a list of links). This is far more descriptive than, say, a series of separate paragraphs or unrelated divs.

Each list item within the menu contains either an anchor or a span element. The former links to a page whereas the latter is non-clickable and is used to highlight the current page, through the application of special styling. Not linking to the current page is good usability, as it avoids visitors wasting their time by following a pointless link, which could in turn leave them confused. According to Jakob Nielsen this was the tenth most violated home page principle in 2003.

CSS Positioning

The menu is implemented in CSS using absolute positioning, which allows for precise placement of elements relative to the top-left corner of the browser viewport. Each menu item is a graphic, which is applied as a CSS background – by carefully positioning the list items, the graphics seamlessly overlay the large background. This gives the impression that the background and menu are one.

The menu items are positioned absolutely and laid precisely over the large background

In some places I could have cropped the graphics tighter, which would have reduced the file size a little. However, I decided to cut them out using a grid as it makes the positioning a little more straight forward. The size of the elements also constitutes their clickable area, so I think it’s no bad thing to err on the side of generosity when it makes them easier to click.

CSS Sprites

When a visitor hovers their mouse cursor over a menu item it lights up which makes the menu more visually interesting, as well as providing useful feedback. I implemented the rollover effect using the CSS Sprites technique.

The bottom half of this CSS sprite becomes visible via styling

The first step is to make the CSS sprite by joining the graphics for the normal state and the hover state together, as seen above. The next step is to then write some styling that applies the graphic as a background to an element, adjusting its position when appropriate:

The styling rule above moves the background up by 64 pixels when the visitor hovers their mouse cursor over the link, which reveals the lower half of the graphic. The rule also applies to the link when it is focused, giving the visitor feedback when they tab through the page. The last part of the rule, which matches a span, serves to permanently highlight the menu entry, signifying to the visitor that they are currently on that page.

The CSS Sprite technique is nice for a couple of reasons. Firstly, it doesn’t rely on JavaScript so visitors without scripting enabled can still see it. Secondly, it reduces the number of separate images which means fewer HTTP requests are needed to fetch them. Thirdly, because the images for both the normal state and hover state are retrieved together there’s no unsightly delay when switching between them. I could have gone a step further and joined all the menu graphics into one large CSS sprite but decided not to as I find it easier and quicker to maintain separate sprites.

Transparent Column

The home page features a transparent column on the right – or at least, that’s what I wanted visitors to see. Older browsers don’t support transparency (as well as many other useful things), so these shortcomings have to be worked around to achieve consistent cross-browser rendering.

The column on the right appears to be transparent

The transparent column is absolutely positioned, allowing me to position it exactly where I want. Once the position was finalised I cut out the portion of the background image that the column overlayed. I darkened the cut out slice and then applied it to the column as its own background image, giving the impression of a transparent column. As the column grows taller its background image gives way to a dark blue colour, which continues the transparency effect no matter how tall the column is.

A caveat of using absolute positioning is that the column is no longer part of the document flow. This means that the column cannot be longer than the rest of the page content, otherwise it will overlap the footer. For my purposes this isn’t a problem as I will always keep the content of that column short.

The Footer

Copyright Text

The copyright text is a graphic overlayed onto the hill beneath, giving the impression of text that follows the terrain – just like the menu positioning.

The most interesting aspect is that the page applies a dynamic CSS class to the copyright element. For example, in the year 2009 the class applied is “copyright2009″. The benefit of this approach is that copyright graphics and styling rules can be pre-created in bulk, which ensures that the copyright notice will always be up to date (well, for a long time anyway). Small details like an outdated copyright statement might lead a visitor to mistakenly think that a website isn’t being looked after.

I use several styling rules like the ones you see above, to keep my copyright up to date, which is a great time saver. It particularly reduces the maintenance burden of running a website that has multiple designs available.

Positioning

The footer needs to be sufficiently far down the page to look as intended. It’s conceivable that some pages might be very short, in which case the footer graphic wouldn’t fit into the page seamlessly.

A short page prevents the footer graphic from joining seamlessly

To prevent this I have enforced a minimum height on the div that contains the page content. To get this to work in IE6, which doesn’t support the “min-height” property, I used the height property instead (which happens to behaves like min-height, in IE6):

As you can see from the styling above, to stop this trickery affecting other browsers I added another height declaration prior to the one intended for IE6 – ordinarily CSS precedence would stop this preceding rule having any effect, but the inclusion of “!important” on the end gives it more weight. IE6 doesn’t make the rule any more important, so will continue to apply the second rule as desired.

Room for Improvement

Having had the chance to reflect on the “Night” design there are a few areas where I can see room for improvement:

Alignment

The design is left-aligned rather than centered, which I don’t find quite as comfortable on the eye. I think this issue has been exacerbated by the fact that I recently upgraded to a large widescreen monitor and the extra screen space has made this issue more noticeable. In the grand scheme I think this is a minor issue, because Google Analytics reveals that a majority of my visitors are using resolutions that are no wider than 1280 pixels.

The Fold

Jakob Nielsen has written about the fold in the past: visitors don’t always scroll down a page, so if important information is not immediately visible then they might not see it. The “Night” design’s focus on large graphics means that at a resolution of 1024 x 768, most of the content is below the fold. It’s not ideal, but one of the goals of my website is to promote my graphical skills, so it’s a trade-off I’m prepared to make.

At 1024 x 768 only a couple of lines of content are visible above the fold

Colour Scheme

The background colour transitions from green to blue as you look down the page, which made picking link colours with sufficient contrast a bit trickier (this area of usability is covered by checkpoint 2.2 of the “Web Content Accessibility Guidelines“). Similarly it also presented challenges when trying to give adverts a look and feel that fits in with the page. Visitors tend not to look at adverts which are blatantly adverts, so adjusting the colours is quite important if adverts are to be effective. I should emphasise here that the intention isn’t to trick visitors into clicking adverts by making them indistinguishable from content – it’s just to encourage a glance, rather than an instant dismissal. Since I place adverts manually I have a reasonable idea of where they appear in the page, allowing me to choose a suitable look and feel.

The End

Overall I’m quite happy with how the “Night” design has turned out – out of all the designs I’ve made it’s currently my favourite (though I suppose all designers are most fond of their latest work).

Tags: css