Are you browsing comfortably

2fdb5b62030270813e22f5e17d16f6b9?s=47 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

2fdb5b62030270813e22f5e17d16f6b9?s=128

Steve Workman

November 09, 2013
Tweet

Transcript

  1. Are you browsing comfortably? Steve Workman @steveworkman #sideviewconf

  2. TV is still the centre of family entertainment http://www.flickr.com/photos/62274237@N06/5663134445/

  3. “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/
  4. There is a market for the web on your TV

    Big TV NAS Xbox Wii Media Centre PC
  5. 7 million households can get the internet on their TV

    (39%) Source: Ofcom CMR 2013
  6. 7% of households have a Smart TV

  7. 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
  8. The Trinity of TVs: User position, User input, Device output

    Input Output Position Solve for all devices
  9. I’m all the way over here, can you read that

    text?
  10. Small text is fine close up http://sizecalc.com/

  11. At 10’ keeping the same perceived size means bigger font

    sizes http://sizecalc.com/
  12. A good rule of thumb is to double the size

    of the text on the screen http://www.flickr.com/photos/vanf/5327651828
  13. 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
  14. “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
  15. No keyboard, no mouse, no touch… no hope?

  16. TVs are complicated enough as they are

  17. Smart TV remotes have tried to make input simpler, and

    failed
  18. Second-screen input apps are filling the gap http://www.flickr.com/photos/perolofforsberg/7496942606/

  19. Voice input will come along one day Image courtesy of

    Microsoft http://news.xbox.com/media
  20. Assume there’s a D-pad, anything else is a bonus problem

  21. 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.
  22. http://www.flickr.com/photos/earcos/4812384484 Your Smart TV in 2013 has the equivalent power

    of an iPhone 3GS
  23. 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
  24. LG 2012 model TVs run this browser… By Ufopedia (Own

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

    TV NAS Xbox Wii Media Centre PC
  26. 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
  27. Are there any solutions? Is it even possible to design

    for all devices?
  28. Can you make a responsive UI for all display sizes?

  29. Can you make a responsive UI for all display sizes?

  30. Can you make a responsive UI for all display sizes?

  31. Can you make a responsive UI for all display sizes?

  32. Responsive, content-driven sites work well

  33. Content sites designed for reading on small screens, also work

    well on big screens
  34. Non-responsive sites are hard to read without increasing the text

    size
  35. Some sites look awful no matter what

  36. The 10’ experience is very different from the 10” experience,

    and right now, responsive web design treats them the same
  37. “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
  38. When is a TV not a TV? http://www.flickr.com/photos/dantaylor/7668446592 All of

    these devices respond to media=“screen”
  39. If we can’t tell that it’s a TV, perhaps we

    should ask the user
  40. Couch Mode Aaron Gustafson https://github.com/easy-designs/easyCouchMode.js

  41. Couch Mode Aaron Gustafson https://github.com/easy-designs/easyCouchMode.js

  42. Pixel-based Ems-based Works great on big-text screens http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ Define media

    queries in ems
  43. 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
  44. Xbox One’s focus on entertainment and media is exciting http://www.youtube.com/watch?v=xhe6jV-APwM

  45. For TV, perhaps all you need is Chromecast

  46. 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
  47. “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/
  48. 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
  49. Thank you Tweet @steveworkman #sideviewconf Slides at http://speakerdeck.com/steveworkman/are-you-browsing-comfortably NO SIGNAL