Designing for Different Resolutions:
So you've designed a startling site. It looks great on your computer, and you're bucking convention by putting the navigation bar on the right side. But if you don't pay attention to monitor resolution , some of your audience may never see that navbar and won't get past the first page.

Since I work full time on the computer, I prefer to use a Macintosh with a large screen and good color resolution. But many people are surfing the Web with an old PC and a smaller screen. What they see is dramatically different from what I see, so I must account for those differences in everything I create.

When I designed for print, I would work painstakingly to ensure the result would be exactly what I'd intended. Sometimes I'd even be at the printing plant as the final product came off the press. When designing for the Web, however, we don't have that kind of control over what the audience sees.

See, monitors vary in image quality and resolution. (This is not to be confused with monitor size — 15-inch, 17-inch, etc. — which all can be set to different resolutions.) The size they display is measured in pixels .

Fortunately, there are some standard dimensions, the most common being 640 by 480, 800 by 600, and 1,024 by 768. But some monitors are larger or smaller than these and even of different proportions, like 640 by 400. There's no way to allow for every obscure monitor size, but it's important to recognize what the vast majority of users have.

In the early days of Web design, we assumed 640 by 480 to be a good foundation for design. A 600-pixel width has since become a standard for fixed layouts. The difference between 640 and 600 is accounted for by browser chrome, which is the browser itself: scroll bars, buttons, margins.

Most laptops and low-end desktops available back then used this size, but even that was pushing the limit, since the browser windows at the time opened by default to a 520-pixel width. Slowly, though, display widths are growing, and nowadays most users have 800-by-600 or larger displays.
Designers have been itching to design for a larger width, but let's not jump the gun.
According to some studies (like the GVU's Tenth WWW User Survey and Web Snapshot), 11 to 14 percent of the current Web audience still sees nothing larger than what fits within a 640-by-480 display. These surveys use a good sample of Web users, but are limited by the respondents' knowledge.

A large percentage of participants didn't know their resolution and answered "don't know" or "other," so these numbers may, in fact, be higher. And just because some users have extra-wide monitors doesn't mean they'll maximize the browser to the full size.

Just as some people are reluctant to upgrade to the latest browsers, many are hesitant to improve their monitors. A new one can cost anywhere from US$200 on up and takes some effort to install. Yes, some users are migrating to larger displays, but at a rate hardly faster than continental drift. When do you expect to upgrade from your current 1024x768 display?

(I just used JavaScript to figure out your resolution, and you can use this trick if you want to create several different versions of your site, redirecting each visitor to the appropriate page — assuming you have the time and fortitude. The JavaScript Source has scripts similar to this.)

The bottom line is that you always need to check how your page will look at various dimensions. This is just as important as looking at your site with different browsers and operating systems. You can achieve this if your monitor can switch to different resolutions — just change it to 640 by 480.

There also are shareware programs (for Windows or Macintosh) that mark the boundaries of any page size you choose without changing your resolution.