The myth of the perfect width for web design

Every so often the debate about what the ideal width to design web sites to comes around. The most recent one I read was Cameron Moll’s blog post Is it time to move beyond 960?. This debate is normally triggered by a new screen resolution becoming ‘standard’ as monitor technology improves.

Everyone loves a (non)standard

First of all web designers agonised over whether to switch from designing sites for screens 640 pixels wide to the new and exciting 800 pixel width; then newer screens made 800 pixel resolution less common and many designers started designing sites optimised for a width of 960 pixels. Now people are talking about whether technology advances mean that 1080px is the new ‘best’ standard width.

In my opinion, although it would be nice and convenient for web designers to pretend that we can decide upon an unofficial standard width, the real-world truth is more complicated. The only thing that can really inform design decisions is the metric data for the site in question.

Screen resolution ≠ Viewport

Firstly, the screen resolutions that are selling in the high street are meaningless. What do I care that 75% of all computers have screen, say, 1280 pixels wide if 80% of the people who visit my site have screen resolutions of 1024 or 800 pixels?

Secondly, screen resolutions are not a good guide anyway, especially once you start to get into the larger sizes. Why? Well, because people with larger screens tend not to use their web browser full-screen. They make use of the extra screen space by having several windows open side by side, not one window taking up the whole screen. The important information that you need is the size of the visitor’s viewport — that is the viewing area inside their browser window, excluding things like toolbars.

Viewport information is harder to come by; as far as I am aware, it is not retrieved by Google Analytics, for example. But there are ways to get it. The method I use for this site is Shaun Inman’s excellent metrics package called Mint, which uses plugins to extend its powers. One such plugin is called Real Estate and gives the actual viewport size. So if my visitor is viewing my site on a 30” monitor but is using only a 300x500 pixel browser window, Mint will show that they were only seeing a small chunk of my site, and not its vast encompassing glory. That’s dead useful, that is.

Embrace the uncertainty

Of course, all of these questions of pixel measurements can also be rendered moot if you simply design a flexible site. There are various ways to do this; one way is to let the site stretch to fill the browser’s window, whatever its size. This is referred to as Fluid design. Overly-long or short widths can be avoided by using max-width and min-width settings, respectively, via CSS — providing that you are building sites responsibly using web standards. IE6, being a horrible, badly behaved pig of a browser that doesn’t play ball with responsible web-designs without extensive cajoling, does not natively respect min/max-width but can be forced to with javascript. In any case, IE6 is on the way out, and IE7 and 8 do respect width limitation.

The other way to design a flexible site is to link its width to the text size that the user has chosen for their browser. Bigger text = wider site layout, a technique referred to as Elastic design. Some sort of width limitation is often advisable here also, and it should be remembered that increasing the text size does not always mean that the user has a big monitor.

One last note: the benefits of fluid and elastic design may, in turn, become redundant in the near future with developments by the browser manufacturers themselves. Page zooming techniques built into many modern browsers enlarge all elements of the page, not just the text size. This resizing method is still in its infancy and is implemented slightly different between different browsers, but it is an interesting development that web designers will be watching closely. Once the technique has been refined and perhaps standardised a little bit it might make fluid and elastic designs no longer necessary. Not yet though.

In the meantime, the golden rules are:

1. Choose an optimised width for your site based upon real metric data reflecting your site’s audience. Don’t blindly follow a ‘standard width’ determined by web designers and decided upon by looking at screen resolutions.
2. When analysing metrics to determine the best optimised width for your site, try and use viewport measurements, not screen resolutions.
3. If possible, design for an ‘ideal’ width (based upon metric data) but make the design flexible so that visitors with different resolutions/window sizes are not left out in the cold or forced to scroll sideways.