This article focuses on overcoming some of the drawbacks of fixed-width designs. These are suggestions based on my experience rather than hard-and-fast rules. Feel free to critique my suggestions and propose improvements or additional guidelines.

Use a CSS reset stylesheet

Fixed-width design: A design in which the Web page elements maintain their size and position regardless of the browser window's width.Each browser has a default stylesheet that is used when no styles are defined, but the default is not the same for all browsers. A CSS reset stylesheet provides a consistent base style for all browsers, which is valuable for fixed-width designs, where layouts are dependent on pixel-perfect positioning. Eric Meyer has been working on this problem for years. Take a look at his most recent CSS reset file. Yahoo! also provides a CSS reset file as part of their UI library.

Select the design width based on your intended audience

For a fixed-width design, one of your most important decisions is selecting the design width. Your choice should work well for your targeted audience. Make it too narrow and much of the visitor's screen goes to waste; make it too wide and visitors will need to scroll horizontally (which people hate to do¹).

For almost all the sites I work on, my clients prefer not to exclude any significant chunk of the population. This results (today) in choosing an 760-pixel-wide design for an 800-pixel-wide screen. Once a Web site is in operation, you can use the server log files to validate your decision. For example, in the last five months 12.5% of all visitors to my Tiger Heron site used an 800x600 display—not a large number, but still significant. No one used a smaller screen size.

An alternative approach is to create more than one design and use Javascript to select the corresponding stylesheet based on the visitor's screen size. In practical terms, one 800- and one 1024-pixel-wide design is probably sufficient for almost every site. For screens larger than 1024 pixels wide, maximizing the browser window becomes a matter of preference rather than necessity, so the browser width won't always be the same as the screen width. Even if maximized on the largest of today's displays, a 1024-pixel-wide design does a good job of filling the screen.

Yahoo's 1024-pixel-wide Web site on a 1920x1600 display.

What about smaller displays, such as phones and PDA's? I don't have much experience with these, but my instincts say that creating an effective Web site for small displays involves more than just switching a stylesheet. Suggestions, anyone?

Select appropriate font sizes

Font sizes are a design choice. But here's a problem: in print, 12 point text is the same size everywhere. On the Web, the size of 12 point (or even 12-pixel) text depends on the pixel density of the display—the higher the density, the smaller the text. If you use a single stylesheet, your fonts need to be large enough to be readable on high-pixel-density displays, but not so large as to overwhelm a viewer on a low-pixel-density display. If you select your stylesheets based on the monitor's resolution, you can choose larger font sizes for monitors with higher resolution.

Select the line length

In print, the typical line length is 10 to 12 words. If that sounds like a small number, pick up some books and start counting—you might be surprised. At an average word length of five characters plus a space, this translates to 60 to 72 characters per line (CPL).

While the print world has a time-tested rule for line lengths, I'm not yet convinced that we have the answer for Web pages. In a study² about the effects of line lengths when reading from a computer display, researchers found that reading speeds increased with line lengths up to 95 CPL without affecting comprehension (about 16 words per line). Despite this, the study participants were split on which line length they preferred.

I checked a number of other sources for recommendations and the only conclusion I can draw is that a range of 60 to 95 CPL is probably fine. Much longer or shorter lines can be unpleasant, although I suspect you can go somewhat over 95 CPL when information density is critical and the typical visitor will read only a portion of the text.

Set the leading

Leading is the typesetter's term for the line-to-line spacing. Studies³ indicate that tight leading doesn't affect reading speed or comprehension, but people still find it uncomfortable. On sites where information density is of primary importance, you may opt to use tight leading. I've found a 1.2 to 1.4 range works well for comfortable reading.

Use an appropriate amount of white space

The usability studies I've seen have been contradictory on the topic of white space. For example, one study⁴ found that reducing white space also reduced the time it took for people to locate information on a Web site. A second study⁵, however, found that it also decreased comprehension. I suspect that the results in the first study, conducted in 2002, were due to the advantage of squeezing more information onto a small screen.

My advice on whether to increase or decrease white space depends on the amount of time a visitor is expected to spend on a page. Blogs should use white space to increase the readability and appeal of a page. A search results page, on the other hand, could sacrifice white space to increase the useful content on the screen.

Center the design

A left-aligned design from the CSS Zen Garden Web site I was a fan of left-aligned designs right up until I purchased my 24-inch 1920x1200 display. Now I'm a fan of centered designs. When I maximize the browser window, a left-aligned design puts the content uncomfortably on the left. I prefer to maximize the window to focus on a page without distractions. In the case of left-aligned designs,however, I can only center them if the window is not maximized, which reveals the background clutter.

Integrate the design with the background

A fixed-width design in a large or maximized window is going to have some unused area. This area is sometimes ignored, but it should be treated as part of the overall design. It can be left plain when appropriate to the site. I tend to spend more time on pages with visually exciting designs.

Two techniques that work well for me. Perhaps you have others?

Compose the design so that the page looks like a piece of paper on a desk. Shading or a complementary background pattern (or both) can improve the visual appearance.

A paper-on-desktop style design from the CSS Zen Garden Web site
Use design elements (e.g. banners, footers) that extend the full width of the browser window.

A WordPress fixed-width design with some stretchable elements (from TemplateMonster)

Keep the content area at least the full height of the screen

Fixed-width designs with little content tend to look weak and insubstantial (in slang, "lame"). If all site pages have a lot of content, then you don't need to do anything to overcome this problem.

Here's an example of a fixed width design (from my ISP's Web site, iinet.com). It looks OK in an 800x600 window:

Sample low-content site at 800x600

Maximized on my 1920x1200 display, it looks as though the designer left before completing the page.

The same site on a 1920x1200 display

The easiest solution is to create a content area with 100% height and fill it with a pattern or color. What I prefer to do, however, is to use some CSS magic to keep a footer at the lower part of the window or content bottom. SolarDreamStudios has a nice tutorial with samples. I've tested their technique on IE6, IE7, Firefox 2 and Opera 9. It works on all but Opera—on Opera it works sporadically (in my testing, it fails when the window is resized vertically, but fixes itself if you resize horizontally). An alternate approach is to use Javascript as described in this article on A List Apart.

Below, I've taken the same design and moved a few elements to the bottom. Although it still has the same content, the site looks much more substantial.

The previous design, stretched to fill the height

Avoid large expanses of undifferentiated text

Without contrast, long areas of text give the eye nothing to use as a reference point and prove unappealing to viewers. Print designers are familiar with this. On the Web, designers sometimes stop designing when the page template is complete; someone else takes care of providing content. Sites designed this way are sometimes easy to spot—they have a lovely layout wrapped around a mass of text.

One of the main advantages of a fixed-width design is the ability to fully lay out the page. We should take advantage of this opportunity.

References

Web Site Usability, A Designer's Guide, Jared M. Spool and Tara Scanlon
The Effects of Line Length on Reading Online News, A. Dawn Shaikh
Reading Online Text: A Comparison of Four White Space Layouts, Barbara Chaparro, J. Ryan Baker, A. Dawn Shaikh, Spring Hull and Laurie Brady
Web Site Usability, A Designer's Guide, Jared M. Spool and Tara Scanlon
The Effects of Line Length on Reading Online News, A. Dawn Shaikh

Recommendations for improving fixed-width designs