Designing For WebTV - Part I  pwp home  >   Reference Library  >   Optimizing  >  Designing For WebTV Part 1

What is WebTV, and who cares?: Web TV is an Internet product combining a terminal with a remote control (or optional keyboard), hooked up to the consumer's TV set, with Internet access service, providing web access, newsgroups, and email.

To make web content look alright on low-resolution TV screens, developers came up with a new technology and some new HTML tags. This creates serious design considerations for those of us creating web sites. In Part I of this article, we look at the WebTV interface and how it impacts web page design, page layout issues and recommendations, as well as text, color, graphics and sound considerations.

In Part II, we will discuss critical issues around forms and other special features, loading time concerns and tips, and, most essentially, the WebTV-specific HTML: the new tags created for this new technology, and, alas, the familiar tags that are not supported and how to work around that. We'll show you a way to test your pages for how they would look on WebTV without having a terminal, and discuss how to decide how far to go in accommodating this new technology-and new audience.
 
The WebTV Interface: The Internet Terminal display, designed specifically for television sets, is much simplified from computer browsers. Viewers can see just the web page or bring up a Control Panel to perform tasks such as entering a web address or saving a web page to a list of Favorites. Viewers negotiate the web with a hand-held remote control that looks very much like a TV remote, creating navigation concerns for the site designer. Arrow buttons let viewers scroll through long pages or highlight links to other pages. Users can also call up an awkward 'keyboard' display to 'type' using the remote, or purchase an optional keyboard.

At the top of home screen, a Highlights rectangle provides links to mail, favorites, search, explore, etc. On the bottom, a Title Bar shows the name of page and an Options Panel allows users to find text, get information, go to another page, and save or send the page. All this takes room; although the screen measures 420x560 pixels, because of approximately 6 pixels of space on top, 8 on each side and 36 on bottom (for the options bar), the actual page display area is only 378x544. There is no horizontal scrolling possible, though you can scroll vertically.
 
The WebTV Audience: Aside from technical differences between the WebTV interface and a computer-based browser, the designer must consider that the audience viewing the content is probably very different, more used to TV viewing than computer surfing. Most television viewers are not used to waiting, not used to scrolling, not used to working for content, not used to interacting with their TVs. So, the suggestions here will take into account both the technological limitations and the potential audience.
 
Pare down your pages: Television audiences are not accustomed to scrolling, so they may miss information below the first screenful, so put the most important (or all) information on the first visible screen, on the first page. Slim the words down to the essentials; chunk your information so that it logically comes up a screenful at a time; use anchors placed toward the top on longer pages. Consider making pages only a screen or two long, with other information on separate pages, providing obvious navigational cues like Next, Previous, and Top buttons at the bottom of each screen.
Reduce the number of items (text chunks, graphics, etc.) on each page. Television audiences are used to looking at one focal point; place the most important item so that you draw the viewer's eyes to it.
Do not place links to downloadable software on WebTV pages. Think about it...<G>.
 
Explore the use of tables to keep text and images aligned. Center your titles, and make them short to fit in the favorites and recent lists.

Web TV doesn't support frames, but gives us the interesting <sidebar> tag which provides a section of screen on the left that doesn't scroll for controls, graphics, etc.
 
Text considerations: Font size and color can be set, though there is no font face tag. In addition, text can have special effects: relief, emboss, shadow, transparency. Font size attributes for the body text are small, medium, or large. It is best to use larger text sizes in text and graphics for readability. Also note that WebTV <H1> through <H6> tags are larger fonts than those for Netscape and Explorer. Avoid lighter weight type faces and tight kerning except in larger font sizes.
 
Color issues: Version 1.1 WebTV color names and RGB values are listed on a supporting page. These are the safe colors to use. But image color will not always show up as expected, especially saturated and high contrast color schemes. New for WebTV: image, text. and background colors can have a transparency value to allow content to show through (the default is 0).

TV color-safe guidelines apply here:

• Darker backgrounds, like charcoal (#191919), work better than lighter ones, for increased legibility and reduced ghosting.
• Higher contrast ratios between text and background are required for best text legibility. Best is very light-colored text against quite dark-colored backgrounds; television audiences find this easier to read.
• Don't use white; an off-white is O.K., like #EFEFEF. Lower the saturation on red and white by 10% (minimum).
• Avoid "color blindness" color pairs, especially in text areas and buttons; the offending combinations are red/green and blue/yellow.
• Dark, thin verticals will ghost on a white background.

 
Graphics considerations: Gifs (including transparency and animation) are supported, as are most jpegs. Make graphics as small as possible without fine detail or small text. Watch for distortion; a round circle on a computer screen is an ovaloid on TV. Make any horizontal lines thicker than usual; single pixel horizontal lines flicker on TV sets.
There is no "ALT" attribute for the WebTV <IMG> tag. But "Height" and "Width" attributes are included, and it is critical to set them for images. Some special animation features are available.
Since TV users aren't used to image maps, make it clear what it is and what to do. Client side image maps work better with a remote control than server side maps. Avoid large image maps; consider breaking maps apart into buttons, since WebTV provides a highlight "box" around buttons and while maps are usable, they are interpreted with a single highlight "box".
 
Multimedia: Providing background or theme music can create an experience more like television. The midi format is preferable, though some .wav and .au files are supported in version 1.1. While no embed tag is supported for multimedia elements, you can provide sound with the familiar <bgsound> tag. Interestingly, Shockwave is supported.
 
Check out Part II, to explore forms and WebTV, consider load-time issues, find out what they've done to HTML, and decide whether you want to bother with this or not.