I get a good number of requests to redesign websites, or create new ones where the client wants it to be very wide. Sometimes this is so that they can display photographs at a larger size or perhaps they want several columns for their content but do not want them too narrow. Sometimes clients are looking at the web from a widescreen monitor and they are thinking about all that wasted space they see on their monitor. What might not occur to them though is that not everyone has a big wide screen.

As a web designer I always have to keep an eye on the trends, and the breakdown on monitior widths being used by web surfers. One solution to having the best of both worlds where you accommodate those on narrower screens as well as wider screens is to make your site flexible width. More on that later.

Screen Resolution by the Numbers

I have several online web statistic sites that I monitor to see what the trends are in monitor resolutions among other things, and one of the most useful and flexible is StatCounter Global Statistics. At left is a breakdown on the top six screen resolutions as of April 2011, worldwide and in the US alone. Although the numbers can vary from stat site to stat site, they do not vary by much and the general trends tend to track consistently.

Since a good percentage of people are still using screens with 1024 pixel widths, my recommendation at this time is to not go over 990 pixels in width for the main content area on static width sites. At 900 to 990 pixels wide, nothing will be cut off on a 1024 pixel monitor with the browser window maximized. Going wider than that means that those on a 1024 pixel wide monitor will have to scroll horizontally, and that results in a bad user experience.

Flexible Width Sites

Although a little trickier to do and do right, flexible width themes are a very attractive option for those wanting to accommodate wider screen resolutions and by setting a minimum width for the site at 900 to 990 pixels, you can also keep those on 1024 screen widths happy too. I typically like to shy away from flexible width themes for photographic sites since in general you end up relying on the browser to resize the images for the visitor's screen width or anytime the visitor resizes their browser window while viewing your site, and browser do a lousy job of resizing images. Quality will suffer. There are ways to maintain higher quality through the use of flash or javascript, but this comes with higher bandwidth usage which on image intensive sites might end up costing you more money.

The Bottom Line

You always have to keep your visitors in mind when making design decisions because after all, that is who the site is really for.