Designing for the TV Display

  • Article

Unless your application specifically does not support TV display (including Media Center Extender devices), keep in mind that the clarity and acceptable color range of standard definition TV can be substantially lower than those of a computer monitor. Remember also that televisions are designed to display full-motion moving images. Static images on a TV screen tend to look fuzzy, and flickering is more noticeable.

Designing a computer application for a TV display requires good judgment and some expertise. The following guidelines may be helpful:

  • Test your application on both TV and computer screens (either CRT or LCD for computer screens), and ensure that the graphics are of acceptable quality for both types of display.
  • Make your text and graphics large enough for the lower clarity and resolution of TV.
  • Do not rely on fixed widths, but make the size and position of graphics relative to the screen resolution. This is especially important when designing a user experience that needs to work on both 16:9 and 4:3 screens.
  • Try to lay out items in relation to each other and to the window rather than using exact coordinates. You may not have a perfect one-to-one mapping with the design, but rather than being committed to a few common aspect ratios, a design that uses relative and anchor points is flexible and accommodates every aspect ratio or scale.
  • Avoid using fine (one pixel) details that blur on a TV screen. Because of the limitations of interlaced scanning, all lines, borders, and text must be at least two pixels wide. One-pixel details blur and appear to vibrate when viewed on TV.
  • Bright colors tend to over-saturate on TV, bleeding across scan lines. Use a TV-safe palette.
  • Some older televisions cut off a certain amount of the video image, causing content in these areas to be unavailable for viewing. Traditional design for television interfaces defines an action-safe area (around 10% in from the edge of the video image) and a title-safe area (around 20% in from the edge of the video image areas). However, it is not necessary to allow for action-safe and title-safe screen areas in your design. The video drivers and features in Windows Media Center scale the image down to compensate for these overscan areas; therefore it is not necessary to compensate further. For more information, see Aspect Ratio, Output Resolution, and Scaling.

See Also