My OperaDesigning for the big screen
Sunday, June 10, 2007 5:06:17 PM
In some ways it feels like things are turning a full circle. My first experience of using a computer was either the Atari 2600, or the Commodore 64, depending if you define a games console as a computer or not. Either way, these both plugged into a TV set to display the output. Since the web was invented it has primarily been used on computers using a monitor, which one sits fairly close to. There have been some exceptions such as WebTV that didn't really take off, and browsing on mobiles, which is becoming bigger by the month, however the primary way to access the web is certainly a PC of some kind (I'm counting the Mac as a PC here). However, while this is not likely to change in the near term, The Internet Channel on the Nintendo Wii has shown how one can surf on the web using a TV and still get a first class experience. I was even using this as my primary browser for a while when my laptop stopped functioning.
TV browsing isn't confined to the Wii of course, and I'd expect many other TV based browsers to come out in the future. The Apple TV is ripe for this for example, and it has recently added YouTube support and other internet based content like movie trailers. One could even say Teletex is a walled garden precursor to the web. While existing content works great on the TV when a suitable browser is used, the web experience is fairly different and there are optimisations that can be done to make this experience even better.
So what are the difference that need to be taken into account? Well, in the short term, traditional TV screens run at much lower resolution than a regular monitor, meaning that the available screen space is smaller (even though the screen may be physically larger), and text will be less crisp and harder to read. Colours such as red also bleed quite heavily on a traditional TV. Except for the Wii, which doesn't support HD, this problem will go away with time as more people purchase 720i and 1080i HD screens, with their monitor class resolutions. One might think this will remove the need for customising the layout for TV veiwing, but this isn't strictly true. Even though the resolution will be higher, people don't sit right next to their TV. Generally people sit around 10 feet away, sitting on the sofa. Small text then becomes very difficult to read, without zooming in. The lack of a keyboard and mouse can also make interaction harder, especially if JavaScript actions are used that assume a certain input device. A TV browsing experience is also more social, in that more people can gather around a large TV, instead of one person sitting at a computer.
Over on Dev Opera, Tarquin posted an article on Making Wii friendly pages. This is very Wii focused, as the title suggests, but has a lot of useful information which will be of use to any designer that is optimising for the Wii. We will also publish an article in the future on how to develop for the TV.
Because the Wii supports TV stylesheets, and any future Opera based TV browsers should do the same (due to the popularity of the Wii and designers wanting to improve their experience on it, I'd not be surprised if other browser developers also adopt this standard), providing your mark-up is good quality and can scale well, solving the above issues are fairly trivial. If the regular stylesheet is set to use screen and tv media types, and extra tv stylesheet can be added to override the text sizes to a bigger value. Using ems makes this scale nicely. If you select the right value, all text should be readable from the sofa without zoom. Whether using the default view or a zoomed in view, you should also make sure that line lengths are taken into account. Using a too long line length means that the user will have to scroll left and right to read the text. This quickly gets frustrating. On the Wii, the max width of the view port when zoomed in is 640px, so if the line width is any wider than this then scrolling will be needed. Getting the line width correct not only benefits browsing on the TV as it aids retention and reading speed on any medium. The recommended line length is usually around twelve words per line. Russ Weakley has a good article about the ideal line length for content. As with mobiles, one also can't guarantee what plug-ins are available (Wii only supports Flash 7), so important information that is provided using plug-ins should provide an adequate fallback. As a keyboard can't be guaranteed, also make sure that text input can be kept to a minimum, and any information that can be pre-filled automatically does so. This also helps on other platforms, especially for accessibility. Web Forms 2 provides a nice solution to some of these issues, however it is only available in Opera based browsers currently.
If anyone has added a TV stylesheet to their site, please mention it in the comments and share your experiences.
