Web Development 101: Designing Your Site for Google TV

By Mike Rohde

Google TV is here, and despite the critics bashing it, Google is determined to make the Web on TV a big success. What they need is content. In this web development tutorial we're going to show you how to create websites for Google TV.

An excellent example of quality viewing on Google TV is CNET. They have daily updates on what is going on in the world of tech. You can navigate from segment to segment via the scroll bar at the bottom of the screen by using the d-pad on the keyboard. To get to the next segment, you simply press right or left to highlight the segment you want and then click OK. To make the scroll bar disappear, you press the down arrow. To bring it back up, you press the up arrow.

The navigation couldn't be easier. This same design is nearly duplicated with YouTube leanback, which basically finds the highest quality videos from YouTube and plays them continuously. Say you want to watch the latest on the Motorola Xoom, simply type in “Motorola Xoom,” select the the segment that looks the most promising from the scroll bar and then lean back and enjoy. You'll get to watch every single Xoom video on YouTube, one right after the other. Another example is to search for SuperBowl 2011 ads, and BOOM, you get what you asked for.

These are two excellent examples of quality content that you can watch on GoogleTV, and Google is asking for more. If you have a video site, then you should consider the best method to optimize your site for viewing on Google TV.

Google has made this extremely easy for you. They have provided two templates and complete guidelines on how to optimize your site.

Here are the key takeaways:

  • Take into consideration the Viewer's distance from the screen
  • Performance vs. visual appeal; Google TV can be slow in loading pages, so optimizing for performance is key
  • Stay away from vertical scrolling
  • Think of the d-pad as the primary means to navigation as compared to a mouse.

Google is recommending developers use CSS3 when optimizing their sites for Google TV and they provide sample code for the types of font to use:

@font-face

{

font-family: Bonzai;

src: "Bonzai.ttf";

}

.font-demo-css {

font-family: 'Bonzai', sans-serif;

font-size: 36px;

}

You'll probably notice the 36px font size. You'll want the extra large font to accommodate the fact that the viewer is reading the screen from a distance on their TV. Gone are the days of the miniature font.

And then we get to the d-pad navigation, which is essential to designing sites for Google TV. Google provides the JavaScript for you:

window.onload = function() {

document.onkeydown=function(e){

  if (!e) e=window.event;

  switch(e.keyCode) {

    case 37:

      alert("Left arrow");

      break;

    case 38:

      alert("Up arrow");

      break;

    case 39:

      alert("Right arrow");

      break;

    case 40:

      alert("Down arrow");

      break;

    case 13:

      alert("Enter/select");

      break;

  }

}

}

Google is suggesting that you build the TV version of your site on the same domain as your desktop version. With that in mind, you'll want two different stylesheets. One for desktop viewing and another for TV viewing:

<link rel="stylesheet" href="my-existing-css.css" type="text/css" media="screen" />

or

<link rel="stylesheet" href="tv.css" type="text/css" media="tv" />

Then there's the question of what to do with URLs. Google provides three options. The first, is to keep it all the same:

example.com/great-vid

The second is option is to provide a URL specifically for the TV:

example.com/great-vid&media=tv

The third option accommodates for both desktop and TV:

<link rel="canonical" href="example.com/great-vid" />

This third option consolidates indexing and ranking signals to the original version.

If you decide to go with the first or third option, you'll need to add a user-agent string so that when a visitor finds your site on Google TV, they will see the TV version:

Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.127 Large Screen Safari/533.4 GoogleTV/161242

Google has set up a page with example sites and they encourage you to submit your TV-optimized site: “The Google TV Website Gallery is a great place to get feedback on your website, find out what others are doing and enable others to see your hard work. Sharing your website is as easy as filling out a simple form.”

Personally, I know I can't wait to find a few hours to start playing with these templates. My personal site has a ton of video that I would like optimized for Google TV.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date