Is there a perfect web design width?
It’s hard for me to accept that visitors have the final say in how websites look. I like my designs to step into the world the way I envisioned them, but that’s just not possible on the web. People pop in with different sized monitors set to different color depths and resolutions using different browsers with different window sizes. There are way too many variables that web designers have no control over.
So I tend to stick with fixed-width layouts, a 960px web design width in particular. It reduces the effects of the visitor x-factor and it’s just about perfect for any website.
960px for the largest audience and the most flexibility
Below is a screenshot of the screen resolution statistics from W3Counter for September 2009. (Percentages were calculated from traffic to over 27,000 websites.)
The most popular screen resolution for the last several years has been 1024×768. And that’s been trailed by even larger resolutions. Granted, the numbers may change depending on the audience for a website. Sites dedicated to design, photography, or technology, for instance, will show a higher percentage of large screens. But, if you want a website to stay true to your vision for the largest number of visitors, then 1024×768 is the starting point.
From there, you have to take into account all the kooky things visitors can do with their browsers and what design options a particular size offers. This is where a 960px web design width shines.
- It leaves room for browser chrome and window resizing – The title bar, search box, scrollbars, menus, and toolbars all take up space within the 1024×768 viewing area. You also have to account for the fact that some visitors won’t have their browser windows maximized, so you may lose even more space. A 960px width allows you to pack in a lot of information and still leaves room for inconsistencies in window size.
- It’s evenly divided by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, and more – That leads to a staggering amount of grid options. Whether you’re into complex magazine-style layouts or just want a simple two-, three-, or four-column layout, a 960px width makes it easy to create a well-proportioned design.
What about 800×600 screen resolutions?
Some businesses and government agencies have been slow to upgrade from small displays and ancient browsers. If you’re sure the majority of your audience will sit in front of screens with an 800×600 resolution, then it’s a design limitation you have to live with.
If, however, you just want to accommodate every last visitor (I know the feeling), there’s a workaround. Create your design with a width of 960px, then position the navigation on the right side of the layout. Even though visitors with small screens will see a horizontal scrollbar, the full width of the content area should be visible on every page without scrolling. It’s a compromise, but that’s why I said a 960px width is just about perfect.
Get started with a little something from my toolbox
Below is a simple 1280×1024 grid that I use to start mockups in Photoshop (click the thumbnail for the full-sized version).
The grid includes the frames for two 960px width layouts, one centered (blue) and one left-aligned (green). Each of these is divided into thirds and quarters. All you need to do is drop the grid in a new PSD and drag a few guides directly over the frame you want.
As web designers, we don’t have the luxury of creating a pixel-perfect layout for every visitor. But a 960px web design width can go a long way toward putting control over finished sites back in our hands.
About Chet Garrison
Chet is a freelance graphic and web designer with a genuine passion for great design. When he’s not glued to his computer, you can find him in a catatonic state watching re-runs of Roseanne and eating Cheez-It’s.
4 Comments
I’m wary of using screen resolutions alone as a guide to how big a design the user’s browser can happily accommodate. The reason is that many people do not have their browsers maximised to full screen. (This is especially true with Mac users who, due to differences between Windows and Mac OSX, are more likely to browse using numerous, smaller browser windows).
A better metric, in my opinion, is to look at the user’s viewport size. This can be obtained with the analytic package Mint (by Shaun Inman). Combined with the screen resolution it gives you some strong insight into the way users view your pages. Taking screen resolution alone, for example, I would show up in your analytics as having a screen resolution about 2560 pixels wide (I have a whacking big monitor in my office). But of course I never use that width for a single browser window; I might have 8 different apps open in one screen and don’t want one app obscuring all the others. Consequently I have lots of smaller windows, sized appropriate to my workflow.
I wrote a blog post on this subject myself a few months back; if you’re interested it’s at http://www.sharkattack.co.uk/blog/view/the-myth-of-the-perfect-width-for-web-design/
(Yeah, shameless self promotion, but hey).
Rick — Nice tip about Mint analytics. The problem with the viewport strategy is you need traffic to analyze. Obviously you don’t have accurate stats with new websites and the numbers can change after a redesign (e.g. more/different visitors… at least that’s the goal). Screen resolution stats at least give you a maximum size to start with so you can work back from there.
In the article you linked to you offer fluid and elastic design as a solution, which might work in some cases. But I prefer not to tie layouts to the browser window, especially if they’re complex. The idea behind what I wrote is how do we get control when the finished product is out of our hands. I think a fixed-width does that.
I happened to notice your website has a min-width set at 960px. ;)
Hi Chet.
Yeah, fair point about new sites lacking useable metrics. In that case we have little to fall back on other than statistics for comparable sites aimed at the same audience. That last bit — same audience — is vital, and a big problem is those designers who check the visitor statistics provided by sites such as W3Schools — which are derived solely from that site’s traffic and are therefore skewed entirely toward a visitor base composed of wed designers — and consider them representative of the wider world.
You’re right about my site’s minimum width; in that case I looked long and hard at my own site traffic and determined that the screen res. and viewport data confirmed that 800×600 was dead as far as MY site was concerned.
Interestingly, the very few visitors that I got using that screen size were there by accident, as I could determine by delving into Google Analytics’ custom reports. Those people were looking for information about shark attacks; they were NOT looking for a designer. So I discounted them from the equation. Hence the 960 minimum.
To be clear, I’m definitely NOT saying that 960 is not a good width for a design; it’s a very good width much of the time. But whether it’s a good width for any particular site should be determined on a case-by-case basis, ideally by looking at the analytics data of the site in question or of a site catering to the same visitor base.
You make some excellent points though; if you have the time it would be really useful to have them submitted as comments on the article I reference above.
It looks like my brother already went by your site and left a comment that covered the bases. :)