WebTV: Better Than You Think

I have a brand-new toy to play with these days. As with most of my toys, I hadn't intended to get it. I had gone to Nerds R Us (conventionally known as Fry's Electronics, a computer/electronics/junk food store in the area) solely to get a new battery for my car alarm. But there it was, on a nice big screen, and it looked so very interesting. And I'm a sucker for electronic toys, so I just had to have it. It's a weakness of mine.

"It" is a WebTV internet terminal, one of those boxes that lets you surf the net on your TV using a remote control from the comfort of your living room couch. It's been available in the US for a number of months now, and the price has been continually dropping. I got mine for a mere $330, which included the price of the keyboard. The WebTV service is an additional $20 a month for unlimited Web and email use.

I realize that I'm late to the game, writing about the WebTV when everyone else has already gushed about how easy it is to set up and use, how inexpensive it is and how it'll change the whole social demographic of the Web by letting folks without computers surf the net. I'm not going to talk about that. This is Web Tech, and the question I'm sure is on all your little web-hacker minds is: what do my pages look like on WebTV?

The answer is: probably better than you think. I've spent a bunch of hours in front of the WebTV now, browsing my favorite sites (as well as my not-so-favorite sites), and I have yet to find a site that looks terrible. In fact, my home page looks better on WebTV. Wow!

WebTV handles the vast majority of standard HTML 3.2 tags, including tables. It handles images spectacularly well, especially given the resolution limitations of the TV screen (WebTV optimizes the images on its server for display on a TV ­ which also makes them much smaller so they load faster as well). Animated GIFs work. Imagemaps work. Forms work. Most everything, in fact, works.

Which is not to say that all pages look just like they do in Netscape or Explorer (wouldn't that be nice). WebTV doesn't understand frames, JavaScript, Java, or plug-ins. It uses a large text size for readability, and the screen width cannot be resized like a browser window. So if you've spent a lot of time optimizing your pages for a specific browser or window width ("For best results, you must be using Browser X to view these pages, your browser window set to be this wide, all your fonts set to DecoGrunge 14 bold, standing at least four feet back from the screen with all the lights off"), or if you've used a lot of cutting-edge features in your pages, you'll most likely end up disappointed.

Let's assume, however, that you've been a good equal-opportunity Web designer, and you've already got Web pages that can be viewed in a variety of different browsers. Even then, there are a few things to watch out for, things that may make your pages less than optimal when viewed on a WebTV. I got most of these hints out of WebTV's style guide and from just sitting on the couch, surfing, and seeing what works and what doesn't.

Text inside images is probably the biggest useability problem with WebTV ­ particularly small fonts or anti-aliased text. Text is hard to read on the TV screen, and small text doubly so. How small is too small? The text on the round buttons at the top of Yahoo's home page becomes a black smudge on WebTV (although the rest of the page is just fine). The fancy serif font in the middle panel of Sun's home page is big enough, but kind of blurry on WebTV. Try to avoid putting text inside images, or stick to nice big block letters.

Small text in HTML has the same problem. Text set in <FONT SIZE="2"> or <SMALL> can end up being too small on the TV screen.

Simple pages are better. The trend lately on the Web has been to use tables for layout and to cram the page full of stuff on all sides. Busy, complicated pages with lots of elements become even more complicated on WebTV, and look even more bunched together. Because the text size is so large and the screen width so narrow, columnar pages can often end up with columns that are only 2 to 3 words wide, which makes them very difficult to read. Consider using more white space and fewer complex page elements.

Shorter pages are better. Because of the text and screen size, pages will be formatted narrower and longer than in a Web browser (you can't scroll horizontally on WebTV ­ all tables and images are scaled to the one width). What this means is that if your pages take up a few browser screens on your nice 17" monitor, chances are good they'll take up many more screens on WebTV and require your readers to spend a lot of time scrolling. Netscape's home page, for example, takes twelve scrolls on WebTV to get to the bottom. Its annoying. Consider smaller, shorter pages, and delegate less important information to other pages deeper within your site.

Watch your colors. Pure white backgrounds look too bright on TV ­ a slightly off-white background or a light-colored background image looks much better (the Electric Minds backgrounds work particularly nicely on WebTV). Very bright colors such as the kind favored by HotWired become painfully vibrant, and harshly contrasting colors can start shimmering on the TV screen, which is distracting and difficult to watch (of course, with HotWired that may have been the intent. Its hard to tell sometimes).

Load-time considerations are especially important to WebTV, although WebTV appears to be no slower than the average 28.8 modem connection. All the usual load-time hints apply. Keep your images small, and use width and height attributes. Provide text-based navigation in addition to imagemaps. Put the most important information on a page at the top of the page so that your readers see it first before the entire page has loaded.

Testing. If you're curious to see how your pages might look on WebTV, but you don't have one and you can't sneak into your local electronics store to try it out, here's a way to get the gist of how things might look: set your default font to a sans-serif font (Helvetica or Arial, for example) in 18 points. Then resize your browser window to be about 6 inches wide by about 5 inches high (544 by 376 pixels). Now try viewing your own pages to see what happens. If you've done your job right, your page might not end up looking all that different. Or you might find you need to do some tweaking (or you might gasp in horror and decide to ignore it. Your choice).

Most of these hints, of course, apply to any Web page and not just to WebTV. That's one of the best WebTV features: there's nothing that requires you to create a whole new set of pages for their system ­ it all just works. If you are interested in taking your design even further, however, WebTV provides extensive developer documentation that offer not just general hints, but also specific tips for customizing pages for TV and WebTV use (including a whole bunch of new HTML tags specific to WebTV). If you have the time and the resources to create sets of WebTV-specific pages, there plenty of fun new things to try. If you do, drop me a line at lemay@webtv.net. I'll be here with the remote in one hand and a beer in the other, playing with my toy.

mtrbike said:

Digital ID wll most likely become more and more important, particularly as elecontric cash and payment systems become more widely used.

Do YOU have your own personal digital ID? a PGP key? Something else?

Join the conversation!

Most Active Topics:

Topic 6 5 years from now, the web will be....

Topic 41 Pointcast

Topic 70 FYI: Fallback Plans

All Web Tech Topics

Speeding Up with HTTP 1.1
Your pages take too long to download ­ and it's not your fault. HTTP 1.1 may help.

WebTV: Better Than You Think
How do your pages look on WebTV? Probably better than you think.

Animated GIFs: Friends or Foes?
A fine line separates those that are done well from cases of animated-GIF abuse.

Complete Archive