Web page design challenges

The Web is different than any other medium because the end product is determined by the user, not the producer. This provides the user with a lot of options -- particularly when it comes to browser settings and content display -- but it also throws a couple of curve balls at the designer. As you're developing your site, consider the following factors.

Monitor resolution

Monitor resolution and monitor size are separate things. Size is measured in inches and is determined by the diagonal width of your screen (example: You have a 15-inch monitor). It can't be changed.

Monitor resolution, however, can be easily manipulated. Resolution is a measurement system used by your computer's operating system. It's defined in pixels and affects the height and width of the digital elements displayed on your screen. Resolution works inversely. The lower the resolution, the bigger the objects.

Five years ago most Web sites were designed for resolutions of 640 pixels wide by 480 pixels high (640x480). As monitor hardware has improved, the resolution standard has increased. These days, most Web users have their monitor set at 800x600 or 1024x768. Higher resolutions have been consistently adopted over the years, but it's always best to play it safe by designing for the widest possible audience. This being the case, 800x600 is your best bet for the time being. You can keep an eye on the current resolution trends by checking out the latest resolution statistics.

Browser windows

Resolution measurements are helpful, but they can be misleading because they apply to the entire screen. They don't take into account Web users who surf with smaller browser windows.

There are two ways you can deal with this problem:

1. Design at 800x600: By doing this you'll be using a width and height that people have accepted. Chances are, they've already adjusted their browser windows to incorporate sites built on this model.
   
   
2. Build liquid pages: This technique -- also referred to as "stretchy pages" -- defines the width of your Web pages through percentages instead of pixels. As users maximize or minimize their browser window, your page will expand or contract to accommodate the size. For an example, visit Camworld and experiment with various browser widths. If you're interested in implementing liquid pages, check out this tutorial from onlinetools.org.

Related links

Name	Type	Notes
Resolution Statistics	Resource	Browser News offers up-to-date estimates of monitor resolution statistics. These numbers aren't exact, but they provide a good sense of current trends.
Browser Statistics	Resource	Browser News keeps track of the latest usages estimates for browser brands and versions.
The Myth of 800x600	Article	Web Review outlines alternatives to fixed-pixel design.
Sizing Up the Browsers	Article	Webmonkey tests the height and width of various browsers at different resolutions.
Got a recommendation? Send it to: editor@theindependentpublisher.com.