A Complete Guide to Web Design

22 Chapter 2 – Designing for a Variety of Displays

Fixed versus Flexible Web Page Design

Web Design in a Nutshell, eMatter Edition

page design, but unfortunately, the background image remains in the same place

even when the table is allowed to reposition itself on the screen.

Another approach is to use a table or frameset that consists of a combination of

absolute and relative sized columns (or frames) measurements. In this way, when

the window is resized, one column or frame remains the same width while the rest

resizes and reflows to fill the new available space. These techniques are outlined

in Chapter 10 and Chapter 11.

Choosing a Page Size

Obviously, if you decide to design a fixed web page you need to make a decision

about which screen size you want it to fit. Design common sense dictates that the

page should be accessible (and display properly) to the greatest number of

people. The idea is to find the most common monitor resolution and design pages

that safely fill its live space.

640 ×480 versus 800× 600

Although finding the most common monitor resolution sounds fairly simple, there

is currently some controversy over which resolution is the most common. Over the

last few years, the most commonly sized PC monitor has increased from 14" to 17".

Some surveys show that the majority of users do have 17" monitors, which leads

some designers to strongly believe that it is perfectly “safe” to design web pages

that fill the 800×600 resolution live space.

Other designers disagree, maintaining that you should take into consideration the

millions of 640×480 monitors still in use (particularly by schools, households, or

other institutions without the budget to upgrade). Despite the fact that most

computers are shipped with 17" monitors, they still display 640×480 pixels by

default upon installation, and many users do not know that they can increase the

resolution.

The conventional wisdom

As of this writing, the majority of web designers advise that it is still safest to

design for 640×480 to prevent users from having to scroll horizontally to view a

wider design. Horizontal scrolling is detrimental to the ease of use of a page, so

designers draw the line conservatively to avoid it. According to the live space

charts above, that means making graphics and tables no wider than 600 pixels.

This has the added benefit of keeping text lines at comfortable lengths for reading

on the screen.

A growing number of designers declare 800×600 to be the “standard”; however,

they are still the minority. Very few design specifically for resolutions higher than

that. A few continue to design for display sizes smaller than 640×480.

Of course, your design decision should be guided by the audience for which you

are designing. For instance, if you are providing a site of resources for graphic

designers, you might reasonably expect that they will have 800×600 resolution

monitors and higher and design your pages accordingly. If you are designing a site