Designing for Different Screen Resolutions

Even as a new designer and developer, you probably have your computer's display set to high color and resolution for reasons of aesthetics and screen real estate. But many users will view your pages on laptop computers or monitors set to 640 x 480 resolutions at 256 colors. As you develop your pages, they might look great on your screen, but have you seen it on a laptop purchased sometime in 1997? Probably not. But in many cases, you should. And that's why testing is so important.

Before you begin developing, determine what screen resolution you're designing for. The most popular resolution at the time of this writing is 800 x 600 dpi (dots per inch), with 1024 x 768 coming in second. Even though 640 x 480 is the third-most used resolution, you shouldn't dismiss it. Most computer novices never change their screen resolution, which are often set at 640 x 480 out of the box. Play it safe by making sure that at least your most important content is contained within the 640 x 480 pixel canvas, and then test your site design at the other resolutions.

The higher a monitor's resolution, the more pixels are available on screen. If you decide to design pages optimized for higher resolutions like 1024 x 768 or even 800 x 600, a visitor with 640 x 480 settings will probably need to scroll horizontally to access certain content. In an earlier lesson, we explored this in the context of "above the fold" design. Here, we'll take a look at every last pixel in a variety of browsers to help determine the best layout size for whatever project you might be working on.

The following tables show the maximum size of each browser canvas in pixels. The values assume the default toolbars and buttons are used for each browser, and the default offset for each browser is eliminated.

If you want everyone to see your content as intended for the resolution you choose, your canvas size can end up being rather small. For example, the safest choice to use for each resolution is a canvas size of 717 x 390 for an 800 x 600 resolution, 941 x 558 for a 1024 x 768 resolution, and 557 x 270 for 640 x 480 screens. These numbers take into account the browser chrome and the Microsoft Office shortcut bar that's displayed by default when you install the Office suite. Although many people disable this feature or don't even have Microsoft Office, it's one of the most widespread application suites out there, so you're probably better off assuming its presence. Better safe than sorry.