How to migrate your website to Google TV

There are some specifics aspects to consider when designing or migrating a website for use with Google TV. The following excerpt from the O'Reilly publication Building Web Apps for Google TV will help you get a leg up when doing so.

---

Websites designed to be accessed on browsers in desktop or laptop computers generally require a few essential changes to provide a decent user experience in a 10-foot environment.

Traditional page designs are built for a window in portrait dimensions, navigated with a mouse pointer, and rely on vertical scrolling provided by the browser window to reach additional content on the page. This type of design contrasts with the types of designs we covered in the previous chapter.

Adding Keyboard Navigation

Keyboard navigation is one of the most essential components of the user experience in a 10-foot interface. Although adding an event handler to handle key down events for arrow keys is essential for keyboard navigation, it is not the only element to consider.

Ideally, every actionable element on a page should be reachable using the D-pad arrow keys. These elements should be visually highlighted as the user navigates around them to make it clear where they are on the page. Once an element is highlighted, the user should be able to trigger it with the OK or ENTER keys.

If the page has logical groupings of controls, it’s helpful to group the navigation as well. That is, allowing the highlight to “jump” around to disparate parts of the page can be confusing. An implementation can control for this by grouping the elements that can be highlighted by the containers that hold them. A keypress, such as the TAB key, can then be used to jump between areas of the page that would otherwise contain the highlight movement.

Autozoom Considerations

The Chrome browser on Google TV includes an algorithm for automatically zooming into page content. This autozoom is used to provide a basic level of usability for sites that were not designed for Google TV. By zooming in or out, the size of fonts and images is increased to a minimum readable size.

A website that requires autozoom for basic usability does not present an optimal user experience. Sites that have been designed for Google TV can still make use of autozoom to improve the user experience while saving effort. Using autozoom this way may degrade website display performance (such as with animations and scrolling), but this may be offset by the work for your design (and development) for multiple resolutions and for different TV overscan dimensions.

If you want to design your site without having to compensate for autozoom, you can disable this feature with the following meta tag:

<meta name="gtv-autozoom" content="off" />

Scrolling and Paging Content

Traditional web pages use scroll bars automatically provided by the browser to scroll through content. These scroll bars might be on the main browser window or in individual elements (for example, DIVs with the CSS property overflow: scroll set).

The 10-foot user experience makes it difficult for users to select a relatively small scroll bar on the display and position it accurately. Given this limitation, it’s better to rely on D-pad arrow keys to scroll a page instead and navigate individual items. In short, you shouldn’t rely on scroll bars to access off-screen content, as this will likely punish your users with a relatively poor experience.

Content Sizing for Fonts and Images

Reading from a display at a 10-foot distance requires fonts that are significantly larger than traditional pages. As a general rule of thumb, fonts should be a minimum of 16pt for 720p displays and 20pt for 1080p displays.

Images should be scaled to have the same visual impact at 10 feet. Note that the scale factor is not linear with the size of the display and the viewer’s distance. In technical terms, this is because the angle of view that a pixel of a certain size covers does not vary linearly with the viewer’s distance from the screen.

Tip: Since bitmap image content does not scale up losslessly, if one set of images is used for both 1080p and 720p, the best approach is to choose 1080p images and scale them down to the appropriate size.

Although not necessarily recommended, a simple approach to scaling all content is to use the CSS zoom property to scale the page. This property can be applied to the <body> element to scale all of the child elements proportionately. The number used for this property should be fixed, not calculated, and selected to be a factor of 2 or 1/2 for scaling efficiency where possible.