How to Design Web Pages for WebTV
Presented in November 1997 – STC Region 8 Conference (Santa Barbara, California)
Contents:
- Introduction
- Overview of WebTV and the TV Internet Market
- Demo of WebTV
- Web Design for TV
Browsers
- General Web design principles
- TV vs. PC audience
- Web design for TV audience
- WebTV resources
- Review of Web sites - Overhead Slides
- About the Presenters
Introduction
Presenter: Robert Laws
Overview of WebTV and the TV Internet Market
Presenter: Robert Laws
Demo of WebTV
Presenters: Cindy Hall and Bruce Garcia
Web Design for TV Browsers
Presenter: Marinela Miclea
General Web design principles
- Inclusive/low-end vs. exclusive/high-end design – Your design depends on the type of audience you're aiming for: if you want to include as a large an audience as possible you should aim for a low-end design; however, if your client is a software company, for instance, you will want to design the site towards the high end.
- Simple, attractive, effective layout – In all instances, a simple, attractive, effective layout wins out over an overly complex, fussy design.
- Informative, concise content (text) – A Web site should always inform visitors in a concise way.
- Good navigation links – Visitors to a site should be able to navigate the site's pages with ease.
- Test page on various browsers – You should always test your site on various browsers; currently, the top 3 are Netscape Navigator, Internet Explorer, and now WebTV.
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."
TV vs. PC audience
- Old habits are hard to break – Keep in mind that the
TV audience is used to:
- Seeing large images and graphics – (typically, people sit further away from TV sets than when sitting in front of computer monitors)
- Not interacting with their TV sets – other than to change the channel
- Having all content fit on one screen
- Being entertained
- Not waiting for images to appear on-screen - WebTV vs. plug-ins – WebTV's software supports a wide variety of graphics and audio software formats, allowing the WebTV audience to bypass the hassle of downloading plug-in upgrades in order to view site enhancements.
Web design for TV audience
In contrast to computer monitors, TV sets are devices with really low resolution. Fine details such as small text or graphics with thin lines, are difficult to read on the screen, and backgrounds that look great on a computer screen tend to be distorted on a television.
Thanks to WebTV Networks' extensive usability testing, we have developed the following recommendations for Web designers to ensure their pages look as good on TV screens as they do on computer monitors.
- 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.
WebTV screen dimensions as reflected on WebTV Networks' set-up screen
- Colors – Although full white backgrounds are in wide
use and are the easiest choice, they are not the best choice
if you want your pages to look good on TV sets as well as on computer
monitors. In general, darker-colored backgrounds display better on TV
sets than lighter-colored backgrounds. A charcoal background (hex
value #191919) is a good color to use.
Full white or full red backgrounds cause screen distortion; that is, the edges of the page will appear to bow.
If you really want a white background, try using 90% white. For example, try using the color linen, whitesmoke, or the hex color value #EFEFEF.
When choosing colors for text, it is best to use light-colored text against dark-colored backgrounds; TV audiences find pages designed this way easier to read. - Graphics, animation, audio
Graphics – Use small images for quick download times.
Avoid using images with many fine details as they can be difficult to see and will take longer to download.
Use height and width attributes so that text will load first while images are still downloading.
Avoid using thin graphics (for example, one-pixel lines, horizontal rules) as they flicker on the TV screen and so distract your TV audience from Web content.
If horizontal rules or thin lines are necessary to your design, add a pixel of width to the <HR> tag (for example, <HR size=2>) or antialias lines that are graphical in nature (antialiasing adds at least a couple of pixels to the width of a line) – use your art tool's antialiasing feature.
Use client-side image maps instead of server-side image maps; they work better with remote controls.
Avoid using narrow columns as images will be scaled and text will wrap frequently.
Use the <NOBR> tag to prevent line breaks in a series of images or any other horizontal flow.
Avoid using too many form elements in your Web pages as form options can quickly become overwhelming to non-computer users.
Animation – Use animation in your Web pages to provide your TV audience with some of the movement they are accustomed to seeing on their TV screens.
Avoid large animation files as they will take long to download or may even hang. - Text – Avoid using small text sizes as they are very
difficult to read on TV screens.
Use the <NOBR> tag to prevent line breaks in text or any other horizontal flow.
Avoid making fonts smaller than the base font size of your window. Generally, text embedded in images is more difficult to read than normal text. Because a good deal of small text size is included in an image button label, consider placing the label outside of the button itself.
Enlarge graphical text (for example, text on top of a button or within an image map) for better readablility on TV screens. Alternately, insert larger text links below the graphical text.
Keep Web page titles short so they won't be truncated when displayed on a TV screen.
Audio – Use background music or theme music on your Web pages to provide your TV audience with an experience more like television.
Avoid large audio files as they will take long to download or may even hang.
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 because TV audiences are used to looking at one focal point.
- Avoid placing links to downloadable software on your home page. WebTV users cannot download software into WebTV receivers (other than the automatic upgrades they receive from WebTV Networks, Inc.). Alternately, provide alternatives (such as e-mail links or telephone numbers).
And remember: the TV audience differs from the computer audience, so ensure your Web design includes both types of audiences.
WebTV resources
You may wish to visit some WebTV sites for further information:
- WebTV's HTML Reference Guide –
www.webtv.net/primetime/preview/technology/reference.html (no longer
active)
Comprehensive guide covering all HTML elements in current use (HTML 3.2 and previous), complete with definitions, HTML code examples, and a list indicating whether they are supported by the top 3 Web browsers (Netscape, Internet Explorer, and WebTV). Web design tips, supported graphics, audio, and animation formats as well as color names and hex values are also included. - WebTV's Test Colors –
www.webtv.net/corp/devdocs/colorguide/color-index.html (no longer
active)
Test the colors you're planning to use in your Web page here! Look at all possible combinations of background and text – (accurate for a WebTV Receiver with a TV set; not using an RGB display). - WebTV's PrimeTime for Developers –
www.webtv.net/primetime/ (no longer active)
Browse through the wide variety of information about Web design and Web content display on TV sets. Note the WebTV Simulator for PC and the WebTV Simulator for Mac software. - WebTV Networks, Inc.'s home page – www.webtv.net (no
longer active)
WebTV's home page where you can read about the company's latest projects and products as well as its history and vision.
Review of Web sites
Listed below in alphabetical order are the sites we have evaluated for the purposes of this presentation:
- Carnegie Hall –
www.carnegiehall.org
- GOOD:
Attractive visuals.
Fast-loading graphics.
- BAD:
Small fonts (hard to read). - David Siegel (Web designer) –
www.dsiegel.com
- GOOD:
Interesting graphical design.
Thought-provoking comments (though sometimes narcissistic).
- BAD:
Nonintuitive front page – 4 images, no text) – viewers don't know what the page is about or where to go.
Select the top left Marilyn; the page that comes up is better, but still not that informative.
"Balkanization of Web" page; the left margin is forced to curve through the use of a clear GIF and by altering the HSPACE on each line (with <NOBR> and <BR> tags).
When displayed on a computer monitor, the effect is interesting, but when displayed on a TV screen, the left margin appears straight, not curved,and line endings appear cut off. - Delta Airlines – www.delta-air.com
- GOOD:
Clean, navigable, all items fit on one screen.
Uses a white background, but the effect is good because of the contrasting colors of the text and images.
Animation works well.
- BAD:
Drop-down menus group information, but the dotted lines between groups of selection items are ugly and confusing (the user doesn't know whether s/he can select them, too). - Discovery – www.discovery.com
- GOOD:
Well-organized; viewers can easily find their way around.
Small, fast-loading images intermixed with text – attractive.
Good balance of text vs. images (viewers aren't overloaded with too much text to read or with too many images that are slow to load, which can make a site look like it's just eye-candy with no real content).
Some animation highlighting major links – creates interest for viewers.
- BAD:
Background color is bright white; doesn't look good on TV sets. - FAO Schwartz – www.faoschwartz.com (no longer
active)
- GOOD:
The purple contrasts well with the orange; however, it would be better to use an orange that doesn't flicker as much (use WebTV's color test page) and use the purple or other dark colors for contrasting text and other visual elements.
Animation works well.
Sound works well (soft ticking noise for the clock).
Inside pages work better than the front page – select the clock face or "About FAO Schartz."
- BAD:
Too much flicker, hard on the eyes of TV viewers – colors don't contrast enough (only brassy/warm oranges and reds).
Slow-loading graphics.
"About" page could use more spacing between links on the left. - Haywood & Sullivan (Web designers) –
http://development.ocm.com/pictel/apps/ (no longer active)
- GOOD:
Clean, effective design in general.
- BAD:
Too much scrolling down (on the home page). Download offer – alternatives should be available for TV users (for example, an e-mail address or a phone number). - MLS Major League Soccer –
http://www.mls.com
- GOOD:
Black background with white text, contrasting colors, graphics.
- BAD:
5 screens (for a TV viewer, this is equivalent to 5 vertical scrolls). Slow-loading image map. - Music of Cyberspace – www.keybdwizrd.com/ (no longer
active)
- GOOD:
Fast-loading audio and graphics.
Light colors on dark background.
BAD:
Some flicker. - Princess Diana Memorial – www.munitions.com/~rory/
(no longer active)
- GOOD:
Attractive visuals.
Concise, informative text and excellent navigation.
Fast-loading graphics. - Retro-Fit – www.retro-fit.com (no longer
active)
- GOOD:
Nice and clean in general; good colors.
All items fit on one page (one screen length – no scrolling).
- BAD:
Text on buttons should stand out more; it would be better to use either black or another contrasting color for text on buttons. - Stanford University –
www.stanford.edu
- GOOD:
Page displays almost exactly the same on a TV set as on a computer screen.
Great background color.
Image loads pretty fast.
The browser controls text display (the designer isn't going for absolute control.
- BAD:
5 screen lengths – too much scrolling, but it's not bad for an educational site (the designer could regroup the information in order to get it down to 1-2 screen lengths; the result, unfortunately, would probably be that some of the information would be pushed down another level at the site). - United Airlines – www.ual.com
- BAD:
Slow-loading (huge image map).
Text is too small.
No selectable hot spots (probably because they overlap or are of irregular shape) – image map should be redesigned. - Whirlgirl – www.whirlgirl.com/
- GOOD:
Attractive site design.
Items fit within 2 screen lengths.
Fast-loading animation (achieved with animated GIFs and Shockwave, not JavaScript).
Black background with white text, contrasting colors, graphics.
Hey, she's a WebTV user, too! Look at the "I watch WebTV" box at the bottom of the home page.
Note: The above Web site evaluations were made as of late November 1997. The design and content of these Web sites may change at any time, and the evaluations may no longer apply by the time you view the sites.
Overhead Slides
| Agenda |
|
| General Web Design Principles |
|
| TV. vs. PC Audience |
|
| Web Design for TV Audience |
|
| WebTV Screen Dimensions | WebTV screen dimensions as reflected on WebTV Networks' set-up screen |
About the Presenters
- Robert Laws,
Manager, Technical Publications, WebTV Networks, Inc.
Robert has been a technical writer, Web site operator and publisher, Web page designer, and publications manager. He has worked at a number of fast-paced high-tech companies including Silicon Graphics, MIPS Computer Systems, Sun Microsystems, and The 3DO Company. Currently he manages the technical publications department, which he established, at WebTV. - Cindy Hall, Technical Writer, Editor, Web
Publisher, HallWrite
After earning a degree in English and a certificate in technical writing from San Francisco State University, Cindy Hall began her career as a technical writer at Sun Microsystems. She has held a variety of positions in the field including that of editor and Web publisher (most recently for Netscape) before coming to WebTV. - Bruce Garcia, Technical Writer,
WebTV Networks,
Inc.
Bruce is currently a technical writer at WebTV Networks. He has previously worked at a number of Silicon Valley companies including Sun Microsystems and The 3DO Company. He is currently focusing on user manuals. - Marinela
Miclea, Technical Writer/Web Site Designer,
BrainPower
Marinela is a published writer who has provided technical and marketing writing as well as Web page publishing to a variety of clients including WebTV Networks, Sun Microsystems, and Wells Fargo. She has designed complete Web sites, converted documents to HTML, and written original HTML code as well as reviewed Web-related publications and sites.
Marinela has a degree in sociology from UCLA and currently serves as Webmaster of the National Writers Union's San Francisco Bay (Local 3) Web site, which she also designed.
Return to Marinela Miclea's resume.