A Complete Guide to Web Design

Dealing with Unknown Monitor Resolutions 15

DisplaysA Variety of

Dealing with Unknown Monitor Resolutions

Web Design in a Nutshell, eMatter Edition

This section looks at the range of monitor resolutions and presents the current
wisdom on making appropriate design decisions. The design advice and “wisdom”
presented here has been culled from a number of popular web design mailing lists
over the course of nearly half a year.

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 moni-
tors come in a variety of standard sizes, typically indicated in inches. Some typical
monitor sizes are 13", 14", 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 Macintosh and PC platforms. This is not a complete listing, merely
the most commonly occurring configurations.

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 14" moni-
tors running at 640×480.

It is for this reason that web measurements are made in pixels, not inches. Some-
thing 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.

Table 2-1: Common Monitor Resolutions for Personal Computers

Macintosh PC

512 × 384

640 × 480

800 × 600 (common on Powerbooks)

832 × 624

1024 × 768

1152 × 870

1280 × 960

1280 × 1024

1600 × 1200

640 × 480

800 × 600 (common on laptops)

1024 × 870

1280 × 1024

1600 × 1200