960 Grid System
When developing a Web site I always look at site analytics to ascertain more information about the audience. One important metric is display resolution.
Nowadays most people have a resolution of 1024×768 pixels or higher. According to W3Counter’s Global Stats for October 2008, only 5.61% of people have a resolution of 800×600. In my personal experience the number of people at that resolution or lower is less than 10%.
While that is encouraging, keep your audience in mind. If you have 10 million visitors a day, that could mean 500,000 of them can not properly view your site if you only design for 1024×768 and above.
If you do intend to develop for a higher resolution I would recommend a width of 960 pixels. When developing at that size you can easily work with a grid system that is easily divisible by 2, 3, 4, 5, 6, 8, 10, 12, 16 and beyond.
I usually find myself designing with a 12 or 16 column grid. In an effort to support the 960 pixel grid, the fabulous Nathan Smith has a site with code examples, a CSS framework, and templates for many major programs like Adobe Photoshop. I subscribe to the philosophy of the 960 Grid System, and so do others.
YouTube just relaunched their pages, saying “We’re expanding the width of the page to 960 pixels to better reflect the quality of the videos you create and the screens that you use to watch them. This new, wider player is in a widescreen aspect ratio which we hope will provide you with a cleaner, more powerful viewing experience.”
On occasion, designing a site for 800×600 is necessary. If you still find the need to develop for a lower resolution I would recommend a width of no more than 770 pixels. When you account for browser chrome, scroll bars and the differences between browsers this is by far the most recommended width. At 800×600 you can generally expect the page fold to occur at 430-450 pixels.
While it’s easy to say that people should upgrade their browser or adjust their screen resolution, as designers and developers we should accommodate the user and not ask them to jump through hoops to see the site. In some cases you might find yourself sniffing for the browser resolution and serving an appropriate style sheet, much like MSNBC.com.
Whatever the case, I recommend collecting as much information about your audience as possible. Think beyond the Web as well. Will your corporate client be surfing the site internally on Internet Explorer 6.0? Does the CEO have an antiquated computer he or she loves and only surfs at 800×600? Know your audience, know your stakeholders and know the data.
