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.
by Chet Garrison
