Better by design

In practice, many designs contain elements of both fixed and liquid width. Designers and web usability gurus still argue about whether fixed or liquid is better, and each goes in and out of fashion. The truth is a fixed layout is simpler to get right, because you need only get your content correctly positioned at a single size, and needn’t worry about what happens if the user resizes. The challenge with fixed-size layouts is to choose a size that looks okay on relatively low-resolution screens with enough space for your content, and doesn’t look too daft on a high-resolution screen.

Better by design

Look at Amazon.co.uk and BBC.co.uk and (once you get inside) and any number of smaller sites, and you’ll see they all share the same basic layout. They all have their navigation at the top left, which makes it almost certain to remain visible at all times – if you put it on the right and the site is viewed at low resolution, the menu might not be visible without an irritating horizontal scroll.

nlightn multimedia

The key is the width: users are pretty comfortable these days with scrolling up and down, but scrolling across is always unwelcome and to be avoided wherever possible. Looking at the logs for Passyourtheory.co.uk for May 2009, I see that only 3% of visitors used a width of less than 1,024 pixels, the two most common resolutions being 1,024 x 768 and 1,280 x 800, which together comprised two thirds of the visits. It’s therefore pretty safe to choose a width between 900 and 1,000 pixels.

If you look at other websites for inspiration, so many of them use this layout that it becomes a de facto standard, which has the knock-on benefit that visitors become used to this layout and know immediately where to look for the menus. That isn’t to say that I’m opposed to other layouts – far from it – but for your first projects I’d recommend using this one, which also happens to be relatively simple to realise in CSS.

Rule of thirds

Anyone who’s studied design will have heard of the “Golden Ratio”, a real number 1.61803399… or thereabouts that describes the most visually pleasing form-factor for art components, in our case web pages. This fundamental ratio appears everywhere in nature – from the branches of trees, veins and nerves in plants and animals, to flower petals and snail shells – as well as in art from Greek temples to Leonardo.

Theories about why it works are many, but the approach became popular during the Renaissance and artists have been using it for centuries since. To put it in practical terms, once I decide that the area containing my content is going to be the largest on the page (as it normally should be), I ought to make it around 1.62 times wider than the column that contains the navigation and logo to the left. For most of us, the whys and wherefores aren’t important: we simply need to know that this ratio works and to use it.

In fact, I can suggest an even simpler approach called the “rule of thirds”. With one column 1.62 times wider than the other, the smaller column is very roughly one-third of the overall width and the bigger column two thirds, so you get almost the right effect by splitting your design space into three and making adjacent items one or two parts wide. If you also have sub-elements within your design, these too should be laid out by thirds, which will result in a layout that looks visually balanced. (A more accurate rule is to divide the space into eight and use three or five parts for adjacent columns.)

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.

Todays Highlights
How to See Google Search History
how to download photos from google photos