WebTV Design Tips & Information
Unsupported Tags
TV-specific Issues
WebTV-specific Issues
Remember, the television audience is different from a computer-savvy
audience. Ask yourself these questions when designing each page:
- Can this be re-worded to be shorter?
- Are there words that can be moved to another screen?
- Are there form elements that can be eliminated or moved to another screen?
- Are there images that can be eliminated or split up?
- Would it better suit the audience to move some info to its own screen?
Some simple hints:
- Broadcast design uses TV title safe space to guarantee visibility of images. This equates to 544x384 pixels at 72dpi as "live" area. This already takes into account the WebTV title bar.
- Full red and full white both cause distortion on NTSC televisions.
- Prefer light-colored text against dark-colored backgrounds; television audiences find it easier to read for extended periods of time.
- Use client side image maps instead of server side image maps; this works better with a remote control.
- Use the <nobr> </nobr> tags to prevent line breaks in text, a series of images, or any other horizontal flow.
- Avoid small text sizes in HTML and graphics.
- Avoid narrow columns; images are scaled and text will wrap frequently.
- Don't assume that all HTML interpreters fit the same amount of text into a given space. If you haven't yet purchased a WebTV Inernet terminal, you can determine whether you have included hardcoded dependencies in your layout by increasing the default point size of the browser fonts to 18 points, narrowing the window a little, and observing your page.
- Put the most important information on the first visible screenfull. Viewers prefer to not scroll.
- When using an input image in a form to simulate a button, use the <input nocursor> tag to prevent having to click on the button twice to submit the form.
- Use background music or theme music to provide an experience more like television.
Unsupported Tags
As for a quick list of unsupported HTML tags, here's the intended list for our forthcoming 1.1 release, though it may end up slightly different. Note especially that our support for frames is in flux.
HTML Committee
<APPLET>
<a TITLE REL REV URN>
<DFN>
<dl COMPACT>
<form ENCTYPE>
<FRAME>
<FRAMESET>
<img ALT LOWSRC>
<meta NAME>
<NEXTID>
<ol COMPACT>
<PARAM>
<pre WIDTH>
<SCRIPT>
<STYLE>
<table HEIGHT>
<td NOWRAP>
<ul COMPACT>
<textarea WRAP>
Netscape
<BLINK>
<body ALINK>
<EMBED>
<isindex PROMPT>
<li VALUE>
<SERVER PUSH>
<WBR>
Internet Explorer
<font FACE>
<img DYNSRC LOOP>
<PLAINTEXT>
TV-specific Issues
- TV colorsafe issues apply
- Lower the saturation on red and white by 10% (minimum)
- Dark, thin verticals will ghost (left side) on a white background
- TV titlesafe isn't necessary
- Darker backgrounds work better than lighter ones
- Increased legibility
- Reduced ghosting
- Higher contrast ratios are required for best text legibility
- Avoid predominate "color blindness" color pairs
- Over 2 million Americans are color blind to some degree
- This is especially important for text areas and buttons
- Offending comnbinations: red/green and blue/yellow
- Eschew small text in graphics
- A perfectly round circle on a Mac or Windows screen is an ovaloid on TV
- Avoid lighter type faces except in larger font sizes (in graphics)
- Avoid tight kerning except with larger font sizes (in graphics)
WebTV-specific Issues
- A "page" = [TVScreen - WebTVBottomBar] = 560 x 384 pixels
- We scroll vertically but not horizontally
- We scrunch widths as required
- This affects graphics resizing
- This affects columnar width
- Break apart image maps into buttons
- We provide a highlight "box" around buttons
- Maps are usable but interpreted with a single highlight "box"
- Denote image maps as such when possible
- Use WebTV <nobr> tag for groupings that must remain on the same line
- We don't support HTML "frames"
- Use WebTV <sidebar> tag instead of HTML "frames"
- We implement many interesting HTML extensions
- We don't implement full HTML 3.2 and many extensions
- WebTV <h1> .. <h6> tags are larger fonts than those for Netscape and Explorer
- Two columns of side-by-side text reads easier than three or more columns
- "Page down" feature is determined by the last visible item on a screenful
- Refer to WebTV WebTV HTML Guide for a more complete understanding
