Bookmark and Share

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.)

resolution statisticsThe 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.

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.

Five Finger Coding

Related Posts

  • Fluid Responsive HTML/CSS In this modern era of technology, having a website to promote your business operations is a must. If you are into a business where you cannot accept anything below average then it is time for you t...
  • Old Web Browsers Because of how far certain Web technologies like HTML5 and CSS3 have brought us, many would say that—from a Web platform perspective—the future is now. Sounds like a cliché, I know. At the very lea...
  • Awesome Resources to Test Cross Browser Compatibility of Your Website When there are many browsers available for the users to surf the internet, it becomes evident for you to check the Cross Browser Compatibility of your website. Different people use different operat...
  • Designing for Mobile: Why Size Matters A great number of people are now using mobile devices to browse the internet. They do not like the idea of having to sit in front of a computer screen to check their favorite website. They want con...

Comment (1)

  1. Matt Smith says:

    I agree that 960px, or something close, does reach a sweet spot. Fixed width layouts are often the best way to dictate your design intend. Liquid layouts are cool, and sometime the right solution, but my clients are almost always fine with a fixed width layout.

    I appreciate the point you made about 960px being divisible so many common numbers, including 2 primes – 3 and 5. It’s common to have a 3 common layout, and very pleasing to the eye.

    Good post. I’ll be checking in with for more…

Leave a Reply

Current day month ye@r *