Browser Resolutions and Webpage Widths

Browsers February 09, 2009

With widescreen computers as popular as they are today, and with Firefox's usage now nearing 50% market share, I'm hoping that we're coming to a point where the web becomes a uniformly interpreted platform and is used for even more serious computing. I've already stopped pandering to people who don't move with the times. Many of my sites don't work in Internet Explorer and I put up a special disclaimer to those users instructing them to upgrade to Firefox, Safari, or even Chrome for that matter.

My sites of late have been growing in width. I was looking for statistics on the standard browser dimensions these days and found that it's relatively low - 1024x768, compared to the now outdated 800x600 from only a few years ago. This means that we essentially have another 224 pixels of width to our webpages that we can be designing for. That's actually a lot of space. Most sidebars on blogs are only about 180px in width and manage to include all sorts of auxiliary but useful information.

But the trick is *not* to make the width of your website the entire length of the browser. The trend these days (a trend I follow as well) is to design your site full width, but have the content at a fixed width and centered. That is, your webpage looks as though it's taking up the fullscreen, yet the content of interest only takes up say, 950px, leaving 74 pixels of padding on either side.

The CSS paradigm is as follows: all content divs consist of two: the outer and the inner. The outer div is 100% width, text-align center. The inner div is a fixed width with margin: 0 auto, so it floats in the middle. You see this all over the web now, for every section on a webpage: headers, content, footers, etc.

The NY Times, for one, a site super saturated in text and image content, is 972 px wide and floats in the browser's center. Yet they've managed to squeeze as many as FIVE columns of information in that space. My screen can handle the width being as much as 1224px (which I tried by altering the page's CSS using Firebug) yet at this width, the site becomes much more complex and unreadable. Surprisingly, by cramping the width down to 972 and leaving the extra white space on either side that most browsers are sure to display, the site design becomes a bit more acceptable. Your eyes can move back and forth from resting in the white space to delving into the complex columns of commentary in the center.

I'm frustrated by sites which have not adopted this new standard and am constantly annoyed when I visit sites with too much content for an 800px width or ones that have the content anchored to the left side of the browser, leaving the rest of the window barren and useless. So, make use of the space we have! Design for the majority, not everyone. If you try to design for everyone, you just end up making something that everyone's unhappy about.

Other Browsers Posts