Chapter 2. Designing for a Variety of Displays

2.1.1. 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 480 800 600 1024 768 1280 1024 1600 1200	512 384 640 480 800 600 832 624 1024 768 1152 870 1280 960 1280 1024 1600 1200

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 480 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 1024, be prepared for everything to look a lot bigger on standard 17" monitors running at 640 480.

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. Chapter 3, "Web Design Principles for Print Designers" further discusses resolution as it applies to graphics.

2.1.2. "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 Chapter 28, "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 480	800 600	1024 768	1280 1024
Windows
Internet Explorer 5+	620 303	780 423	1004 591	1260 847
Netscape 6	618 301	778 421	1002 589	1258 845
Netscape 4.7	620 286	780 406	1004 574	1260 830
Macintosh
Internet Explorer 5	591 309	751 429	975 597	1231 853
Internet Explorer 4.5	592 316	752 436	976 604	1232 860
Netscape 6	607 322	767 442	991 610	1247 866
Netscape 4.7	613 307	773 427	997 595	1253 851

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.