How to Design Web Pages for WebTV

General Web design principles
Presenter: Marinela Miclea.

Printer Friendly Edited



If you don't have access to a WebTV receiver but wish to check for readability of your site for the WebTV audience, adjust your browser's settings to simulate the way a Web page will display on a TV screen:
  • Change your proportional typeface to a rounded sans-serif typeface (such as Arial or Helvetica)
  • Increase the typeface to 18 points


You will notice that these adjustments make a big difference in the way a Web page displays, especially if your design includes narrow columns or lots of wraps around graphics or fixed layouts (for example, with the <pre> tag or tables). In general, the WebTV screen display allows for 40-character lines or 20 lines per "screen-page."



Web design for TV audience



  • Screen dimensions


    • WebTV's default is 544 pixels wide by 378 pixels high, all of which is available for Web content display.
      • (Additional space is reserved for WebTV interface components: a top margin of 6 pixels; left and right margins of 8 pixels; and a bottom margin of 36 pixels.)

    • In comparison, Netscape Navigator's default is 490 by 337 pixels.



  • Colors


    • In general, darker-colored backgrounds display better. A charcoal background (hex value #191919) is a good color to use.
    • Full white or full red backgrounds cause screen distortion..
    • For white background,use linen, whitesmoke, or the hex color value #EFEFEF.
    • Use light-colored text against dark-colored backgrounds.



    • Graphics


      • Use small images for quick download times.
      • Avoid using images with many fine details.
      • Use HEIGHT and WIDTH attributes.
      • Avoid using thin graphics (for example, one-pixel lines, horizontal rules)
      • If horizontal rules or thin lines are necessary to your design, use anti-alias lines that are graphical in nature
      • Use client-side image maps instead of server-side image maps.
      • Avoid using narrow columns as images.
      • Use the <nobr> tag to prevent line breaks in a series of images or any other horizontal flow.
      • Avoid using too many form elements.
      • Avoid large animation files.



    • Audio


      • Avoid large audio files.



    • Text


      • Avoid using small text sizes.
      • Use the <nobr> tag to prevent line breaks in text or any other horizontal flow.
      • Don't use images with embedded text.
      • Keep Web page titles short.

A few more tips...



  • Put the most important information on the first visible screen of your Web page.
  • Eliminate scrolling as much as possible - keep the length of your Web pages down to 1-2 screen lengths.
  • Place larger images below the first visible screen so that your audience can start viewing the text while the image finishes loading.
  • If you have a set of related pages, reuse the same image to take advantage of automatic caching.
  • Try to reduce the number of items on your page.