Determining a standard screen resolution for your application

If you're trying to decide whether to use a screen resolution higher than 800x600, there are many factors -- such as the preferences of your target audience -- to consider before making that move.

When I first ventured into Web development, it was an accepted practice to build applications using a 640x480 screen resolution. The accepted standard these days is 800x600, but there are rumblings within the development community to push to a higher resolution. While using a new standard may be acceptable, there are many factors to consider before making that move.

All about resolution

A quick review of the details of screen resolution may be in order. The term resolution refers to the sharpness and clarity of an image. It is often used when describing printer and monitor output quality. The screen resolution of a monitor signals the number of dots (or pixels) on the screen.

The 800x600 screen resolution means it will display 800 distinct dots on each of the 600 lines. The net result is 480,000 pixels. The end result on your display will depend upon the screen sizes, which have different dpi (dots per inch) settings. Now let's turn our attention to choosing a target resolution for a Web application.

What looks best?

As a rule of thumb, developers should never be used as a measuring stick for setting any type of equipment standards for Web applications. This is due to the fact that we normally have above-average machines, as well as technical know-how (when using a Web application), and screens can vary from multiple units to wonderful flat screens. In addition, my co-workers use high resolutions on their monitors with 1024x768 being the most popular.

Most users generally use a lower resolution. Many developers point to lower monitor prices and widespread flat panel usage as signs of higher resolution being acceptable. As a matter of fact, many users are unaware of the steps involved with changing their resolution from its default setting. For this reason, the industry default of 800x600 is often used. This is still a good rule of thumb for public sites.

Resolution does not equal size

A common mistake when evaluating screen resolution is equating it with actual browser size or viewable area. I use 1024x768 resolution on my machine, but I often have numerous browser windows open that are considerably less (in height and width) than the actual screen size. You can't assume users will view your site in a maximised browser window.

Site location

The decision on choosing a target screen resolution for a Web application can depend on the location of your target users. You have more flexibility when building intranet applications where the user community is (presumably) controlled. With these applications, you can set an internal resolution standard for the application and develop with it in mind.

When dealing with the Internet and the unknown public, more restraints are placed on the design. This is nothing new, as other factors such as the user's browser follow this line of thinking. You may utilise Internet statistics to demonstrate what is prevalent within the target user community.

It is best to gather stats on your target audience particularly before you start to work on making changes to an existing site. With this knowledge in hand, you can adjust your design accordingly. Knowing your target users is imperative, and this may include those users with accessibility issues.

Accessibility

Users with disabilities or accessibility issues may use your Web application with older equipment, larger or even smaller screens, screen readers, and so forth. This may be more of an issue with public sites. The best way to address this user group is with thorough testing. You should test with different screen resolutions, as well as resize the application window to less than maximum. Screen-Resolution.com is a good site for testing various resolutions.

The key is to watch for scenarios where horizontal scrolling may be necessary since it can cause problems. This article is in no way exhaustive on the accessibility issue; you should refer to the W3C Web Accessibility Initiative for more information.

Proper design

If you take advantage of Web standards like HTML and CSS, it can result in your site being usable regardless of the resolution. In addition, you could hack a design by using JavaScript to determine a visitor's resolution and present the site depending on the settings. The JavaScript screen object -- automatically created by the JavaScript runtime engine -- returns information on the display screen's dimensions and colour depth. It has the following properties:

• availHeight: It returns the screen height in pixels, minus any permanent or semi-permanent components of the operating system's interface.
• availWidth: It returns the width of the screen in pixels, minus any permanent or semi-permanent components of the operating system's interface.
• colorDepth: If a colour palette is in use, this property returns its bit depth. If not, the value reflects the screen.pixelDepth property.
• height: Returns the height of the display screen.
• pixelDepth: Returns the screen resolution (bits per pixel) of the display screen.
• width: Returns the width of the display screen.

The following script uses the screen object to determine what page to load:

<SCRIPT language="JavaScript">
<!--
if ((screen.width >= 1024) && (screen.height >= 768)) {
window.location="high_resolution_version.html";
} else {
window.location="low_resolution_version.html";
}
//-->
</SCRIPT>

Making a choice

Many Web developers and designers question using the 800x600 screen resolution; they want to move to a higher resolution, but this may not be acceptable. It depends on the preferences of your target audience. On the other hand, you may design a site using accepted Web standards that works as designed regardless of the resolution.