What width should your website design be?

Designing for the web can be a tricky business, because visitors to a web page arrive via different devices and browsers with a huge variety of different settings. So how should you present your website so it looks well to as many people as possible?

That question is too large a question for one blog post, so let’s pair it back to one key question – how wide should you design your site? Here is my answer and how I came to decide on this approach.

Fluid vs. Fixed
The first debate when it comes to presentation of your website is fluid vs fixed width design. Fluid design is one that scales no matter what size your browser is, and fixed width remaines the same width whether you visit with a tiny screen or a massive screen.

Fluid designs tend to be more accessible and have obvious advantages when it comes to being suitable for varying screen sizes, but fluid websites by their nature have to relinquish a lot of design control.

In 2006 Jakob Nielsen recommended fluid (or liquid) layouts, but the reality is that people wanted more control over the appearance of their sites, and while certain sites, like Governmental sites, whose sole purpose is to present information to the public are perfect candidates for fluid layout, most businesses require more control over their design and therefore fixed layouts are much more popular and common.

With a fixed width design you have much more control over how the site will look on all devices and screen resolutions, but you have to play the numbers game because a site designed for small resolutions will look dwarfed at higher resolution screens and a site designed for higher resolutions won’t be entirely visible on smaller screens.

Most Common Resolutions
As you can see from the following table of data from w3Schools.com, 800×600 resolutions are dying out (down to 8% Jan 2008) and 1024×765 and higher acccounts for 86%. This data is from w3schools own log files but it does tally with what I see in log files for sites I maintain, and most other studies I have seen.

Resolution is not browser window size
So now we have an idea of up to date resolutions, but the reality is a little different because people may not browse with their browser window maximised, or they may have various toolbars on the browser installed, or they may browse with things like ‘favourites’ opened, all of which reduce the actual size left for us to design within.

This leads me to two related articles:
Actual Browser Sizes – a study to discover the actual widths and heights of visitors browsers. he took took three months of data gathered from 5 different sites. Until someone like Google begins to gather this information using analytics or something similar this is the best data I have found on the subject.

The study concludes:

if you want to design for 95% of your visitors you need design for no more than 776×424px (fixed layout)

The second site is based on this study:
Size does matter – Actual numbers
And this article concludes:

if you optimize your design for a width of 770 pixels, you’ll be optimizing for 97% of the visitors.

Are the articles still relevant?
Both articles were written in 2006, however the resolution trends we saw above mean that these articles are still relevant, and to further back up these articles I installed FoldSpy on my site to get access to the data it had collected.

FoldSpy gives data on browser viewport sizes from 77,697,453 browser screens measured on 2,782 sites since July 2007. FoldSpy is not exact in explaining how it collects the data, or the nature of sites it collects data from, but as it broadly backs up the findings from the other articles, I think the figures are good guides (I did email FoldSpy to ask them for more details, but I haven’t heard back yet).

FoldSpy tells me that a site designed at 770×400 fixed width will be optimised for 93% of visitors.

My conclusions
I personally design quite a few sites at 770 pixels fixed width which work well and can use design elements to create the illusion of a wider site, but there is a trend toward designing wider sites which can’t be ignored.

If I am working on a site which I feel, or the client feels, needs a wider design I try to ensure that the essential content is contained within 770 pixels in the first columns, with a third or more columns to create width without losing effectiveness to visitors with smaller viewports.

If you have a different view, or some stats to back up or contrast with what’s in this post, please leave a comment!

This entry was posted on Tuesday, June 3rd, 2008 at 2:00 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.