Slightly ajar

Over the last year or so there has been an increasing visibility of the web away from the desktop, especially with the rise of Opera Mini (which we've just announced over 1 million downloads in 10 days) and the hype of the iPhone. That isn't the only way to see the web away from its traditional confines though, and the launch of a white games console from the N company paved the way for another kind of experience - surfing from the couch. What makes this unique and what should you look out for?

If you take the experience on a phone, there are some constraints and differences you have to look out for. Even though they are called Personal Computers, a PC is generally anything but, with many people sharing one machine. On the other hand a phone is very personal. A phone is rarely shared, people keep them with them at all times, and customise them heavily. It is therefor logical that personalisation is something that should be taken into account for a successful mobile web experience, and it should be optimised for 1 to 1 interaction, just like the desktop. The TV on the other hand is a much more social affair. There is probably not many sites more popular on the N companies console that YouTube. what is more fun, having friends bunched around a desktop in the office, or sprawling out on the couch with a pizza watching the latest funny clip? The web on a TV is meant to be shared between many people. Information isn't private, as many people can see the screen at once and the tV is probably in one of the busiest rooms in the house. The Big N take great advantage of this with multiple controller support. Other users can point at things on the screen individually. With some imagination this could be taken advantage of in interesting ways. Wiicade for instance allow for multiplayer games. Apart from Video, Music and Games, social networks could be an interesting area for innovation. Presently there isn't much social going on in the popular networks - one persons interacts at a time.

So what are the constraints? We'll it is different than mobile. With mobile you have slow latency and low bandwidth (unless you are connected to Wifi). TVs in general are connected to Wifi or a wired network. Mobiles also are limited to the palm of your hand, while TVs are generally much bigger than your desktop or laptop. The problems in this area are viewing distance and resolution. A standard definition TV has a resolution of 720 by 576 (PAL 576 p/i) or 720 by 480 (NTSC 480 i/p) and in reality the viewable resolution is lower than this due to inefficiencies. This low resolution causes bigger problems as the screen sizes are usually large so the pixel density is very low, and text can be blurry and hard to read. As technology marches on these problems will fix themselves. 720p (1280 by 720), 1080i and 1080p (1920 x 1080) displays are already on the market and fairly popular (note: the most popular TV browser doesn't support HD), and the resolution is around that of regular computers. Whether the user has a HD TV or not though, the same constraint is present. The user will usually be sitting on the sofa, a good distance from the screen. You as a designer have to take this into account, and is sometimes called the 10 foot interface. Even on a big HD screen, the text should be designed to be enough to read. This limits what can be displayed at one time. Consider restricting the number of columns and including side bar content, that isn't regularly accessed, under the main content. Browsers are gaining high quality zooming functionality (Such as Opera's Intelligent/Adaptive Zoom) , but the experience will be better if the text is readable without having to zoom in and out.

The methods of interaction can also be difficult. Just like mobile, this is hard to predict. A set top box or TV could come with a wireless keyboard and trackpad/scroll ball, or it may come with just a remote (that can vary themselves). It may even come with a magic wand that follows the users hand movements. Unless a keyboard is available (this shouldn't be assumed) then text entry will be a pain (although experience makes this easier) so avoid making a user add unnecessary text. Consider implementing OpenID for example, and keep the URLs short. Use device independent event handlers in your JavaScript where possible.

Just like mobile, you don't have to make a separate optimised page for TV browsers. Media Types and Media Queries come to the rescue. You can define a separate stylesheet just for TV browsers or you can adapt your existing stylesheet to bump up the text size and refolw the layout for example. Using a combination of the two, you can progressivly enhance the layout as you detect higher screen resolutions. If you have stylesheet that either has the media attribute set as all or tv (or screen, tv and other combinations of different media types) you can include the following CSS:

@media tv {
     /* catch all for any tv that don't fit the queries below */
}

@media tv and (min-device-width: 720) and (device-aspect-ratio: 4/3) and (scan: interlaced) {
     /* styles for 480i standard ration TVs goes here */
}

@media tv and (min-device-width: 720) and (device-aspect-ratio: 4/3) and (scan: progressive) {
     /* styles for 480p standard ration TVs goes here */
}

@media tv and (min-device-width: 1280) and (device-aspect-ratio: 16/9) and (scan: progressive) {
    /* styles for 720p widescreen TVs go here */
}

@media tv and (min-device-width: 1920) and (device-aspect-ratio: 16/9) and (scan: interlace) {
    /* styles for 1080i widescreen TVs go here */
}

@media tv and (min-device-width: 1920) and (device-aspect-ratio: 16/9) and (scan: progressive) {
    /* styles for 1080p widescreen TVs go here */
}

If the stylesheet is just for tv you can leave the first catch all media query out and just include the styles without a media query. If you use all or include other media types in the statement, you probably want the media query so that screen browsers or printers don't get the TV styles (unless you want them to of course). Depending on your design, you'll probably not want to include all those media queries and just adapt the layout and text sizes where needed. You may also want to use max-device-width instead of min-device-width and exclude some of the extra conditions. It may not be important if the screen is interlaced or progressive for example. Aspect ration may be important if you use multiple columns, as a widescreen display will fit more content horizontally (or will at least have more real estate, maybe not more pixels). You milage may also vary with what browsers support which media queries. device-width should be the most supported. Opera and WebKit based browsers are the only browsers that currently support MediaQueries as far as I know, but they are part of CSS3 and any device based browser worth its weight in salt should add support for this.

Finally, you should take into account the colours, thickness of elements and movement on TV. White and red in particular are hard to read on TV (My blog won't be great then) as the bleed (I'm not sure if this also applies to HD TVs?) and so should be avoided if possible. One pixel elements, such as borders can also bleed, so consider using 2 pixels at a minimum. Fast movement on older TV can also cause ghosting, so be careful in this regard. Speaking of movement, media playback is often a problem as a company has to licence the codecs or plug-ins. This makes it very variable if a format is available or not. Flash is generally the most supported, but generally needs to be saved as version 7 or lower. Avoid Quicktime at all costs, as it is only available on Mac and Windows (or Apple's own hardware). Many devices come with some form of embedded linux for example, where this is not available. Windows Media is not much better, if at all. This is one of the reasons why Opera (and Mozilla) are pushing for a Ogg Theora solution. It is an open standard, that can be implemented and shipped by anyone without paying licensing fees or royalties. Including this in a browser allows it to be used on devices and become a baseline format that people can deliver to. This is something for the future however, and no browser on TV that I know about supports this yet.

So in summary, make your text readable at ten feet, think collaboration, think social, avoid unnecessary input, progressively enhance for HD with Media Queries, and avoid those sharp bright colours.