Home How to Design a Web App for Google TV

How to Design a Web App for Google TV

Google has released a preliminary developer’s guide to aid those interested in porting their Web or mobile applications to Google TV, the newly announced platform built on top of Google Chrome technology. With Google TV, “television is no longer confined to showing just video” explains Salahuddin Choudhary, Google TV product manager, in a blog post. “It can be a photo slideshow viewer, a gaming console, a music player and much more.”

But how does one build a working application for Google TV?

Although deeper, technical details are still forthcoming (sign up here for updates), developers interested in this new platform can now follow the guidelines put forth by Google here on the Google TV developer site. These are essentially style suggestions for building TV-enabled Web apps, something that developers should consider if building apps for any TV platform, not just Google’s.

They are, as follows:

  • Make it Simple: Identify the vital parts of your app before starting work, stick with one visible mode of navigation or one information hierarchy, make the primary action reachable in one click, avoid the temptation to use abstract icons, limit vertical scrolling, and preselect the user’s next action when you can.
  • Get Navigation Right: Google TV users will often navigate with a directional pad, so the navigation model involves up, down, left, right and enter buttons and action. Make your app navigable with one hand.
  • Design for TV screens, not Computer Screens: TVs have wider screens, so you should make UI elements slightly larger. Also, avoid highly saturated and very bright colors, and design for 1280×720 and 1920×1080 resolutions, including at least a 10% margin. Use pure white (#FFFFFF) sparingly.
  • Pick the Right Fonts: Avoid lightweight fonts or those with very narrow or broad strokes. Use simply constructed sans serif fonts and apply anti aliasing to increase readability. Google TV currently supports only the Droid Sans and Droid Serif font families. If you want to use font embedding techniques to create a more customized appearance, you can, but this relies on Flash, which will be slower.
  • Make Onscreen Text Readable:
  • Don’t Use Disruptive Sounds: By default, volume should be low. Make it simple to mute the app. Don’t make interactions dependent on audio cues.
  • Use Flash Wisely: Google TV can play 720p and 1080p Flash videos. Use h.264 encoding, not h.263 or vp6. Avoid Flash banner or sidebar ads that include video. Only use one instance of the media player at a time. Be conscious of system memory.
  • Be Conscious of Performance: Perceived performance is more important than actual performance for TV apps. Make sure the app never executes so much code that the runtime can’t frequently update the screen and gather user input. You may need to divide a task into parts to accomplish this.
  • Use Bitmaps: Use bitmaps to optimize rendering.
  • Watch Out for Tweening: Minimize the use of motion tweens to help content run faster.
  • Limit each paragraph to no more than 90 words.
  • Break text into small chunks that can be read at a glance.
  • Keep line length at about five to seven words per line. Never go shorter than three or longer than 12.
  • Remember that light text on a dark background is slightly easier to read on TV (compared to dark text on a light background).
  • 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.

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.