Quick Reference

Graphic Design

Web Site Resolutions

With the flexibility available in programming HTML on the Web, designing pages in a fixed monitor resolution may seem impractical. Nevertheless, a number of reasons may motivate programmers to use a fixed screen resolution: emphasis of specific material, the easiness of programming in a fixed resolution, the desire to dictate how the Web page will appear. But every person viewing your site will have their own hardware, preferences and the like, so the most important factor to keep in mind is who the end users of their Web site will be.

Monitors and Resolutions

Virtually every monitor available today, regardless of size, allows the user to alter its resolution settings. The image seen on the computer screen is composed of thousands of pixels, each containing a small "piece" of the picture. The pixels are projected onto the monitor in horizontal lines that are then stacked vertically. As an example, a resolution of 640x480 is 640 pixels per line by 480 lines.

Generally speaking, the smaller the numbers are, the icons and text will be displayed larger (although Windows users can increase the text and icon display size through the "Settings-Display" menu). As the resolution numbers increase, type and icons will appear smaller, but sharper and with more detail. Larger resolution sizes also offer more desktop space.

To simplify, viewing a fixed Web site through a smaller resolution monitor would be like looking at a painting through a window smaller than the painting. You can still see part of the painting, but you have to adjust your view to see all of it. With larger resolutions, the "window" becomes larger, and you can see more, if not all of the painting.

As only 7% of Internet users are viewing the Web at 640x480, the current standard for fixed Web pages is 800x600. Monitors with higher resolutions (1600x1400, 1280x1024) will display a standard Web page as effectively as one at 800x600, but the page will appear smaller and more finely detailed. So 93% of Web surfers should be able to view a standard page in full without having to scroll horizontally.

However, even with a monitor set in 800x600 or higher, there are still several variables that can affect a site's appearance. Newer versions of both Netscape and Internet Explorer have quick buttons for searches, e-mail or e-commerce that border a site's content. Status bars for download times and site ratings can also occupy valuable space. This can alter the pixel size that will be utilized in displaying the page. Consequently, a monitor set at 800x600 may only devote 770x430 to displaying a Web site.

All of this makes it extremely important to consider the demographic that will be viewing your site. Will they be technically savvy and more likely to have high-end resolution monitors? Will they be likely to have a media player open to play MP3s or music CDs and thus decrease the desktop size of the browser and with it the Web page size?

Alternatives to FIxed Resolution

Obviously a fixed resolution Web site would not be appropriate in all circumstances. Several other options can make your site just as effective for each particular user while still conveying the intended message. Relative positioning is just one of this options.

In fixed resolution sites, the content is fixed to the page like a newspaper layout, and its appearance will not be altered based on monitor resolution. But by using relative positioning, the content can stretch or shrink to fill several diverse resolution settings. Positioning can be used to emphasize material in the center of the page, or in the side columns. Generally, more important should be placed in the lefthand column. When a site opens, it is automatically scrolled to the far left. Placing information here will ensure that it is the first thing a visitor sees.

Fully flexible pages stretch or shrink completely to best fill the user's browser. While this offers the most fluid page, this can sometimes stretch type out to over 400 pixels across, which can adversely affect readability. As a result, content rich Web sites are rarely fully flexible.

A final solution yet is to create multiple versions of your Web site, each in a different resolution. You could then determine the user's monitor resolution and automatically redirect them to the appropriate version using JavaScript. This disadvantage, of course, is the time, cost and complexity involved in creating multiple versions of a site.

Though technological innovations in Web page programming may allow a wide range of options, the best method is to first research the users of your site. All development decisions should be driven by their preferences. This will most effectively convey the intended message.