Thursday, 25 August 2011

Designing websites with the right screen width

Deciding what pixel width to design your website for is still a pain in the ass, even after all these years.
Here's a few thoughts to help make a more informed judgment.

First point: Browser size is not the same as screen resolution

Screen resolutions are going up year on year, partly due to increased monitor sizes, but mostly these days due to increased PPI (pixels per inch), such as on 'retina display' screens.
Browsers are increasingly able to intelligently scale their content, rather than display content at 100% pixel dimensions (e.g. iPad / iPhone / Android browsers).

Second point: We need to distinguish between pixel width and viewing width

Pixel width is the width of the website as a designer would see it in Photoshop.
Viewing width is the width of the website as a proportion of the user's field of view at a comfortable reading distance.
For normal websites in normal use cases, we could refer to viewing width as on-screen width, and measure it in centimetres.
Websites will be able to increase their pixel width as technology improves, but they will not keep on increasing their viewing width.
This is because what makes a comfortable viewing width is more to do with human perception than it is to do with technology.
Eyes don't like to strain at something tiny. Nor do they like to scan too much around the place.
For instance, body text is nice to read when there's about 12 words to a line. It's more 'scannable' when there's a few less (but not many), and it starts to become hard to track when there's a lot more than 12.

Third point: We should aim for a good viewing width, not anything else

The only reason we should care about pixel widths is because they are proportional to viewing widths on standard browser setups for the vast majority of our users.
Design for the viewing width that suits most of your users.
Here's how to calculate that, far better than just looking at your stats and saying "Most people are on 1280 wide, so let's set up our design like that."

Finally: Calculate what your users will be comfortable with, not just what they can accommodate

1. Look at your stats and get the screen resolutions used by the majority of your users.
2. Based on those resolutions, consider the physical dimensions of the screens that your users are most likely to be looking at.
3. Make intelligent assumptions about the likely comfortable viewing width as a percentage of those screen sizes. People with smaller screens tend to set their browser to full screen. When screens get past a certain size, their users tend to stop stretching the browser to fill the screen.
4. Multiply the viewing width percentage by the screen width, and you have a reasonable proxy for your users' comfortable (or preferred) browser width*.
5. From that, you can work out how many of your users would be comfortable with your proposed screen dimensions.
6. Additionally, you may wish to consider whether your users could accommodate your screen dimensions. That is, do they have enough screen size to stretch their browser to your proposed screen dimensions. This will generally be the width of the screen minus around 24 pixels for scrollbars and borders.
Aim for something that most of your users are comfortable with. And avoid something that only just accommodates them.
This spreadsheet should help you work out the 6 steps above.
Google doc: Calculate the right screen width for your users
* A useful reference for whether you have reasonable estimations of comfortable browser width is

No comments:

Post a Comment