Optimize Your Website for Google TV With Emphasis on Simple Content, Easy Navigation, Right Colors and Readability

Written By Sam on 5 October 2010
Advertisements

Google TV utilizes Google Chrome as the browser, so most websites that function in Google Chrome should operate correctly on Google TV. For website owners and developers wanting to optimize their sites for TV, Google has released a set of design guidelines with emphasis on content, navigation, color and readability for enhanced viewing experience as well as sound.

The following tips may come in handy for those who haven’t designed websites for TV before:

Content

  • Offer simple options and make actions obvious and easy to select
  • Offer ways for individuals to use your site or apps in social settings
  • Text must be readable from a distance
  • Keep the navigation simple for a remote control.

Simple Interfaces

  • Group content, controls, and interactions by priority
  • Take advantage of habits that people have learned on the web
  • Make the primary action reachable in one click
  • Don’t hide key features in a menu
  • Don’t rely on the back button. Display an easy way to return to a previous location
  • Preselect the user’s next action when you can. For instance, move the insertion point into the next text box, or select the first item in a list
  • Use short, clear labels and test them with users
  • Limit vertical scrolling.

Navigation

  • Go for fast and easy interactions that can be done from a distance, with one hand, even in the dark
  • Set arrow keys to navigate all visible, actionable items on the screen.
  • On a TV screen, mouse control is difficult. To assist your users, make each click target (link, button, and the like) large with ample padding for an expanded target area.
  • Add a hover state to links and buttons to highlight when the pointer has hit its target.

Design

  • Avoid highly saturated and very bright colors
  • Keep the sections of the screen over-sized.
  • Make buttons and other click targets larger.
  • Design for 1280×720 and 1920×1080 resolutions
  • Include at least a 10 percent margin at each resolution:
    •1280×720 resolution. Recommended width is 1152×648.
    •1920×1080 resolution. Recommended width is 1728×972.
  • If you must choose one resolution, design for 720p resolution. Google TV will scale it up on 1080p resolution.

Color

  • When working with solid colors, use pure white (#FFFFFF) sparingly. Instead use #F1F1F1 or 240/240/240 (RGB)
  • Avoid bright whites, reds, and oranges
  • TVs have different display modes, like Standard, Vivid, Cinema/Theater and Game. Test webpages in all these modes
  • Avoid lightweight fonts or fonts with both very narrow and broad strokes
  • Google TV currently supports only the Droid Sans and Droid Serif font families, but you can use font embedding techniques to create a more customized appearance.
  • Font embedding, which relies on Flash, will be slower than other methods.

Readability

  • Break text into small chunks. Limit each paragraph to 90 words
  • Keep line length at about 5–7 words per line. Never go shorter than 3 or longer than 12
  • Choose light text on a dark background as it is easier to read on TV.
  • Target body text to be around 21pt on 720p and 28pt on 1080p.
  • Don’t use any text smaller than 18pt on 720p and 24pt on 1080p.
  • Add more leading (larger line spacing) for onscreen text than print text.

Sound

  • Sounds should be appropriate to the living room environment.
  • By default, the volume should be low.
  • Provide a simple way to mute your website or application

Flash on Google TV

  • Google TV is capable of playing 720p and 1080p Flash videos. For best performance:
  • Use h.264 encoding for all video content. Avoid encoding your videos in h.263 or vp6.
  • Avoid adding continuous-playing, Flash-based banner or sidebar ads on a page that includes a video
  • Be conscious of system memory, check availability and limitations when running Flash.
  • Handle errors or crashes gracefully with proper recovery messaging.

Leave your response!