Book HomeWeb Design in a NutshellSearch this book

Chapter 2. 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 Chapter 1, "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.

2.1. 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.

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.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.