Web pages and resolution
Head of Design at Netizen, Richard Anderson, outlines the issues of display resolution and designing for the web
Traditional print design is based on physical dimensions, such as 210mm x 297mm (A4) and dpi (dots per inch) resolution, such as 150dpi. A designer would work with the physical dimension and for the desired resolution.
On the web, the ‘physical size’ and resolution are out of the designers control, being determined by both the users screen size and resolution settings. A screen is still comprised of dots in the form of pixels, however a designer cannot determine what dpi resolution a 20 inch computer screen will be. In addition, the user has a resizable browser at their disposal, so unlike printed media, focussing on physical dimensions is the wrong way forward.
Two common approaches have evolved to cater for this: designing fixed pixel size sites (usually fixed width) and designing ‘fluid’ layouts that expand and contract depending on the resolution, or more accurately, the browser size.
Designing for an 800 x 600 display
The most common display resolution for many years was 800 x 600 pixels. As a result, most sites were designed to fit comfortably within a browser being used full screen (‘maximised’) at that resolution. Of course, a browser has its own controls across the top and a scroll bar to the side. As a result, this usually left around 780 x 430 pixels in use to view the actual webpage.
Designing for a 1024 x 768 display
However, in recent years the number of people with their displays set at 1024 x 768 pixels or higher has increased massively. For some time new machines have been set at this resolution or higher by default. This usually leaves around 1000 x 590 pixels in use to view the actual web page in a normal browser, assuming the user has their browser maximised. Designing for this resolution has now become the norm.
Fixed widths v elastic layouts
The advantage of designing fixed pixel width sites is that the layout can more easily be controlled, with the relative positioning of objects easier to predict and design for. Layouts that have a degree of control allow the designer to hone the pages to communicate more effectively. Additionally, resizing photographs in a browser produces poor results, with unpleasant pixelation visible and a loss of quality if enlarged from the actual pixel dimension of the image file.
Fluid sites, or ‘elastic layouts’ are those which expand or contract to fill the available browser width. Their big advantage is that work flexibly with the users browser size. They can avoid large areas of unused space to the side(s) of the webpage when view in maximised browsers on higher resolution display resolutions (eg. 1600 x 1200 pixels). They can also help reduce the need for horizontal scrolling for those users still set at 800 x 600 screen resolution or using a browser that is not maximised.
However, fluid sites do require more work to design and create and can produce some unforeseen results. For example, a brief paragraph of text can turn into an incredibly long, single line of text when the space it has to fill is fluid. This can impact upon readability, making it hard for users to maintain a sense of position. Fluid sites can easily end up with a broken apart, disparate look and for this reason they are still far less popular on the web and certainly less popular with designers. In addition, statistics suggest that those using higher resolution displays are less likely to maximise their browser
Examples of fixed width sites:
Examples of fluid width sites:
Statistics on display resolutions:
Related reading...
Some other material you may find of interest...