Display Size and Resolution Accessibility

One of the more challenging aspects of designing web pages is taking into account a myriad of display sizes and resolutions. Display resolutions are measured in pixels.

Even so, the term “resolution” can refer to two very different measures:

1. The height and width dimensions of the entire display screen, in pixels. There are standard dimensions for computer displays, such as 800 x 600 resolution or 1280 x 1024 resolution.

2. PPI (pixels per inch, analogous to DPI/dots per inch for print media). We commonly use 72–100 PPI as the rule of thumb, but the true PPI measurement is determined by the interaction of the display property settings on the computer with the size of the monitor. This interaction means that PPI is not as straightforward as it might seem—certainly not a set measurement from system to system.

As an example, let’s assume that we have two different computer systems that are currently using identical monitors. One system displays 800 x 600 pixels on the monitor, while the other is set to a resolution twice as high, 1600 x 1200 pixels. Therefore:

1. The pixels must necessarily be smaller and more closely spaced on the higher resolution, 1600 x 1200 pixel system, since it displays twice as many pixels on the same monitor.

2. It follows, then, that a given web page and all of its components will look smaller on that higher-resolution system, because the pixels are smaller and packed in tighter. For example, since the pixels are smaller on the 1600 x 1200 resolution image, so too will be the text and images. Keep in mind that since the pixels are larger on the lower-resolution system, individual pixels are also going to be more obvious.

Now let’s look at a similar problem but from a different angle. Instead of changing the resolution between our two systems, let’s instead hold the resolution constant but change the monitor size. Let’s say that both of our systems are configured to display at the same width-by-height resolution (the actual pixel dimensions are irrelevant for this discussion). One of the systems uses a 19″ monitor, while the other uses a 15″ monitor. Since both systems display the same number of pixels, those pixels must necessarily be larger and spaced further apart on the larger monitor.

The upshot is that given the same width-by-height resolution, every element on the page appears larger on a larger monitor.

As we have seen, both the resolution settings on the system and the monitor size dictate how large given elements of a web page appear, and how much of the page actually fits on the screen. As width-by-height resolution increases, pixels get smaller, as do the all of the elements on the screen that are made up of those pixels. As monitor size increases, pixels get bigger, as do all of the elements on the screen.

And now, other figure illustrates how screen size and resolution interact, resulting in varying text and graphic sizes (demonstrated with relative, not absolute, element sizes).

Note again how the text and graphics look largest at low resolution on a large display, and smallest at high resolution on a small display.

To summarize the general interaction of resolution and monitor size:

1. Lower-resolution systems and/or larger display screens result in larger text and images. The disadvantage is that the pixels on the display can be blown up to the point where they become pixelated, that is, the individual pixels are large enough to be easily visible—an undesirable effect.

2. Higher-resolution systems and/or smaller display screens result in smaller text and images such that the elements can end up being too tiny to read easily.

As you can see, the 72–100 PPI mentioned earlier is little more than a rule of thumb, since the actual number of pixels in an inch on the screen depends upon the interaction of display resolution and monitor size. Again, a web inch is a relative inch, not an absolute inch.

Other factors also affect how many pixels display on a user’s screen:

1. Older systems or less expensive newer systems generally sport lower width-by-height resolution than newer (and more expensive) computers and monitors.

2. When computer systems arrive on their buyers’ doorsteps, most are “dialed down” a notch or two from the highest width-by-height resolution they are capable of displaying. That is, a system capable of displaying 1280 x 1024 may very well be set to only 1024 x 768 when the user receives it.

3. Many users, perhaps even most, don’t know that width-by-height resolution can be changed, much less know how to do it.

4. Visitors with vision impairment, age-related or otherwise, might deliberately turn down the resolution so that everything on the screen is larger and easier to see.

5. Many visitors rarely size their browser windows up large enough to fill the entire screen. Instead, they often have multiple programs open and partially visible all at once.

6. Laptop computers, not to mention web-enabled cell phones and PDAs, often support lower resolution than equivalent desktop computers.

7. Liquid crystal displays (LCDs), like those on laptops and fl at-panel computer displays, support only a single resolution well. That is, if the visitor changes the resolution to something other than the default, the display quality can degrade dramatically.

Last Words

Various web sites provide statistics on the popularity of the possible resolutions, some with stats for free, many for a fee. But be aware: These stats are gathered from web sites that may very well have completely different user demographics than the demographics for your site. Again, you must identify your audience and try to ascertain the type of computer systems they are most likely to have before you make resolution-dependent decisions.

Translations

French (Pompage.net)