Ben spends half his time working at ILRT in Bristol, and the other half working freelance through his company Jackfruit Design. Ben has worked with various design agencies in London and created websites for brands including HSBC, Sony Playstation and The Office of Fair Trading. He has provided full user experience design for a number of full-scale web applications.Getting web page width right
Posted: 20 August 08
Deciding on an appropriate width for a web page is a complex issue. Different users have widely varying screen resolutions, giving them more or less screen real estate. Your web page may look perfect on your desktop computer screen with a width of 1280 pixels, but part of the page may be cut off from view on your client’s laptop which has a screen width of 1024 pixels.
Making your page widths flexible is one option, and many of the more content-heavy sites such as Google and Amazon do this, as well as many UK government and public sector sites. The text on your page flows into the available space and allows users with larger screens to see more at one time, reducing the need for vertical scrolling.
But fully liquid page designs have some serious drawbacks. As a designer, it becomes impossible to maintain accurate control of a proportional layout grid. This almost always compromises the visual impact of your design.
From a usability perspective, web pages that stretch very wide can become hard to read. Research has shown that users feel most comfortable reading around 55 characters per line. Although it seems that people are able to read faster at around 100 characters per line, a modern widescreen monitor could give around 300 characters per line at full width. This becomes much less comfortable to read.
Fixing the width of the page is the solution of choice for many graphic web designers. But deciding whether to fix it at 1024 pixels wide (the most common screen width) or 800 pixels wide to support people using old computers can be tricky. It really pays to research your target audience and make a judgment about what kind of equipment they tend to use.
Sites with a lot of dense information are more likely to benefit from liquid designs. There is also potentially some benefit to allowing users to size their own browser window to arrive at a line length they feel comfortable with. But even then, it is usually a good idea to place some limits on how narrow and how wide a page can go (see an example). Oddly, very few sites do this, but it is fairly straight forward to stop the page expanding beyond, say, 1200 pixels. Do you really want your page to extend to over 2000 pixels? Do you really want it to go narrower than 500 pixels?
There is no catch-all answer to the page width issue, but a consideration of your content and target users will set you in the right direction. And finally, it is also possible to test your site on real users once it is built.
Comment
Commenting is closed for this article.