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

Transcript

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

   View Slide

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

   View Slide

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/
   

   View Slide

4. There is a market for the web on your TV
   Big TV
   NAS
   Xbox
   Wii
   Media Centre PC
   

   View Slide

5. 7 million households can get the internet on their TV (39%)
   Source: Ofcom CMR 2013
   

   View Slide

6. 7% of households have a Smart TV
   

   View Slide

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
   

   View Slide

8. The Trinity of TVs: User position, User input, Device output
   Input
   Output
   Position
   Solve for all devices
   

   View Slide

9. I’m all the way over here, can you read that text?
   

   View Slide

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

    View Slide

11. At 10’ keeping the same perceived size means bigger font sizes
    http://sizecalc.com/
    

    View Slide

12. A good rule of
    thumb is to
    double the size
    of the text on
    the screen
    http://www.flickr.com/photos/vanf/5327651828
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. No keyboard, no mouse,
    no touch… no hope?
    

    View Slide

16. TVs are complicated enough as they are
    

    View Slide

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

    View Slide

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

    View Slide

19. Voice input will come along one day
    Image courtesy of Microsoft http://news.xbox.com/media
    

    View Slide

20. Assume
    there’s a
    D-pad,
    anything
    else is a
    bonus
    problem
    

    View Slide

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.
    

    View Slide

22. http://www.flickr.com/photos/earcos/4812384484
    Your Smart TV in
    2013 has the
    equivalent power
    of an iPhone 3GS
    

    View Slide

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
    

    View Slide

24. LG 2012 model TVs run this browser…
    By Ufopedia (Own work) [Public domain], via Wikimedia Commons
    

    View Slide

25. We make the web on TV bearable with add-ons
    Big TV
    NAS
    Xbox
    Wii
    Media Centre PC
    

    View Slide

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
    

    View Slide

27. Are there any solutions?
    Is it even possible to design for all devices?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. Responsive, content-driven sites work well
    

    View Slide

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

    View Slide

34. Non-responsive sites are hard to read without increasing the text size
    

    View Slide

35. Some sites look awful no matter what
    

    View Slide

36. The 10’ experience is very different from the 10” experience, and right
    now, responsive web design treats them the same
    

    View Slide

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
    

    View Slide

38. When is a TV not a TV?
    http://www.flickr.com/photos/dantaylor/7668446592
    All of these devices
    respond to
    media=“screen”
    

    View Slide

39. If we can’t tell that it’s a
    TV, perhaps we should
    ask the user
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

44. Xbox One’s focus on entertainment and media is exciting
    http://www.youtube.com/watch?v=xhe6jV-APwM
    

    View Slide

45. For TV, perhaps all you need is Chromecast
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

49. Thank you
    Tweet @steveworkman #sideviewconf
    Slides at http://speakerdeck.com/steveworkman/are-you-browsing-comfortably
    NO SIGNAL
    

    View Slide