usability.codegraffiti.com

The fantastic thing about CSS is that it allows an unlimited number of layout combinations to suit the content and features of your website. There are a few guidelines worth considering before you decide on your final layout, as I cover below.

Design around the fold

The concept of a ‘fold’ comes from broadsheet newspapers, which are folded in half on the store shelves. The top part of the newspaper, said to be above the fold, is the only part of the newspaper visible to browsing customers and therefore influences their purchasing decisions. We can apply the same to websites, with the fold representing the bottom of initial visible content of your website, before the user has touched the scrollbar. This is of course different for every browser, toolbar, zoom and screen combination.

Consider a user that has been brought to your website via a link on a blog or by a friend and has no existing experience with your site. The first screen of content that the user see provides their first impressions to the content, purpose and style of your website and as we know, first impressions are everything.

Recognise the areas of your site first presented to the user and build focus points to guide their attention.

Ensure your page title is clear, but not over the top. This isn’t a tabloid newspaper so you don’t need a 100 pixel high headline and a huge image to go with it; users tend to sit quite close to their monitors and can read text at a reasonable size. Whilst an image may be worth a thousand words, these words are ambiguous so a large image can be better replaced with an opening summary or just go straight into the article itself.

Around the top of the screen you want prominent branding to inform the user where they are and main navigation to show where else they can go. Many designers decide to insert a large advertisement after the first paragraph of content, that must be scrolled past to continue reading the article. This can leave a negative impression on the user and pushes that important content out of view.

A cluttered screen with too many advertisements, links and sponsors can soon distract from the main content, drawing the users focus away from what is most important.

Layout conventions

You have freedom over where you put your content, but the web has been around for a while now and a number of conventions are now in place. Your visitors will be familiar with these and may come to expect them from your website.

Follow existing conventions to avoid confusing your user and allow them to browse freely.

Every site should have their brand displayed in the top-left of the screen, allowing quick identification of your site. This is not only convention, it is also the only safe place to do it in order to ensure it does not slip off the side of the users screen. Importantly, this logo or heading should be a link to the homepage of your site, allowing the user to get back to the root quickly and without searching for links.

Navigation will likely be placed all around the page content, typically the top is used for the main sections, the left for sub-section navigation, the right for figures, related articles or advertisements and the bottom for corporate, legal and anything of low importance. There is freedom available here; for example on a customer service website your support and contact links should feature heavily above the fold, whereas on a blog they can be safely tucked into the footer of the page.

For other things like image placement, form layout and so on, it is worth considering how other popular websites do it and ask yourself, ‘what would a user expect?’

Site Width

The convention for a safe width of your website is a mere 750 pixels. This allows someone with a 800 x 600 pixel screen to view your website without horizontal scrolling (the remaining 50 gives some room for scrollbars and borders). Nowadays you don’t find any desktop screens with such a small resolution, but netbooks like the Eee PC are common and a user may not have the browser window maximised to the whole screen (I rarely do).

A common solution is to fill the first 750 pixels of width with navigation and content and create a column to the right of this for advertisements and related materials. This way, the important content is shown to everybody whilst the rest is shown where it is possible.

There is a great debate over fixed width versus flexible width and you can do whichever you like. I think it depends entirely on the content you are providing and fixed width is the best choice for a blog as it keeps the lines at a reasonable length for reading, even at the cost of extra white space.

Mobile content

You shouldn’t be making a separate version of your website especially for the mobile domain as this creates twice as much design work for yourself and the best mobile browsers don’t need you to but you can still make special pages designed for mobiles. A bus company for example, can make a simple page that displays the bus times for a certain stop or a cinema can submit their film listings. In these situations your target audience are users on the go and it is reasonable to design a site that suits them.

Mobile pages should be as simple as possible, driven by content with minimal decoration.

The biggest consideration when mobile browsing is the bandwidth used, affecting the cost and speed of browsing. For this reason you should make your mobile pages as simple as possible, with as few novelties and distractions as necessary to provide the user with the information that they need. This benefits usability as well, as mobile users operate without a mouse and can find it difficult to select links.