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
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