Web design - choices and consequences

by Bill Marshall
of http://www.oyster-web.co.uk

Last updated: 12 Sep 2007

The web is not a brochure.

Unlike a printed item such as a flyer, brochure, catalogue or magazine, or even a TV or video, a website is a fluid viewing space which is seen in many different environments, sizes, and conditions.

If you are planning a new website then there are a number of factors that you need to be aware of before you start which will affect what layout types are possible and how the various design elements will relate to each other further down the line.

The most important of these factors that you must understand in order to make informed choices is that you have no control whatever over the size and shape of the viewer's web browser – there is no “normal” viewing size and shape - so one of the principle jobs of the designer is to make sure the site looks good in a wide variety of situations. This is a very different discipline to laying out a print design.

Viewers have many variables:

the resolution they are viewing at - on a PC this may be 800x600, 1024x786, 1152x864, 1280x960, or 1600x1200. Or increasingly any of the wide-screen formats.
The physical size of the screen – 15 inch, 17 inch, 19 inch, 20 inch or 21 inch. (Or a small screen PDA or phone)
What browser they are using and what toolbars they have. If they use Google or Yahoo toolbars for instance, or any of the social networking additions then their screen height may be considerably smaller than otherwise.
Whether they use any of the sidebars - the most common being the History or Bookmarks sidebars and what size they run them at.
Most important of all – what size they have their browser window. Most people working at resolutions above 800x600 don’t maximize their windows. They use multiple windows, running various programs simultaneously, and have each one set to whatever they feel comfortable using.

As a result of all this there are two main ways of designing sites, each with a number of sub-methods.

Fixed width design

In this method the designer and client decide what width the site should be and then fix the Content to be constrained within a container of that width, and they accept the consequences of that.

They accept that if anyone is viewing at smaller than that width that they will have horizontal scroll bars. As for anyone using a wider window size one of two things can happen. The page can be left aligned so that it hugs the left edge of the window and any additional “white space” is added to the right hand side.. Alternatively the page can center-aligned so that the box containing the content floats in the center of the screen and the extra white space is added equally to both sides, thus reducing the visual impact.

Within the container the content can be arranged in any way desired and it will stay in position. Only the container floats on the background (which can be coloured or have a repeating tiled image if desired)

An example of a left aligned fixed width layout is the BBC site. Because, being the BBC, they have to be as accessible as possible to everyone they have gone for a width that will allow full-width viewing at 800x600. Space is added on the right at higher widths.

Flexible width

In this method the content attempts to fill the browser window; by either the whole layout, or a portion of it, being variable width. This type of design was very popular in the old days of 640x480 screen resolutions where it was common for people to browse full screen and where clients wanted the page to work on an 800x600 resolution as well.

There are various consequences that are more complex than the fixed width method, including the following:

Line lengths will vary depending on the width of the browser window. This may result in lines that are uncomfortable for people to read because there are too many words per line.

Images will float against the variable text lines. Their top edge will start at the top of the block of text that they are in but the bottom may have text wrapped round it or it may extend below it.

Alignments will vary. Everything can be left aligned, but that may result in large variations in alignments on the right and ugly areas of space to the right. Centre-aligned header images will float relative to the text below it so cannot be aligned to it (a large left-aligned header will often look rather odd in a design where most things are floating or centred).

Tables containing blocks of images can either be:

fixed width centred, in which case space will appear on both sides at wider settings
fixed width left aligned, in which case double the space will appear on the right.
variable width centred, in which case the images will float, adjusting to the size of the window, but obviously cannot be aligned with anything
variable width left aligned, in which case they can align on the left edge but will float on the right and will again look rather odd

Conclusion

Either method can be made to work but the design implications of each have to be understood and the advantages and disadvantages of each have to be weighed up. What is appropriate for one site may not work on another – what is considered important on one site may be irrelevant to another. Unfortunately there are many examples out on the web of sites where the decisions have not been correctly thought through and as a result a proportion of users have difficulty using the site or see a sub-standard version of it, often resulting in reduced conversion rates.

The fixed-width method is generally easier to implement because the layouts are mostly set and can be maintained. Once the initial constraints are accepted everything else is relatively straightforward.

The variable width method is rather more complex and the implications are greater and more subtle. Knock-on effects are greater and making some decisions will mean that other effects are imposed. It's no good asking your designer to make elements line up if the basic design prevents them from doing so!