What is the best width for a fixed-width page layout and why?

Answer 1

There are two answers to this question, and both answers are based on the resolution that the page is viewed in. First, is the width (screen resolution) used by the people viewing the page in their Web Browsers. Second, is the width of paper used to print the web page. Since the pipe-dream of paperless communication has not been realized yet, both are important to consider.

I usually recommend using fluid web layouts, because they scale more easily, and they also allow users to re size their browser window regardless of their screen resolution. That being said, I fully realize that fixed-width layouts also have benefits.

The first consideration for a fixed-width layout, is the width of the user's screen. If you have collected these statistics from your current website visitors, then you should cater to your current visitor base. If you do not have this information, or this is your first website, then you will need to use some more general statistics. If you search the web you will find many different sites that have collected browser statistics. At the time of this writing, the vast majority claim that 1024x768 screen resolution has nearly a 50% majority, with a significant number using 800x600 resolution, and no users with lower resolutions than that (some reliable stats can be found at http://www.w3schools.com/browsers/browsers_display.asp). After we account for window borders, etc. a generally good fixed-width for a web page is somewhere less than 980 pixels for 1024x768 resolution, and less than 760 pixels for 800x600 resolution.

Printing is a slightly different story. Nearly all home and office printing is done on 8.5x11" paper (standard "letter" size). The maximum "safe" width to allow printing on 8.5x11" paper is 560 pixels. This means that you have three options: 1) you can assume that none of your site visitors will ever want to print your web pages, 2) you can restrict your site to 560 pixels wide or 3) you must create CSS definitions for both widths, and use the media="print" directive on your CSS tag (see http://www.w3.org/TR/html4/struct/links.html#edef-LINK). With this method, you can also hide certain elements, such as navigation trees or ad banners, to make the printed page less cluttered.

To summarize:

* write your page based on your visitors. * for 1024x768 resolution, use a width less than 980 pixels * for 800x600 resolution, use a width less than 760 pixels * for printing, use a width less than 560 pixels * to accommodate printing and a wider screen resolution, use the "media" attribute of the css tag