Understanding screen resolutions and web browsing
One of the recurring questions that we get asked when discussing a website preview is 'can you make the design fill my screen'. This factsheet outlines the issues that need to be taken into account when considering the width of a website.
Monitor sizes
There are many different size monitors in use in offices and homes throughout the country, from the old 14" monitors through to 19" plus and the snazzy new wide screen ones. In almost every situation, our biggest priority is to make sure that as many people as possible get a good viewing experience when they visit your website.
Screen resolutions
In addition to monitor size, there is also screen resolution to take into account. In the beginning, everyone was viewing at 640x480 pixels. This moved on to 800x600, and now the majority of people are viewing 1024x768 or 1280x1024. There are also a small number of people on wide screens, for example an estimated 5% of people use 1440x900.
Other factors
Other factors to take into account include whether additional toolbars (such as the Google toolbar) are likely to be installed; whether the person viewing your site is working in full screen mode; and whether they have a sidebar (such as History or Favourites) open.
We take all the above factors into account when designing your website.
Illustrations
The screenshots below show how our website displays at the different resolutions discussed above (it was designed for 800x600 but the principle is the same for 1024x768).
 800x600 |
 1024x768 |
 1024x768 with sidebar open |
 1440x900 |
 1440x900 with sidebar open |
 1440x900 browsing not full screen |
Over the last year the industry standard has moved from designing for 800x600 to designing for 1024x768 (this is the default setting on a new computer with a standard monitor) and our current work is in line with this.
Your customers need to be able to use your site whatever their screen size and setup, otherwise they will click off and go elsewhere. For a site designed to fill a wide screen setting at 1440x900 an estimated 95% of visitors won't get the full picture.
(To see all this in practice, try playing with the resolution settings for your monitor. PC users can do this in their control panel - choose display and then the settings tab. Mac users do this via the system preference display settings.)
Fixed Vs Variable
In the early days of the web most sites were designed to fill the screen however wide it went. However, variable width sites are out of vogue due to the restrictions that they place on the layout of the page content. Most new sites these days are 'fixed width' as it gives more control of the layout.
A good compromise
One neat option is to put something decorative on the background, outside of the main content area, which looks good on wide screens but is not missed on other screen settings. Other techniques include centering the website and putting less important information in a column on the right hand side of the screen.
Liz Watts
Imaner Consultants, September 2008
P.S. Here's a new tool to illustrate this further: browsersize.googlelabs.com