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
Tweet

More Decks by Steve Workman

Other Decks in Programming

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