Complex Web sites frequently look best on high-resolution screens that display the finer points of graphics and text. Accordingly, the resolution of a television when used as the WebTV display is a common developer concern. To address this, it is important to clearly define the term "resolution":

• Resolution is frequently used to describe the overall size of a screen measured in pixels. WebTV® systems use a 544 x 372 pixel screen size.
• Resolution can also refer to the "sharpness or clarity of a screen." Television screens are not nearly as crisp as computer monitors.

This article will clarify the meaning of each definition of "resolution" as well as its significance for Web design.

Resolution as Screen Size

Computer monitors and television screens both rely on the same cathode ray tube (CRT) technology first developed over a century ago. The inside of a television or computer screen is lined with light-emitting phosphors. These phosphors are grouped in threes, with a red, green, and blue phosphors all next to each other.

When hit from behind by a trio of electron beams, these phosphors will all glow at different intensities, producing millions of different colors. By traveling left to right across the screen in a series of thin rows (called "scan lines"), the electron beams can create a convincing image. For a far more detailed explanation, consult this excellent tutorial.

Each group of three phosphors is called a pixel, or a dot. If you have a magnifying glass or exceptionally good eyes, you may be able to differentiate each individual phosphor simply by scrutinizing your computer screen. The number of dots horizontally across the screen will determine the maximum resolution that the CRT can display. To properly display 1600 by 1200 resolution, a monitor must have at least 1600 pixels horizontally and at least 1200 scan lines.

This brings us to televisions. Television signals, by convention, contain information for 525 scan lines. Even if a television set were capable of displaying more lines, there wouldn't be any information to put in them! Thus, the screen resolution that you see on your television today was determined more by the FCC than by Sony or WebTV Networks. While the display dimensions on a computer screen are limited only by the hardware circuitry, analog television screens are limited by the signal they receive.

The Vertical Blanking Interval

Even though there are 525 scan lines in a television frame, not all of those lines are visible. The electron beam that travels left to right all the way down the screen must have time to return to the top of the screen after drawing each field. The time allocated to travel from the bottom to the top of the screen is called the vertical blanking interval (VBI), and is equivalent to the time required to draw 42 lines.

Of course, the television broadcaster does not stop transmission while the electron beam travels back to the top of the screen. This means that the television signal sent for the top 42 lines of each television frame cannot carry information to be used for the picture. This leaves 483 (525 minus 42) visible lines of vertical resolution. Since TVs (like computer monitors) are wider than they are high, this yields roughly 640 pixels of horizontal resolution, or a 640 x 480 screen resolution.

Overscanning

All television circuitry and screens are different, meaning that the outer 10-20% of a television image is frequently lost; this is referred to as "overscanning." Broadcasters know this, and shoot their programs expecting to lose the information on the outer boundaries of the screen. However, Web authors expect all of their content to be displayed, so WebTV uses a 560 x 420 resolution that reliably displays whole pages in spite of television overscan.

Of this screen size, 16 pixels horizontally and 48 pixels vertically are reserved for the WebTV interface. This means that a total area of 544 x 372 pixels is left for each screen displaying Web pages. When being used to watch TV, WebTV displays at the full 640 x 480 resolution.

Resolution as "Sharpness"

While that figure of 544 x 372 gives a rough sketch of the size of the television display while viewing Web pages through WebTV, it does not accurately reflect the true number of discernable pixels. Why? Because of interlacing.

Interlacing

Images taken by television cameras are broken into 30 frames for each second of action. If your television redrew the screen only thirty times a second, however, the image would seem to flicker as your eye would "forget" an image before a new one was drawn. One solution would be to simply make the camera take 60 pictures per second rather than 30, but this would double the amount of bandwidth required to carry the television signal. "Interlacing" solves the problem of flickering without increasing the bandwidth of the signal.

In order to "interlace" the television picture, the electron beams draw all of the odd numbered lines of a frame first, then goes back and draws the even numbered lines. This doubles the "refresh rate" to 60 times a second, which is fast enough to eliminate flicker and does not require a higher bandwidth signal.

A disadvantage of interlacing is the blurring effect it has on resolution - reducing perceived vertical screen resolution by 30%. This means that, while a television may have roughly a 560 x 420 size, the number of distinct discernable pixels may be only 70% of that.

DPI

Like computer monitors, television screens can be measured in terms of "dots per inch" (dpi), but since screen resolution is fixed, that dpi will decrease as the television set grows larger. Given the roughly 560 pixel length of the television screen, a television screen 8 inches wide would have a screen resolution of  560/8 = 70 dpi. Most people have larger screens at home, perhaps 27 inches diagonally. A screen of that size would have a dpi of about 26. For comparison, a 15 inch 640 x 480 VGA computer monitor displays about 50 dpi.

Design For Television

What does all this mean for creating a clean, effective, cross-platform site? First, resist using graphics and layouts that require wide screens to display properly. The WebTV browser will compress graphics and tables to help Web pages fit into a 544 pixel space, but overly large and complex layouts can be broken in this process.

Designing for a 544 pixel fixed-width isn't necessarily a good idea either. The European PAL television standard is 768 pixels wide; its wide-screen PAL counterpart is even wider; and even in the U.S., the HDTV standard will be radically different from current American NTSC (National Television System Committee) specifications.

A good general rule is to choose a layout that doesn't rely on fixed widths, but rather arranges itself as a percentage of the screen. Combined with generous amounts of "white space," this technique allows your site to take advantage of larger displays without compromising itself on smaller ones.

Last, be aware that the relative "blurriness" of the TV screen (compared to a computer monitor) will wash out the finer detail in graphics. Avoid embedding critical information, such as links or navigational elements, in small images.

As browser platforms move farther and farther away from the desktop computer - to televisions, mini-laptops, PDAs, and even specialized telephones - true cross-platform design becomes crucial. Yes, the resolution of a TV screen is different from that of a computer, but by following general rules of good Web design, your site can be effective on all platforms.