Introduction

Screen resolution refers to the horizontal and vertical size of your monitor's display area, measured in pixels. Popular screen resolutions are 640x480, 800x600 or 1024x768, with the horizontal (x-axis) value given first, followed by the vertical (y-axis) value second. Screen resolution affects the appearance of your web site on the end-user's monitor, and it is almost impossible to program your site to adjust to various screen resolutions.

If your site is designed for a screen resolution of 1024x768 and the visitor is using 800x600, then some cropping of your site will occur. Likewise a higher resolution will result in empty space around the contents of your site, not an ideal aesthetic option either.

What resolution should I design for?

800x600 is accepted as the most popular screen resolution these days, and would logically be the resolution of choice for your site. In fact 800x600 is the default screen resolution for Windows and is generally not altered by PC users, some may argue that many PC users are unwilling or even unable to change their screen resolution. Large-scale studies have shown that approximately 50% of web users use 800x600 resolution, while 25% use the higher 1024x768 resolution. 640x480, traditionally thought of as the default video option, is in decline.

Although 1024x768 is still only at 25% approximately, it is on the rise. This is mostly at the cost of 640x480, although 800x600 is also declining. This site was designed for 1024x768 initially, with a lower resolution 800x600 version coming afterward. This is mainly down to the benefits of design at higher resolutions, mainly being the increased display area. With this resolution on the increase, the site is catering for the future as well as the present.

800x600 cannot be ignored, however, and it is possible that this resolution will remain the most common choice for web users for the foreseeable future.

Suggested Solution

Using a little JavaScript magic it is possible to determine what screen resolution you site visitor is using. You may then send them to the relevant version of your site, for example for this site I produced two versions; 800x600 and 1024x768. If the visitor does not use either resolution, you may offer them links to both versions and let them choose manually which one they would prefer, or recommend to the visitor that they should change their screen resolution. Unfortunately many computer users are not amenable to changing their screen resolution, as it will affect all of their applications. However, if they proceed to your site while using an incorrect resolution and your site does not look to hot, at least the visitor has been warned!

Combined with colour and brightness settings, it is impossible to determine what kind of monitor that your site will be displayed on; there are just too many variables. By producing a 1024x768 and 800x600 version you will cover 75% of the Net population approximately, but these figures are forever changing. It is important to note that you should produce the 1024x768 version first, as graphics are easier to reduce in size rather than enlarge. Try to keep abreast of such trends and don't forget to collect and rely on your own site visitor's screen resolution statistics, these will prove invaluable.

Amendment:

Check articles on 'Scalable Web Design' for more up to date information on screen resolution and how it affects web design! John, 21 Dec 2001.

---

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2001, but is left here for archival purposes.