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 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. Sightimpaired users may be listening to your page, not viewing it.
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.Below table 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: Common monitor resolutions for personal computers
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.
"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.
Below figure 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.
Figure: Browser and system measurements
Knowing how much space the system and browsers take up should tell us how much space is left over for content. Below table 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: Minimum live space at various monitor resolutions
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.