16 Chapter 2 – Designing for a Variety of DisplaysDealing with Unknown Monitor Resolutions
Web Design in a Nutshell, eMatter Edition“Live” Space in the Browser Window
Knowing the size of the monitor is just the beginning...theoperating 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.
Because so many factors are involved, determining exactly how much live space is
available for each monitor resolution is an inexact science.
The information provided in Tables 2-2 through 2-5, on the following pages,
should be used as general guidelines, not universal truths. Measurements were
taken with the browser maximized to fill the available space in the window. The
minimum live space is measured with all possible browser tools (such as buttons,
location bars, and scrollbars) visible. The maximum live space is measured with all
optional elements hidden, making the browser window as large as it can be for
each particular resolution.
Bear in mind that these are theoretical extremes, and actual browser window
dimensions will vary. People may have some of the buttons showing, but not all
of them. Scrollbars turn on and off automatically, so they are difficult to antici-
pate. Users with very 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. Along with these variables are a
host of unknowns that can affect browser window size.
The following tables show the minimum (when all browser menus, toolbars, and
scrollbars are turned on) and maximum (when they are turned off) live areas for
the browsers on both Windows 95 and Macintosh. Absolute pixel values for
different monitor resolutions are given. Live areas are shaded gray in the images.Monitor Color Issues
Monitors also differ in the number of colors they are able to display, if they display
colors at all. This is another aspect of the final display that may influence design
decisions. Monitors typically display either 24-bit (approximately 17 million
colors), 16-bit (approximately 65,000 colors), or 8-bit color (256 colors). Colors
taken from the “true” 24-bit color space will dither(display with a speckled
pattern) when rendered by browsers on 8-bit monitors.
However, there is a set of 216 colors, made up from the cross-section of the Mac
and Windows system palettes, that will not dither on Mac and Windows 8-bit
displays. This set of colors is known as the Web Palette, among other names.
Many designers choose to design web graphics and HTML elements using colors
from this palette so the pages look the same for all users. The Web Palette is
discussed thoroughly in Chapter 3, and Chapter 17,Designing Graphics with the
Web Palette.
If you are concerned about users with grayscale or black and white displays, be
sure to design high-contrast graphics. When colors are converted to grayscale
values (or dithered with black and white pixels), only the brightness of the colors
matters. Imagine setting purple text on a teal background; although the colors are