The Web Design Revolution Will Be Televised

The Treehouse Show with Nick Pettit and Jason Seifer

Over the years I’ve tried out a myriad of set top boxes including Apple TV, Roku, XBOX 360, and so on. More recent developments like Google TV and Apple’s rumored television entry seem promising, but presently, I have not found a device that can match the usability and capabilities of a regular computer. In my living room I have my gaming PC hooked up to a 55-inch television and it’s freaking great. This is my preferred method for watching videos on Treehouse, Netflix, Amazon, and iTunes. In addition, browsing the web and watching viral videos (Gangam Style, anyone?) is much more fun with a big screen and big speakers. However, the general problem with this setup is that text is too difficult to read from the couch. I often find myself increasing the zoom level of the page, or just squinting.

Most of us designers and developers aren’t thinking about the 10-foot experience and designing web pages that look good on televisions; and this is totally understandable. Why should we care about designing for the TV right now? The options for browsing the web on a TV simply aren’t that great. Gaming consoles and set top boxes with built in browsers are usually lacking a useful keyboard. And then there’s “smart” televisions, which are still pretty stupid: the user interfaces are poorly designed and the remotes are even worse. Beyond a few rare exceptions, browsing the web on these devices feels like wasted opportunity.

However, just because things seem crude now doesn’t mean they’ll always be that way. I have a strong suspicion that a killer app or some obvious shift in mindshare is right around the corner. Apple is poised to revolutionize the television space in the same way that they revolutionized phones and Google is also making a clear push into the living room with Google TV.

A photograph of an old television.

No, this is not Google TV. It’s just a cool photo. Photo used under Creative Commons from Sarah Reid.

Let’s go back in time and compare a similar situation. Over the last decade, we’ve seen incredible innovation in the mobile market. The epic battle for digital glory between iOS and Android overshadows the mobile landscape just prior to smartphones. There were “feature phones” that touted color screens, digital cameras, basic music players, and so on. They seemed novel at the time, but those were all just stepping stones leading up to a need for serious software. Right now, software on televisions feels like an afterthought, as was the case on phones just a decade ago. This is probably going to change soon.

In addition to watching video, I also use my gaming PC to… you know… play video games. Like many PC gamers, I use Steam to make digital purchases rather than bother with physical media. Recently, Valve Software released a beta update to Steam called “Big Picture” which allows the user to launch a television-optimized interface.

Photograph of a living room with the Steam logo on the television.

Big Picture means that more people are combining their PCs and HDTVs.

I gave it a whirl and I was very impressed. Big Picture is one of those rare moments when the beauty of a giant screen combines with the usability of a mouse and keyboard. This sparked two key thoughts:

  • Several of my friends use the PC+TV combo, but I never thought it was common. Steam is used by millions of people, so now I’m questioning this assumption. Is this becoming a popular thing? How would we be able to tell?
  • Computer software in the living room can be awesome if it’s done right. There’s a lot of potential waiting to be unlocked.

The new Steam client also included a web browser. By contrast, this was a disappointing experience. The type and imagery up until that point were easy to see from the couch, but web pages still had the same tiny text and pictures. It’s not Valve’s fault though; it’s the web community’s fault. Again, beyond the geeky PC+TV setup, most people don’t surf on the big screen, so there’s not a huge push to design for this.

The obvious approach feels like responsive web design. The problem is that RWD relies on responding to the screen resolution and not the screen size as measured in inches. A 21-inch iMac has a screen resolution of 1920 pixels by 1080 pixels, just like a 1080p television at 55-inches. Please correct me if I’m wrong here, but from my own limited research, I think technical limitations make it nigh impossible to distinguish between a television and a computer monitor. Here’s why:

  • There’s no way to detect the size of a screen in inches. I would love to be wrong about this, so please let me know if you have a solution!
  • It might be possible to target smart TVs and set-top boxes with user agent device detection; Categorizr is working on building up this database. Still, this doesn’t feel generalized enough to work long term. It also won’t work for the PC+TV setup.
  • Jason Grigsby gave an amazing talk on this subject at BDConf. In particular, I appreciated his valuable research at electronics stores and his exploration into the “tv” media type. The short answer is, the tv media type is pretty much useless.

There’s one glimmer of hope I’m still researching; I think the “resolution” media query feature could be useful in determining the size of a screen in inches. I would need to do some more hands on experimentation, but my assumption is that if you can figure out the screen resolution and the DPI, it seems like it should be possible to work backwards and get a screen size. Based on this information, you can make more informed design decisions and use responsive design to show an appropriate television interface. The problem with the DPI media feature is that it’s not supported in webkit based browsers like Chrome and Safari; a major chunk of the browser market.

Technical issues aside, I have to believe that a solid web experience is coming to the living room sooner rather than later. It’s time to start thinking big.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

One comment on “The Web Design Revolution Will Be Televised

  1. We also need proof of play as well as other data that soon makes itself apparent. Remember, digital signage preceded connected TV both being fraternal twins so to speak. The digital signage platform vendors have a significant lead in working out business related concerns that those of us using TV devices can learn from.