In Part I of this article, we looked at the WebTV interface and how it impacts webpage design, page layout issues and recommendations, and text, color, graphics and sound considerations. Now in Part II, we 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 also 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 a new audience.
Including Forms: Use forms on WebTV only when absolutely necessary; consider providing an email address for people to write for information or give you feedback instead. If you do use forms, make them simple, with a limited number of elements and fields. Tests show WebTV viewers are particularly confused by numerous pop-up menus in forms. Limit the number of fill-in items; typing with the included 'keyboard' screen is awkward.
You can, and should, change the background and text colors so that form elements are consistent with the rest of the page, preferably using light-colored text against dark-colored backgrounds for legibility.
Place the submit button at the bottom right. If you use an image as an input button (with the <input type=image> tag), use the <input nocursor> attribute so users don't have to click on the button twice to submit the form.
Saving load-time: TV viewers are used to instant content, not to waiting for a screen to download. So load-time becomes even more critical than usual. The WebTV specs provide the <link href= "url.address" rel=next> tag to pre-load the next page in the background if you are sure what page on your site the user will probably view next. The URL you specify will be loaded into memory as the viewer is reading the current page. For best performance, specify only one next page per web page you create and prefetch only one next page.
Consider the order in which the parts of the page will display on the screen: text displays faster than images and small images load faster than larger images. Place larger images below the first visible screen so that the 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.
Use images with size hints (the <img> width and height attributes) to speed up load time; you should be doing this anyway! Saving an image as JPEG may make the image smaller than saving it as GIF, so check, but generally, follow the usual 'photos=.jpg, clipart=.gif' rule of thumb that is true for most web pages.
WebTV HTML: Just when thought you'd mastered HTML, along comes WebTV and it's a whole new ball game. WebTV supports many but far from all HTML 2 and 3 tags, and some Netscape and IE proprietary tags. It is critical to understand what familiar tags are not supported. In addition, WebTV provides some of their own tags that allow you to create special effects as well as compensate for interface limitations.
The WebTV Internet Terminal, like the popular browsers you are used to, ignores any HTML command it doesn't recognize or support. So if your primary audience is the WebTV one, use the WebTV extensions to HTML for optimum effect of your page on a TV screen. Other browsers will still display your page but will ignore the WebTV extensions. Or you can design separate sites for WebTV and for computer users, each using the appropriate tags and layout.
WebTV does not support Java, JavaScript, ActiveX, or VBScript at this time. Nor does it support frames, though the <sidebar> tag discussed earlier can perform some of the same functions. Other common tags are not included; it is essential that you check out the references before relying on a tag in a WebTV page.
But WebTV has provided some special tags, and attributes of common tags, of its own, for some interesting effects. We've mentioned some font, text, and image attributes in Part I.
Here are some more:
- There's a <BODY> attribute of 'logo' that allows the use of a logo image to replace the thumbnail of the pages that is used in the Favorites and Recent lists: <BODY logo="url"> where "url" is the url of the logo file. Design the logo graphic to measure 70x52 pixels and upload it.
- The <BODY> tag can also take the attributes of credits="url", which allows the display of a list of credits, and information="url", allowing the display of special information.
- You can add a clock with the <CLOCK format options> tag; the format options include showing the day, hour, minute and second.
- A <DISPLAY> tag can take attributes such as hideoptions (which allows the hiding of the option bar), nologo (which prevents the display of a logo in the favorites) and noscroll.
- Link tags (<A HREF="url">) can take attributes that allow for special effects, including fades, slides, zooms, etc.
Testing your page for WebTV: This tutorial makes it plain that pages which look great on computer browsers may look awful or not even work on WebTV. And there are special effects that are only possible to see WITH WebTV. So if you need to design for this audience, it is crucial that you check out your pages on a WebTV Terminal. But if you don't need to design specially for this audience, but would like to see how your regular page might look on WebTV, and you don't have access to a WebTV Internet terminal, you can at least check out potential layout problems by performing a simulated test. Increase the default point size of your browser fonts to 18 points, size the browser window to 544x378, and check out your page. Now imagine your only way to navigate is with a remote control and onscreen arrows. Oh, my!
So should I or shouldn't I?: As this new technology catches on, and brings with it an anticipated onslaught of surfers who are computer phobic and used to passively watching TV, and with the acquisition of WebTV by Microsoft, with the resources to push this heavily, all of us designing web pages will have to face this question. My take on this is that it essentially depends on what the purpose and intended audience of your web site is. If your main goal is to put up a personal web page for your friends and family, that will determine your choice; if they use computers, stick to familiar techniques and don't worry about WebTV for now. If, on the other hand, you want to appeal to the vast population out there who have not yet tackled computers but will be attracted to this more familiar interface, you may want to consider designing with WebTV in mind. And if you have a commercial website, or are a professional web designer, it is critical that you at least be aware of the design and technical issues of this new technology. A site that speaks to the computer literate population probably won't be of much interest to the WebTV audience; the same holds true for a site selling software, for instance. But if you are selling jewelry, or garden tools, you might feel: why cut out a whole chunk of the population?
If you do decide to consider WebTV in your design, there are a number of routes to go. You can design a site that just avoids any unsupported tags and features (like frames, embed, applets, etc.) and has a layout that can look good both with the small WebTV display area and the larger browser area. The vast majority of web pages the WebTV audience will see will not have been specially designed for them and many of them are simple enough to display just fine.
Remember that you can even add some WebTV specific tags for special effects; these will be ignored by the computer browsers that visit your site. You could also design certain pages ONLY to attract WebTV users; you'd take full advantage of WebTV tags and design your layout to optimize it for that interface, though it won't look too good to someone visiting with a computer browser. Or, if it is crucial to attract both audiences, and you want all your users to see fully optimized pages, you might design two versions of your site, one for computer browsers and one for WebTV.
You could then direct users to the proper site by putting up a simple home page with links to each version ("If you are viewing this on a WebTV terminal, click here", "Otherwise, click here"). Or else, if you have access to your server, you can have it check the user agent header and send users to different pages depending on whether the page will be displayed with a WebTV Internet Terminal or computer browser. [The user agent header contains a value that describes the HTML interface that is trying to display your Web page. The WebTV HTML interface uses the value "Mozilla/1.22 WebTV/1.0 (compatible; MSIE 2.0)" for the user agent field. Check for the "WebTV/x.x" portion of this value. The rest may change in later versions of WebTV.] Check with your sys.admin. for further information.
