University of Greenwich
Website and presentation by James Barker, 3rd December 2003.
Should websites be designed in such a way as to allow the user to decide how they are rendered or should web designers attempt to exert the same control over their designs that print designers have?
Page layout
Background
The web designer has to bear in mind that client application set-up will always have some influence over how a site looks.
- differing screen resolutions
- use of the Windows Resize Handles
- different web browser applications
Competent web designers must test their work at different screen resolutions, the appearance after a Windows Resize operation, and using different web browsers.
Let's discuss these issues in more depth:
Screen resolutions
There are various monitor settings in common use across the internet. The common range is from 800x600 pixels to 1024x768 pixels and even higher. This means the designer has to choose whether the site should expand to make use of the extra work space on higher resolutions (using a fluid layout) or should it have a fixed pixel width so the layout is identical regardless of screen resolution.
Statistics
Here are the latest figures for screen resolutions generally:
| Screen resolution | Percentage of users |
|---|---|
| 544 x 372 (Web TV) | < 1% |
| 640 x 480 | 2% |
| 800 x 600 | 45% |
| 1024 x 768 & higher | 51% |
Source: Upsdell.com
The most popular screen resolutions are 800x600 and 1024x768. There is no longer a need to design your layout to fit a 640x480 screen. Whilst it is desirable for a site to work effectively at all resolutions, 640 pixels is not really enough for today's e-commerce sites, and as they only represent 2% of users they needn't be considered. Indeed, the latest version of the BBC's website sees it using a fixed width layout, starting at 800x600. The previous version was laid out for 640x480, so the BBC have decided to discount this old resolution. From 800x600 upwards horizontal scrollbars are to be avoided at all costs, but vertical ones are OK, folk are used to scrolling down.
A significant minority use even higher resolutions. Fluid text layouts will become difficult to read across the greater screen width. However, anything higher than 1280x1024 is probably used by a graphic designer, who needs a large work space, and will probably be used to changing their resolutions down to make web browsing more comfortable.
Increasing screen resolutions can be a challenge for web designers, but even if technology advances to higher resolutions, consumers and computer manufacturers may realise there will never be a demand for ultra high resolution as it makes comfortable computing difficult.
Web TV and palm top devices have even smaller resolutions - are their users an important market? If so consider this in your design!
Fixed width or fluid layouts?
The use of fixed-width and/or fluid layouts is often debated. This is an issue because users have differing screen resolution sizes or web browsers which means there is more (or less) available space depending on the resolution.
A fixed-width page layout means the designer has set the content area of the site to a fixed pixel width. The page will appear exactly the same regardless of the user's screen resolution, resulting in spare white space around the content on higher screen resolutions. Fixed-width layouts are usually anchored to the left hand edge of the screen, but they are often positioned in the middle of the screen (centred).
White space can be made less obvious by using background colour or subtle background images.
A fluid layout means the designer has set the content area of the site to expand or contract to match the full current size of the user's browser window.
There are pros and cons of both methods.
Fixed width layout - an example
The BBC's website uses a fixed width layout. Analysis of the source code for the home page reveals the width is fixed at 773 pixels. The site fills the screen horizontally on 800 x 600 pixels resolution. At higher resolutions, white space appears to the right of the content area but the content itself is laid out exactly as for other resolutions.
BBC when viewed at 800x600
The site fits the width of the screen perfectly
No horizontal scrolling necessary
Over half the content is off the bottom vertically
BBC when viewed at 1024x768
The site now covers only 80% of the available width
More content is visible vertically now
BBC when viewed at 1280x1024
The site now only covers
two thirds of the width available
Most of the site is visible vertically
BBC when viewed at 1600x1200
Only half of the available width is used -
big white space to the right
No scrolling now necessary vertically
Centred fixed width layout - an example
Netsounds when viewed at 1280x1024
This fixed-width layout is centred on the screen.
This site will behave like the BBC site at different
screen resolutions, but anchored to the centre, not left.
This site's width is at optimised at 640x480 resolution,
now a minority of users
This fixed width site would appear less stark if the background was given a harmonious colour. Bananalotto.co.uk also fixes its width, but the yellow background is less harsh than the white. Maybe?
Bananalotto.co.uk when viewed at 1280x1024
This fixed-width layout is centred on the screen.
This site will also behave like the BBCs at different
screen resolutions, anchored to the centre, not left.
The brand colour background replaces white space
Fluid layout - an example
Amazon uses a fluid layout, and fills the screen horizontally on all screen resolutions. It is interesting to note that certain areas within main content container use a fixed width.
Amazon when viewed at 800x600
The screen is filled horizontally
but most content scrolls of the bottom.
Amazon when viewed at 1024x768
The screen is still filled horizontally
More content is shown vertically
Notice how the content areas to the left and
right are FIXED within an otherwise FLUID layout
Amazon when viewed at 1280x1024
Horizointally filled
Much more content visible vertically
Long text regions may be difficult to read due to
long horizontal area of text
Amazon when viewed at 1600x1200
Horizontally filled
More content visible vertically
Long text regions increasingly difficult to read
Fixed width / centred
Pros
- allows the designer complete control of look of site
- quicker and cheaper to develop - lower testing overheads
Cons
- wasted white space on higher resolutions
- sites look squashed on higher resolutions
Fluid
Pros
- makes use of all available screen space horizontally
- higher res screens reveal even more content vertically
- improved accessibility
Cons
- increased width of content can make text more difficult to read / follow
- more expensive to develop - higher testing overheads
- have you got enough content to fill the high resolution screen area? If not consider fixing width
There is an excellent research article about use of fixed or fluid layouts at NetConversions.com
Conclusion
The web designer must ensure their site is fully optimised in at least 800x600. If they decide to fix the layout at this width, they must be prepared for white space on higher resolutions, like in the BBC example above.
Does the content lend itself to a fixed or fluid layout? The "newspaper" layout - may not work at high resolutions as the short columns style will be lost. The Register is a good example of a layout that would not work with a fluid width at higher resolutions.
Jakob Nielsen's website, useit.com has a text-heavy fluid layout - look how much text appears on one line at 1600x1200 - it makes following the text difficult.
A mixture of images and text and a mixture of fixed and fluid widths within a main fluid container can look great at all resolutions, for example Amazon, although the text does eventually become difficult to read at 1600x1200 there too!
Resize handles
Regardless of the their screen resolution, the user can alter the size of the web browser window using the Resize Handles that is a standard Windows feature.
The effect on a website when the browser is resized in this way is for it to behave according to its fixed or fluid layout charateristics. The effect on your site is entirely predictable if you have a fixed width layout - a scroll wheel will be introduced wherever the Resized window is smaller than the site's corresponding dimensions.
Move your mouse pointer over these images to see a simulation of different layouts' appreance during Windows Resize.
Fixed width layout
during Resize
Fixed width (centred)
layout during Resize
Fluid layout
during Resize
Web designers should always test their site's layout during Windows Resizing.
Web browsers
There are several web browser clients available and a website's appearance can differ between them. By far the most popular browser is Internet Explorer for the PC, but designers must consider how their work will look on other platforms and browsers. All browsers are not the same!
Browsers all interpret CSS in slightly different ways, although this is less of a problem than it were during the IE v Netscape "browser war" of the late 90s. To be sure of control over the appearance of your site on all users' machines, you must check your site in the minority browsers.
Here are the latest figures for screen resolutions generally:
| Browser | Percentage of users |
|---|---|
| Internet Explorer 6.x | 59% |
| Internet Explorer 5.x | 34% |
| Internet Explorer 4.x | 1% |
| Netscape 4.x | 1% |
| Other Netscape compatible | 1% |
| Opera | 1% |
Source: W3Schools.com http://www.w3schools.com/browsers/browsers_stats.asp
Depending on your target audience, the designer may want to consider the site's layout on Web TV or palmtop.
If a designer and / or client are serious about the internet as a revenue stream, investment in cross-browser support will maximise the site's potential.