Designing for a Variety of Displays

Contents:

Dealing with Unknown Monitor Resolutions
Fixed Versus Flexible Web Page Design
Designing "Above the Fold"
Monitor Color Issues
Alternative Displays

One of the most vexing aspects of web design is knowing that your page is at the mercy of the software and hardware configuration of each individual user. A page that looks great on your machine may look radically different, or perhaps even ghastly, when viewed on another user's setup. This is partly due to the browser's functionality (as discussed in "Designing for a Variety of Browsers") and the individual user's preferences (font size, colors, etc.), but the display device itself also plays a large part in the success of the page's design.

This chapter looks at the ways in which design decisions are influenced by the wide range of displays and viewing conditions. The variation in display is a function of the monitor's size (or, more accurately, its resolution), color capabilities, and user's personal preferences. However, it is important to keep in mind that the diversity does not end there. Some users may be watching your web page on TV. Still others may be viewing it in the palm of their hand on a PDA (personal digital assistant) or cell phone. Sight-impaired users may be listening to your page, not viewing it.

Dealing with Unknown Monitor Resolutions

Browser windows can be resized to any dimension, limited only by the maximum size of the monitor. Designing for an unknown amount of browser real estate is a challenge unique to web design and one that is particularly troublesome for designers who are accustomed to the printed page.

In discussion forums frequented by web design professionals, no topic is more often addressed (nor hotly debated) than the question of which monitor resolution to design for. As with most web design issues, there is no "right" way to design for the Web, and your decisions should always be guided by your knowledge of your target audience and the purpose of your site. Still, it is helpful to understand the environment and to know how others are maneuvering within it.

This section looks at the range of monitor resolutions and presents the current wisdom on making appropriate design decisions.

Standard Monitor Sizes and Resolutions

The first step in determining the likely size of your web page is to look at the maximum amount of space provided by the computer monitor. Computer monitors come in a variety of standard sizes, typically indicated in inches. Some typical monitor sizes are 15", 17", 19", 20", and 21".

The more meaningful measurement, however, is monitor resolution -- the total number of pixels available on the screen. The higher the resolution, the more detail can be rendered on the screen. When you know the available number of pixels, you can design your graphics (also measured in pixels) and page elements accordingly. Table 2-1 presents a list of some standard monitor resolutions supported by Windows and Macintosh platforms. This is not a complete listing, merely the most commonly occurring configurations.

Table 2-1. Common monitor resolutions for personal computers

Windows	Macintosh
640 800 1024 1280 1600	512 640 800 832 1024 1152 1280 1280 1600

Resolution is related to but not necessarily determined by monitor size. Depending on the video card driving it, a single monitor can display a number of different resolutions. For instance, a 17" monitor can display 640 pixels, 800 × 600 pixels, or even higher.

It is important to keep in mind that the higher the resolution on a given monitor, the more pixels are packed into the available screen space. The result is smaller pixels, which will make your images and page elements appear smaller as well. If you create graphics and pages on a monitor with a relatively high resolution, say 1280 be prepared for everything to look a lot bigger on standard 17" monitors running at 640

For this reason, web measurements are made in pixels, not inches. Something that appears to be an inch wide on your system may look smaller or larger to other users. When you design in pixels, you know how elements measure in proportion to each other "Web Design Principles for Print Designers" further discusses resolution as it applies to graphics.

"Live" Space in the Browser Window

Knowing the size of the monitor is just the beginning. The operating system and the browser itself occupy a fair amount of this space. The amount of space that is actually available within the browser window (referred to in this chapter as the browser window's "live" space) is dependent on the computer's operating system, the browser being used, and the individual user's preference settings.

Figure 2-1 measures the parts of the major browsers (menus, status bar, etc.) on both Windows and Macintosh platforms. Knowing these exact measurements may be useful when designing a pop-up window for which you can control the display of each part; you'll know just how large to size the window to fit your content. (The code for creating pop-up windows is provided in "Introduction to JavaScript".)

Knowing how much space the system and browsers take up should tell us how much space is left over for content. Table 2-2 lists the amount of live space that is available at standard monitor resolutions. Measurements were taken with the browser maximized to fill the monitor and with all possible browser tools such as buttons, location bars, and scrollbars visible (except for Navigator's "My Sidebar" and IE's Explorer panel). In a way, this can be considered a worst case scenario for available space (with the browser maximized).

Table 2-2. Minimum live space at various monitor resolutions

	Minimum Live Space
Browser	640	800	1024	1280
Windows
Internet Explorer 5+	620	780	1004	1260
Netscape 6	618	778	1002	1258
Netscape 4.7	620	780	1004	1260
Macintosh
Internet Explorer 5	591	751	975	1231
Internet Explorer 4.5	592	752	976	1232
Netscape 6	607	767	991	1247
Netscape 4.7	613	773	997	1253

Bear in mind that these are theoretical extremes, and actual browser window dimensions will vary. Users may have some of the buttons showing, but not all of them. Scrollbars turn on and off automatically, so they are difficult to anticipate. Users with high monitor resolutions (1024 pixels wide and higher) do not necessarily open their browser windows to fill the whole area, but may keep several narrow windows open at the same time.