An Event Apart: The Immobile Web

by Luke Wroblewski June 23, 2013

In his presentation at An Event Apart in Boston MA, Jason Grigsby walked through the latest information about the Web on TV sets and the implications for Web designers and developers. Here's my notes from his talk on The Immobile Web.

  • Google TV features applications built with Web technologies. The experience feels like TV but behind the scenes these are just Web pages.
  • The Vimeo experience on Google TV is Web-based and well done. You can actually access it on the Web by clicking on the "couch mode".
  • The next wave of the zombie device apocalypse is going to be TVs. 88/86% of people with smartphones and tablets use them while TVs are on. Human are the API between the TV and the devices in our hands. The dumb screen is on the wall and the smart screen is in your hand. If TVs were smarter they could do a lot of the work we're doing ourselves for us.
  • Netflix is 35% of downstream traffic on the Internet. Its so important that TVs ship with Netflix buttons.
  • XBox Live (online channel on the game console) is used more for entertainment (watching tV and movies) than gaming.
  • TV manufacturers are experimenting with all kinds of smarter TVs to fend off Apple's entry into the TV space. They are all afraid of being disrupted.
  • When Apple does get into the market, it is likely people will scramble to create TV experiences. The big opportunity on TVs are app stores. It will open up development on TVS to everyone like app stores did for mobile.
  • If we have apps on Apple TVs, then we'll have embedded Web views, and if we have embedded Web views, then someone will make a Web browser. If someone does, then Apple will build one too.
  • Considering TVs helps us make sure we are not being short sighted about our Web solutions.
  • The browsers on TVs are surprisingly good. They score well on HTML5 tests. 100% of smart TVs supported common CSS3 properties and a decent amount of more advanced features.
  • The 2012 and 2013 models of smart TVs are much faster due to better (dual, quad core) processors. This means rendering time is much better.
  • Xbox Smartglass is kind of like Airplay from Apple but a bit more advanced. It allows you to sync content on smartphones as videos are playing. The platform allows you to use Web technologies to create Smart Glass applications.

Tv Input

  • The experience of using smart TVs is really bad -mostly because of input. The ability to browse the web and go to URLs is broken due to poor input capabilities.
  • Smartphone apps that allow you to control TV interfaces actually work much better for browsing and text input. Nearly every TV manufacturer has released these kinds of apps now.
  • It's a multi-screen world. We need to think about how these devices work together.
  • Thinking about making your content accessible is only the first part of multi-device design.
  • How do you link a Web page on the TV to a Web page on your phone? We need to figure this out or else the Web will be behind apps again.
  • There are two main kinds of TV inputs: D-pads and pointers.
  • When done properly, D-pads can work well. When they try to control pointers, however, D-pads don't work well. Sadly this is what a lot of TV browsers do when you get to a Web page.
  • Pointers work well with screen pointers but they are hard to make precise. It is easy to miss your target using pointers.
  • TVs are experimenting with voice control, gesture controls, remote controls with keyboards and touch screens, and more.
  • One of these experiments will win out. Samsung's new remote control seems to quite understandable: it has a touchpad and a voice control feature. TV salesmen claim this is the first remote they can just hand people and they know how to use them.

The TV Context

  • Our vision of mobile context is often times wrong. We used to think that mobile context meant walking down the street accessing a phone. Data shows this definition doesn't hold up. People use mobile devices everywhere and anywhere including in front of the TV.
  • TV context is a bit more clear: 10 feet away (on couch/chair).
  • This context provides a fairly dependable set of guidelines.
  • Make text easy to read on TVs: make font sizes bigger, make line heights bigger. A good rule of thumb is to make elements (like images or fonts) 1.5x bigger for 720p and 2.0x for 1080p relative to the size of that element in a normal PC browser.
  • If you just try to solve for the retina images problem of today, you might paint your self into a corner with limited image versions (compared to what you need for TVs).
  • Google and Opera both suggest focusing on tasks vs. information retrieval in TV apps. Google goes even further and suggests you should just start tasks for users. Start playing videos automatically. You can't actually do this on iOS devices.
  • Scrolling on TVs can be slow and janky. Instead use horizontal paging. Google has a recommended JQuery library that can help with TV interactions.
  • Actual resolutions on TVs may vary. Even when TV browsers support the full screen API, they may leave browser chrome on screen. We can't use resolution as an indicator of what's a TV.
  • Can we use CSS media types? No TVs on the market use the TV media type. Media types are all mutually exclusive: if you render one, you can't render the others. All Web sites use the screen media type. So all TV vendors render screen media types.
  • Issue like these stem from the actions of Web developers. We made everything work for screen and no that TV media types would be useful, they can't be counted on.
  • Can we use Javascript or user agent strings to detect TVs? The most reliable method right now is user agent strings so if you have to built Web pages for TVs now, you can use that. There's still gaps however but not too many.
  • Are TVs the equivalent of phones before the iPhone was released? Lots of features, few people using them, the only way to target them is device detection, etc. Maybe we are in the same transition and we'll get better tools for designing for TVs in the future.
  • If you thought testing phones were bad, you haven't seen anything yet. Most of the TVs in stores aren't connected to WiFi, don't have remotes, and aren't up to date. Testing on these devices is more challenging.
  • Opera and Google TV have emulators available for testing.
  • Playstation 4 and Xbox One both feature new, powerful

Lessons from TVs

  • We've been too focused on screen resolutions and widths as an indicator of experience. These are not enough to tell us when to deliver a design appropriate for TVs.
  • We need to think about what it means to create multi-device experiences. How do these devices connect and interact?
  • TVs have some context we can count on -unlike mobile. Or is it because we are still in the feature phone era of TVs and things will change soon?
  • When we need more control to craft a specific experience for a given device, how do we do so in a sustainable manner? Posture is a critical part of understanding each device.
  • Smart TVs suck right now. Don't go build something for them yet, but don't sell their future short based on current experiences.
  • We can't predict future behavior from a current experience that sucks.
  • Even if we don't have to design for TVs today, we need to be aware of where things are going.