Jumbbbotron: Dribbble on your TV
A month ago I received a Google TV by way of the Adobe MAX conference. The point was to get people to start developing apps for the hardware using AIR for Android. For me, I was just excited to get something for free to play around with.
Once my Google TV arrived I went to set it up thinking it would take no time at all. Just hook it up to my TV and that’s it, right? Well, it was a bit more complicated than that. The first time I set it up I kind of half-assed it cause I just wanted to start messing with it. I accomplished that and then kinda forgot about it for a day or so.
My attention turned back to the Google TV after I had heard about the iPhone app and some of the other interesting things people were saying about it. This time I reworked my entire stereo, TV and set top box setup around the Google TV.
After all that there were some things that I really liked and other that were pretty flawed. I’m not going to get into those things in this post, but one of those things that caught my interest was designing/developing web apps optimized for TV.
I’ve been interested in designing apps for TV for a while and in many ways there are similar things that parallel designing for mobile devices, i.e. screen size, inputs, context, etc. As far as development goes, I started thinking about why I got this Google TV in the first place; to develop using AIR for Android.
However, there were some really great examples Google put out of apps built using HTML/CSS/JS. I decided to make a TV-optimized web app using that route, not only to learn how to design for large screens, but to also give myself a project to get into more jQuery.
As far as what app to build, I decided on making a Dribbble app because Tyler Gaw had already put together a great jQuery plugin for the Dribbble API called Jribbble. Using that plugin I just started throwing stuff together and designing as I went. Google put together some great documentation for both designing and developing web apps for GoogleTV that I kept referring back to.
After some random hours spent in my free time spread out over a few weeks I finally had something to release. I named the app “Jumbbbotron” and it works on both GoogleTV and WebKit browsers. I haven’t tried on other things like XBox, Wii or Boxee. It looks great on the iPad and other tablets too, although there are some interactions and bugs to work out on that front.
While building Jumbbbotron I was also able to incorporate some key things that helped the TV-optimized experience:
- Directional keypad navigation
- TV-optimized design
- Using the Play/Pause button to start/stop “Slideshow Mode” (or the “P” key if your in a desktop browser)
- Horizontal scrolling instead of vertical scrolling
- Using local storage for preferences
Overall, I felt I met my goal of learning more about designing for TV and more about jQuery to create a nice TV-optimized experience. There definitely some fine-tuning left to be done, which I’ve started logging. I also found some areas for improvement on Google’s part, that have also been mentioned elsewhere, like:
- The ability to specify a bookmark image for a web app, kinda like when you add a bookmark to your home screen in Mobile Safari. Right now if you bookmark a web page on Google TV you get a screenshot of the page.
- For some reason the Next/Previous media buttons weren’t registering, which I was hoping to use in “Slideshow Mode”
Visit the apps web page or play with the app
Tags: dribbble, google tv, jumbbbotron