Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Are you browsing comfortably

Steve Workman
November 09, 2013

Are you browsing comfortably

The Responsive Web Design trend was triggered by the need to make the web presentable on small, handheld devices. Now, the Internet is encroaching on every aspect of our lives, and it won’t be long before it takes over large screens too.

How much of manufacturers’ internet TVs claims are true? Will the next generation of consoles bring the Internet to the living room, or will Chromecast be the gateway to the large screen future, and where do web developers fit in?

Lets make a web site that is suitable for the sofa

Steve Workman

November 09, 2013

More Decks by Steve Workman

Other Decks in Programming


  1. “Unlike the 1950s family, however, they are also doing their

    own thing. They are tweeting about a TV show, surfing the net or watching different content altogether on a tablet.” James Thickett, Ofcom’s Director of Research http://www.flickr.com/photos/bool eansplit/8414735791/
  2. There is a market for the web on your TV

    Big TV NAS Xbox Wii Media Centre PC
  3. Over half of all households have a games console 97%

    75% 53% 53% 51% 38% 35% 24% 22% 8% 7% Digital television DVD player Games console DVR Smartphone MP3 player DAB digital radio Tablet E-reader 3D ready TV Smart TV Household take-up of digital communications / AV devices 2013 Source: Ofcom CMR 2013
  4. The Trinity of TVs: User position, User input, Device output

    Input Output Position Solve for all devices
  5. A good rule of thumb is to double the size

    of the text on the screen http://www.flickr.com/photos/vanf/5327651828
  6. What’s the resolution of your TV? 1080p, obviously Viewport Size

    TVs Aspect Ratio 800x500 Wii 16:10 980x514 Wii U 19:10 960x540 Samsung TV 16:9 1024x574 Google TV 16:9 1041x586 Xbox 360 16:9 1094 x 928 PS3 11:10 1236x701 Xbox One 16:9 1280x720 LG TV 16:9 1920x1080 Panasonic TV 16:9
  7. “The Web browser viewport did not provide a good guide

    to how things should lay out. In fact, relying on viewport alone lead to arguably poor designs. Luke Wroblewski (@lukew) Nov 3rd 2013 http://www.lukew.com/ff/entry.asp?1817
  8. Voice input will come along one day Image courtesy of

    Microsoft http://news.xbox.com/media
  9. Q: Do you browse the internet on your TV? No.

    Experience is awful. Very occasionally No. It's slow and annoying No Rarely. It's easier to use phone/tablet/laptop which are usually all in the same room as the TV. No because the TV processor is really slow No. I find the entire process annoying and tedious.
  10. TV browsers aren’t exactly stellar Wii PS3 iOS 4 Xbox

    360 PS Vita Wii U iOS 6 Panasonic Samsung TV iOS 7 Google TV Toshiba TV Chrome (Desktop) 0 50 100 150 200 250 300 350 400 450 500 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 HTML5 Test Score
  11. LG 2012 model TVs run this browser… By Ufopedia (Own

    work) [Public domain], via Wikimedia Commons
  12. We make the web on TV bearable with add-ons Big

    TV NAS Xbox Wii Media Centre PC
  13. Scenarios DESKTOP • Position: 18” from screen • Input: keyboard

    and mouse, maybe touch • Output: high-resolution screen, large viewport, modern MOBILE TV • Position: 10’ from screen • Input: d-pad, maybe keyboard, maybe touch, maybe voice • Output: high-resolution screen, small viewport, probably old browser • Position: 6-10” from screen • Input: touch • Output: high-resolution screen, very small viewport, modern browser
  14. The 10’ experience is very different from the 10” experience,

    and right now, responsive web design treats them the same
  15. “screen size doesn’t give us a complete picture of what

    we need to know to design an appropriate interface [for TV]” Luke Wroblewski (@lukew) Oct 31st 2013 http://www.lukew.com/ff/entry.asp?1816
  16. The outlook for TV technology is good Wii PS3 iOS

    4 Xbox 360 PS Vita Wii U iOS 6 Panasonic Samsung TV iOS 7 Google TV Toshiba TV Chrome (Desktop) Xbox One PS4 0 50 100 150 200 250 300 350 400 450 500 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 HTML5 Test Score
  17. TV Represents the tip of the iceberg • TVs are

    here now, and it is easy to show a website on it • Google Glass can display websites, those screens are half an inch from your eye, but are the equivalent of a 32” TV, 8 feet away • Wearable technology is emerging and will produce more situations that we cannot predict and assume what the user will want
  18. “The number of problems we can solve automatically for our

    users are dwindling. We can’t know reliably how much bandwidth a user might have available to them, whether they’re outside or stationary, or whether they’re mirroring their display to a wider screen—or, or, or." Ethan Marcotte (@beep) Nov 2nd 2013 http://unstoppablerobotninja.com/entry/responsive-web-design-screens-and-shearing-layers/
  19. Ultimately, right now, we need to ask Input User- provided

    context Output Position Solve for user- provided screen type Solve for “TV remotes” Solve for user- provided position , and that’s ok