Your SlideShare is downloading. ×
0
The Immobile WebJason Grigsby • @grigs • cloudfour.com      Slides: bit.ly/immobilism
Follow along     Tweets:@grigsSlides: bit.ly/immobilismhttp://www.flickr.com/photos/stevegarfield/4247757731/
http://www.flickr.com/photos/alphachimpstudio/4990357031/
Photo by Alan Lighthttp://www.flickr.com/photos/alan-light/216012860/
Image source: http://gigaom.com/video/99-dollar-logitech-revue-worth-buying/
Vimeo on Google TV
Woah… it’s just a web page?
View in Couch Mode
http://www.flickr.com/photos/adactio/6301799843If there is a coming zombie apocalypse of devices…
then TVs are likely the next wave.      http://www.flickr.com/photos/athena1970/3935208655/
consumes 32.7% of peak downstream traffic in U.S.
Big enough to get its own button.
People often use mobile while watching tv.         88%                                       86%                 tablet   ...
“I finally cracked it.”                          http://www.flickr.com/photos/acaben/541334636/
http://www.flickr.com/photos/yamagatacamille/4267887034/
http://allthingsd.com/20091111/nokia-apple/
The current Apple TV doesn’t have a browser…
http://www.flickr.com/photos/acaben/541334636/
[People] “don’t want a computer on theirTV,” Apple CEO Steve Jobs said today.“They have computers. They go to theirwide-sc...
And so, it turns out people want keyboards. Imean, when I started in this business one ofthe biggest challenges was that p...
Big opportunity is an App Store on Apple TV.
Major Brands Using Combo of Web and Native
Even Apple uses embedded webviews
Apps =         http://www.flickr.com/photos/34818713@N00/1314251273/
Apps = Embedded Web Views =             http://www.flickr.com/photos/34818713@N00/1314251273/
Apps = Embedded Web Views = 3rd Party Browsers              http://www.flickr.com/photos/34818713@N00/1314251273/
Apps = Embedded Web Views = 3rd Party Browsers If that is true, don’t you think Apple will ship Safari?                 ht...
“By the summer of 2012, themajority of the televisions yousee in stores will have GoogleTV embedded in it”      Photo by J...
?!?!
Q4 2011 US LCD TV Market ShareSamsung               23.6%Vizio                 15.4%LG Electronics        12.4%Sony       ...
Q4 2011 US LCD TV Market ShareSamsung               23.6%Vizio                 15.4%LG Electronics        12.4%Sony       ...
Q4 2011 US LCD TV Market ShareSamsung               23.6%Vizio                 15.4%LG Electronics        12.4%Sony       ...
Q4 2011 US LCD TV Market Share    Samsung               23.6%    Vizio                 15.4%    LG Electronics        12.4...
=
=
Will Google TV follow Android’s path?http://www.unwiredview.com/2011/12/21/andy-rubin-%E2%80%9Candroid-daily-activations-t...
Considering           TVs helps           inform how           we build for           mobile.http://www.flickr.com/photos/r...
And can help us avoidshort-sighted solutions  http://www.flickr.com/photos/pss/4876189045/
So let’s dig in shall we?
First, the good news.
Surprisingly good browsers in newer TVs.
html5test.comYear    Brand                Model    Score     Bonus Points        Notes2011   LG        60PZ950            ...
100% of Smart TVs tested support• backgroundsize   • generatedcontent   • multiplebgs• borderimage      • hashchange      ...
70% or more support• localstorage        • inputtypes:number   • cssreflections• applicationcache    • inputtypes:search  ...
Poor support for the following• websockets             • inputtypes:week               • audio:ogg• inlinesvg             ...
More importantly, the 2012 models are much faster.
More importantly, the 2012 models are much faster.    (How fast remains a secret. No one publishes CPU speeds.)
So what’s it like to use these TVs?
http://www.flickr.com/photos/nathaninsandiego/4829858186/
The biggest problem is input.
Welcome back T9. We’ve missed you.
Which is why you see remotes like this
Apple hasn’t solved this problem either
Apple’s iOS Remote App Makes Life Bearable
Nearly every manufacturer has their own apps now.
Nearly every manufacturer has their own apps now.
Nearly every manufacturer has their own apps now.
One a multi-screen world. It’s of the core lessons:   Multi-screen world.     http://www.flickr.com/photos/marcof/5139160297/
How does the web play in this new world?
Two main methods of input on these TVs.       (Other than linked apps)
D-pads
Pointershttp://thecoolgadgets.com/lg-magic-motion-remote-control-updating-with-3d-button-gesture-and-voice-recognition/
When done properly, D-Pad works very well.          (Free Opera TV SDK Emulator!)
When done properly, D-Pad works very well.          (Free Opera TV SDK Emulator!)
But when D-pads control on-screen pointers… Yuck!
Pointers work well with on screen cursors, but are  harder to useprecisely. Easy to miss your target.Well implemented D-pa...
Plenty ofexperiments.
Touchpads integrated into remotes
Voice control?
Gesture Controls?
Eventually something will stick, right?
The TV Contexthttp://www.flickr.com/photos/imnohero/2330548144
The TV ContextYes, I said “Context.”http://www.flickr.com/photos/imnohero/2330548144
Our vision of mobilecontext is often wrong.http://www.flickr.com/photos/brunauto/5062644167/
80% duringmisc downtime76% whilewaiting in lines62% whilewatching TV69% for point ofsale research                   http:/...
TMI: 39% use phoneon the toilet.
Yes, we can’t knowthe mobile context.   http://www.flickr.com/photos/timcaynes/158599960/
But when it comes to TVs,                     context seems to matter again.http://www.flickr.com/photos/imnohero/2330548144
Two great sources for information on        designing for TVs.
http://dev.opera.com/articles/view/creating-web-content-for-tv/
https://developers.google.com/tv/web/docs/design_for_tv
Designing for a 10-foot UIhttp://www.flickr.com/photos/chrisbartow/5835428673
Making text easy to read          Google                            Opera• Limit paragraphs to 90 words    • Minimum font ...
“A good rule of thumb is to increase thesize of an element (such as an image orfont) 1.5x for 720p and 2.0x for 1080prelat...
Optimize for tasks          Google                                Opera• When designing a web page for       • Primary act...
Hover is back!
“The main interface of Google TV encourages theuse of the D-pad on the remote to make selectionson a screen -- its likely ...
CSS3 Basic User Interface specification for      directional focus navigation                   /* CSS */                 ...
W3C’s example of four buttonsbutton#b1 {                         button#b3 {	 nav-index:1;                      	 nav-inde...
Unfortunately, only 2 of the 10 TVs I tested       supported spatial navigation.
Google TV jQuery UI Library  http://code.google.com/p/gtv-resources/
Unfortunately, I had trouble getting the Google TV jQuery UI library to work on non-Google TVs.               Needs more t...
Both solutions require adding a layer of CSS or JS      specifically to support TV interaction.
Performance Challenges          Google                           Opera• Google TV may not be able to   • Modest hardware. ...
Uh oh… scrolling                            sucks on many TVs.http://thereisnofold.com/
Horizontal paging is preferredhttp://gtv-resources.googlecode.com/svn/trunk/gtv-jquery-demo/index.html
Supporting different screen resolutions          Google                            Opera• Only HDTVs.                     •...
Actual resolutions differ greatly.Browserscope report screen sizes
No problem. We’ll adapt to the screen resolution.     http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
No problem. We’ll adapt to the screen resolution.     http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
HDTV!
No worries. We’ll use media type.<link rel="stylesheet" media="screen" href="..."><link rel="stylesheet" media="tv" href="...
None of the TVs supported the TV media type.
Media types are useless except for screen and print.       https://twitter.com/#!/patrick_h_lauke/status/19007852856856985...
Web developers are litter bugs.     http://www.flickr.com/photos/jpdaigle/3393858438/
Sympathy for the Browser Makers
We need to be careful of the impact we have on the                      world.             http://www.flickr.com/photos/sam...
Detect a TV with JavaScript?
Detect a TV with JavaScript?        Nope.
Alright fine.                                                  We’ll use device                                           ...
User Agent String for a 2012 LG Smart TVMozilla/5.0 (DirectFB; Linux; ko-KR)AppleWebKit/534.26+ (KHTML, likeGecko) Version...
User Agent String for a 2012 LG Smart TVMozilla/5.0 (DirectFB; Linux; ko-KR)AppleWebKit/534.26+ (KHTML, likeGecko) Version...
That                                                          sucks.http://www.flickr.com/photos/plunkmasterknows/357836855/
What’s the solution?I don’t see many people actively working on it.
Are Smart TVs the equivalent of phones    before the iPhone was released?        http://www.flickr.com/photos/rhodes/629748...
Are Smart TVs the equivalent of phones    before the iPhone was released?           This gives me hope.        http://www....
Responsive web design still makes sense.
Choosing responsiveness, as a characteristicshouldn’t necessarily define the widerimplementation approach. DeviceExperienc...
No.   ARTICLES                 TOPICS                  ABOUT               CONTACT               CONTRIBUTE          FEED3...
“Testing on as many devices as possible is a greatidea in theory, but in practice it is untenable. Even if webuy a few dev...
If you thought phones were bad,You ain’t seen nothing yet!
Most stores have no remotes and no wi-fihttp://www.flickr.com/photos/elmada/1431918753/
Bring your phone for tethering to TVshttp://www.flickr.com/photos/bendodson/3367856091/
Don’t be surprised if your data gets used…
What are people actually expecting  when they buy a smart tv?http://www.flickr.com/photos/presta/623444414/
Storage capacitynot listed as a spec.
Is there a Smart TV market?
Opera TV Emulatorhttp://www.opera.com/business/tv/emulator/
Google TV Emulatorhttps://developers.google.com/tv/android/docs/gtv_emulator
Google TV Spotlight in Chrome Fullscreen      http://www.google.com/tv/spotlight-gallery.html
Google TV Spotlight in Chrome Fullscreen      http://www.google.com/tv/spotlight-gallery.html
What lessons can we take away from TVs?
320 px         Too much focus on         the smaller screen.
Why do we need tolook at our phones toget directions?One vibration for left.Two for right. http://www.flickr.com/photos/wil...
TV resolution reinforces this idea                        1980 px1080 px                                               Thi...
Need to think about multiple screens.It may be multiple screens interacting together.              http://www.apple.com/ip...
Need to think about multiple screens.It may be multiple screens interacting together.              http://www.apple.com/ip...
What does TV tell us about context?
What does TV tell us about context?         No context             Context?
Or is TV context different simply because we’re still in the feature phone era of Smart TVs?           http://www.flickr.com...
Netflix: posture defining different experiences              http://www.flickr.com/photos/ezu/66815736/
“Some people at Netflix have been arguingfor a single experience across all devices. Thishas never born out in any kind of...
• User posture: Stationary, Lean back, on-the-go, shared• Input capabilities: pointer/keyboard, LRUD/OSK,  Gesture/OSK• Na...
When we need more control to craft an experience for agiven device, how can we do so in a sustainable manner?
Yes, Smart TVssuck right now.                  http://www.flickr.com/photos/nathaninsandiego/4829858186/
But it would be dangerous to dismiss them.
Fundamental Truth:We can’t predict future behavior from  a current experience that sucks.
So even if we don’thave to design for  TVs today…
It behooves us to start thinking about andplanning for what it will be like to do so…
So we won’t build solutions             for today’s problems and           then find ourselves surprised               by ...
Thank You!Special thanks to Patrick H. Lauke, the Google TV team, Flickr users sharing under creative commons & the kind  ...
Get 40% off of the print and 50% off of ebook  version using code AUTHD at oreilly.com.OR Amazon link (no code): http://bit....
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
Upcoming SlideShare
Loading in...5
×

The Immobile Web

18,440

Published on

Presented at Mobilism.nl

Device diversity is about to get an order of magnitude worse. SmartTVs are hitting the market in mass this year. Sony, LG, Vizio, and Samsung are all shipping televisions with Google TV built in.

And if the rumors that Apple will release a TV this year are true, 2012 will turn out to be the year web developers start to tackle the glass screen hanging on our walls.

Why should web developers focused on mobile learn about the web on TVs? Because TVs represent the next challenge in device proliferation. They share common characteristics with their smaller brethren. They create new challenges and opportunities we haven't encountered yet. And most importantly, learning how to build for TVs helps inform our practices of building for mobile devices.

Published in: Technology, Design
2 Comments
42 Likes
Statistics
Notes
No Downloads
Views
Total Views
18,440
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
366
Comments
2
Likes
42
Embeds 0
No embeds

No notes for slide

Transcript of "The Immobile Web"

  1. 1. The Immobile WebJason Grigsby • @grigs • cloudfour.com Slides: bit.ly/immobilism
  2. 2. Follow along Tweets:@grigsSlides: bit.ly/immobilismhttp://www.flickr.com/photos/stevegarfield/4247757731/
  3. 3. http://www.flickr.com/photos/alphachimpstudio/4990357031/
  4. 4. Photo by Alan Lighthttp://www.flickr.com/photos/alan-light/216012860/
  5. 5. Image source: http://gigaom.com/video/99-dollar-logitech-revue-worth-buying/
  6. 6. Vimeo on Google TV
  7. 7. Woah… it’s just a web page?
  8. 8. View in Couch Mode
  9. 9. http://www.flickr.com/photos/adactio/6301799843If there is a coming zombie apocalypse of devices…
  10. 10. then TVs are likely the next wave. http://www.flickr.com/photos/athena1970/3935208655/
  11. 11. consumes 32.7% of peak downstream traffic in U.S.
  12. 12. Big enough to get its own button.
  13. 13. People often use mobile while watching tv. 88% 86% tablet smartphone owners say they use their device while watching TV at least once a month.http://blog.nielsen.com/nielsenwire/online_mobile/double-vision-global-trends-in-tablet- and-smartphone-use-while-watching-tv/
  14. 14. “I finally cracked it.” http://www.flickr.com/photos/acaben/541334636/
  15. 15. http://www.flickr.com/photos/yamagatacamille/4267887034/
  16. 16. http://allthingsd.com/20091111/nokia-apple/
  17. 17. The current Apple TV doesn’t have a browser…
  18. 18. http://www.flickr.com/photos/acaben/541334636/
  19. 19. [People] “don’t want a computer on theirTV,” Apple CEO Steve Jobs said today.“They have computers. They go to theirwide-screen TVs for entertainment. Not tohave another computer. This is a hard one forpeople in the computer industry tounderstand, but its really easy for consumersto understand. They get it.” http://www.flickr.com/photos/acaben/541334636/
  20. 20. And so, it turns out people want keyboards. Imean, when I started in this business one ofthe biggest challenges was that peoplecouldn’t type.…And if you do email of any volume, you gottahave a keyboard. So we look at the tablet andwe think it’s gonna fail. —Steve Jobs, 2003 http://www.flickr.com/photos/acaben/541334636/
  21. 21. Big opportunity is an App Store on Apple TV.
  22. 22. Major Brands Using Combo of Web and Native
  23. 23. Even Apple uses embedded webviews
  24. 24. Apps = http://www.flickr.com/photos/34818713@N00/1314251273/
  25. 25. Apps = Embedded Web Views = http://www.flickr.com/photos/34818713@N00/1314251273/
  26. 26. Apps = Embedded Web Views = 3rd Party Browsers http://www.flickr.com/photos/34818713@N00/1314251273/
  27. 27. Apps = Embedded Web Views = 3rd Party Browsers If that is true, don’t you think Apple will ship Safari? http://www.flickr.com/photos/34818713@N00/1314251273/
  28. 28. “By the summer of 2012, themajority of the televisions yousee in stores will have GoogleTV embedded in it” Photo by JD Lasica/Socialmedia.biz http://www.flickr.com/photos/jdlasica/5181380514/
  29. 29. ?!?!
  30. 30. Q4 2011 US LCD TV Market ShareSamsung 23.6%Vizio 15.4%LG Electronics 12.4%Sony 8.0%Toshiba 7.8%Others 32.8%
  31. 31. Q4 2011 US LCD TV Market ShareSamsung 23.6%Vizio 15.4%LG Electronics 12.4%Sony 8.0%Toshiba 7.8%Others 32.8%
  32. 32. Q4 2011 US LCD TV Market ShareSamsung 23.6%Vizio 15.4%LG Electronics 12.4%Sony 8.0%Toshiba 7.8%Others 32.8%
  33. 33. Q4 2011 US LCD TV Market Share Samsung 23.6% Vizio 15.4% LG Electronics 12.4% Sony 8.0%? Toshiba 7.8% Others 32.8%
  34. 34. =
  35. 35. =
  36. 36. Will Google TV follow Android’s path?http://www.unwiredview.com/2011/12/21/andy-rubin-%E2%80%9Candroid-daily-activations-top-700k-a-day%E2%80%9D-on-the-way-to-1-million-a-day-in-q2-2012/
  37. 37. Considering TVs helps inform how we build for mobile.http://www.flickr.com/photos/revdancatt/3789612273/
  38. 38. And can help us avoidshort-sighted solutions http://www.flickr.com/photos/pss/4876189045/
  39. 39. So let’s dig in shall we?
  40. 40. First, the good news.
  41. 41. Surprisingly good browsers in newer TVs.
  42. 42. html5test.comYear Brand Model Score Bonus Points Notes2011 LG 60PZ950 221 62011 Sony KDL55HX729 222 62011 Sony NSZ-GT1 343 8 Google TV v3.22012 LG 47LS5700 302 82012 LG 55LM62BND1 302 82012 Sharp LC80LE844 281 02012 Samsung UN55ES6100 229 22012 Samsung UN55ES8000 244 22012 Sony KDL55HX750 267 62012 iPhone 4S 305 9 Running iOS 5.12012 Google Chrome 378 13 Chrome 18 on Mac Total possible points: 475
  43. 43. 100% of Smart TVs tested support• backgroundsize • generatedcontent • multiplebgs• borderimage • hashchange • opacity• borderradius • hsla • postmessage• boxshadow • input:autofocus • rgba• canvas • input:max • sessionstorage• canvastext • input:min • smil• csstransforms • input:pattern • svg• csstransitions • input:required • svgclippaths• fontface • input:step • textshadow
  44. 44. 70% or more support• localstorage • inputtypes:number • cssreflections• applicationcache • inputtypes:search • draganddrop• csscolumns • inputtypes:tel • flexbox-legacy• cssgradients • inputtypes:url • inputtypes:range• history • webworkers • video:h264• input:multiple • audio:m4a • websqldatabase• input:placeholder • audio:mp3• inputtypes:email • cssanimations
  45. 45. Poor support for the following• websockets • inputtypes:week • audio:ogg• inlinesvg • input:autocomplete • csstransforms3d• inputtypes:date • input:list • flexbox• inputtypes:datetime • geolocation • touch• inputtypes:datetime- • indexeddb • video:ogg local • inputtypes:color • video:webm• inputtypes:month • audio:wav • audio*• inputtypes:time • webgl • video* *This has to be a mistake.
  46. 46. More importantly, the 2012 models are much faster.
  47. 47. More importantly, the 2012 models are much faster. (How fast remains a secret. No one publishes CPU speeds.)
  48. 48. So what’s it like to use these TVs?
  49. 49. http://www.flickr.com/photos/nathaninsandiego/4829858186/
  50. 50. The biggest problem is input.
  51. 51. Welcome back T9. We’ve missed you.
  52. 52. Which is why you see remotes like this
  53. 53. Apple hasn’t solved this problem either
  54. 54. Apple’s iOS Remote App Makes Life Bearable
  55. 55. Nearly every manufacturer has their own apps now.
  56. 56. Nearly every manufacturer has their own apps now.
  57. 57. Nearly every manufacturer has their own apps now.
  58. 58. One a multi-screen world. It’s of the core lessons: Multi-screen world. http://www.flickr.com/photos/marcof/5139160297/
  59. 59. How does the web play in this new world?
  60. 60. Two main methods of input on these TVs. (Other than linked apps)
  61. 61. D-pads
  62. 62. Pointershttp://thecoolgadgets.com/lg-magic-motion-remote-control-updating-with-3d-button-gesture-and-voice-recognition/
  63. 63. When done properly, D-Pad works very well. (Free Opera TV SDK Emulator!)
  64. 64. When done properly, D-Pad works very well. (Free Opera TV SDK Emulator!)
  65. 65. But when D-pads control on-screen pointers… Yuck!
  66. 66. Pointers work well with on screen cursors, but are harder to useprecisely. Easy to miss your target.Well implemented D-pad is faster.
  67. 67. Plenty ofexperiments.
  68. 68. Touchpads integrated into remotes
  69. 69. Voice control?
  70. 70. Gesture Controls?
  71. 71. Eventually something will stick, right?
  72. 72. The TV Contexthttp://www.flickr.com/photos/imnohero/2330548144
  73. 73. The TV ContextYes, I said “Context.”http://www.flickr.com/photos/imnohero/2330548144
  74. 74. Our vision of mobilecontext is often wrong.http://www.flickr.com/photos/brunauto/5062644167/
  75. 75. 80% duringmisc downtime76% whilewaiting in lines62% whilewatching TV69% for point ofsale research http://www.flickr.com/photos/missmeng/5327470961
  76. 76. TMI: 39% use phoneon the toilet.
  77. 77. Yes, we can’t knowthe mobile context. http://www.flickr.com/photos/timcaynes/158599960/
  78. 78. But when it comes to TVs, context seems to matter again.http://www.flickr.com/photos/imnohero/2330548144
  79. 79. Two great sources for information on designing for TVs.
  80. 80. http://dev.opera.com/articles/view/creating-web-content-for-tv/
  81. 81. https://developers.google.com/tv/web/docs/design_for_tv
  82. 82. Designing for a 10-foot UIhttp://www.flickr.com/photos/chrisbartow/5835428673
  83. 83. Making text easy to read Google Opera• Limit paragraphs to 90 words • Minimum font size of 22px• Break into small chunks • Line length: 10 words or less• Line length: 5-7 words • Generous leading• Body text around 21pt on 720p and 28pt on 1080p• Add more leading
  84. 84. “A good rule of thumb is to increase thesize of an element (such as an image orfont) 1.5x for 720p and 2.0x for 1080prelative to the size of that element in anormal PC browser experience.” —Google TV Guide
  85. 85. Optimize for tasks Google Opera• When designing a web page for • Primary activity often revolves TV, the viewable area should around quick information look- display less information overall, up (for instance, cast and crew and whats there should focus on details for a particular movie, a confined set of tasks (even weather reports, TV listings) and consider performing their quick access to services. Web desired task automatically or content for TV should therefore select by default). be optimised — in terms of overall presentation, navigation and functionality — and task- focused, giving quick and clear access to all relevant features and information.
  86. 86. Hover is back!
  87. 87. “The main interface of Google TV encourages theuse of the D-pad on the remote to make selectionson a screen -- its likely that users will keep thishabit even on the web.”
  88. 88. CSS3 Basic User Interface specification for directional focus navigation /* CSS */ #copyright { nav-down: #logo; } http://dev.opera.com/articles/view/tweaking-spatial-navigation-for-tv-browsing/
  89. 89. W3C’s example of four buttonsbutton#b1 { button#b3 { nav-index:1; nav-index:3; nav-right:#b2; nav-left:#b4; nav-right:#b4; nav-left:#b2; nav-down:#b2; nav-up:#b4; nav-down:#b4; nav-up:#b2;} } button#b2 { button#b4 { nav-index:2; nav-index:4; nav-right:#b3; nav-left:#b1; nav-right:#b1; nav-left:#b3; nav-down:#b3; nav-up:#b1; nav-down:#b1; nav-up:#b3;} } http://www.w3.org/TR/css3-ui/#nav-dir
  90. 90. Unfortunately, only 2 of the 10 TVs I tested supported spatial navigation.
  91. 91. Google TV jQuery UI Library http://code.google.com/p/gtv-resources/
  92. 92. Unfortunately, I had trouble getting the Google TV jQuery UI library to work on non-Google TVs. Needs more testing.
  93. 93. Both solutions require adding a layer of CSS or JS specifically to support TV interaction.
  94. 94. Performance Challenges Google Opera• Google TV may not be able to • Modest hardware. Somewhere render a page as quickly as between high-end smart your workstation. phones and low end laptops. • Avoid overly heavy and complex JavaScript. • Avoid layering and opacity. • Low limit on caching. Cannot assume assets cached. Cannot rely on cookies for subsequent session.
  95. 95. Uh oh… scrolling sucks on many TVs.http://thereisnofold.com/
  96. 96. Horizontal paging is preferredhttp://gtv-resources.googlecode.com/svn/trunk/gtv-jquery-demo/index.html
  97. 97. Supporting different screen resolutions Google Opera• Only HDTVs. • Most modern web-enabled TVs support 1280×720 as a• 720p and 1080i/p minimum resolution. • 720p content is usually• The exact pixel dimensions of upscaled the display varies by TV manufacturer. • Virtual resolutions — as an example, the Nintendo Wii• Provides an auto-zoom feature has a virtual width of 800 which you need to design for pixels. Height varies based on or around. the type of TV (4:3 or 16:9 aspect ratio) and user settings.
  98. 98. Actual resolutions differ greatly.Browserscope report screen sizes
  99. 99. No problem. We’ll adapt to the screen resolution. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  100. 100. No problem. We’ll adapt to the screen resolution. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  101. 101. HDTV!
  102. 102. No worries. We’ll use media type.<link rel="stylesheet" media="screen" href="..."><link rel="stylesheet" media="tv" href="...">
  103. 103. None of the TVs supported the TV media type.
  104. 104. Media types are useless except for screen and print. https://twitter.com/#!/patrick_h_lauke/status/190078528568569856 https://twitter.com/#!/patrick_h_lauke/status/190078688287653889
  105. 105. Web developers are litter bugs. http://www.flickr.com/photos/jpdaigle/3393858438/
  106. 106. Sympathy for the Browser Makers
  107. 107. We need to be careful of the impact we have on the world. http://www.flickr.com/photos/samout3/3411361042/
  108. 108. Detect a TV with JavaScript?
  109. 109. Detect a TV with JavaScript? Nope.
  110. 110. Alright fine. We’ll use device detection.http://www.flickr.com/photos/77799978@N00/5351372848/
  111. 111. User Agent String for a 2012 LG Smart TVMozilla/5.0 (DirectFB; Linux; ko-KR)AppleWebKit/534.26+ (KHTML, likeGecko) Version/5.0 Safari/534.26+
  112. 112. User Agent String for a 2012 LG Smart TVMozilla/5.0 (DirectFB; Linux; ko-KR)AppleWebKit/534.26+ (KHTML, likeGecko) Version/5.0 Safari/534.26+ Nothing we can use in that string!
  113. 113. That sucks.http://www.flickr.com/photos/plunkmasterknows/357836855/
  114. 114. What’s the solution?I don’t see many people actively working on it.
  115. 115. Are Smart TVs the equivalent of phones before the iPhone was released? http://www.flickr.com/photos/rhodes/6297487639/
  116. 116. Are Smart TVs the equivalent of phones before the iPhone was released? This gives me hope. http://www.flickr.com/photos/rhodes/6297487639/
  117. 117. Responsive web design still makes sense.
  118. 118. Choosing responsiveness, as a characteristicshouldn’t necessarily define the widerimplementation approach. DeviceExperiences (i.e. standalone sites, aimed at agroup of devices) can also be responsive,providing the flexibility to support a muchwider range of devices. —Stephanie Rieger
  119. 119. No. ARTICLES TOPICS ABOUT CONTACT CONTRIBUTE FEED320 DECEMBER 14, 2010 Search ALA Smartphone Browser Landscape include discussions by P E T E R - P A U L K O C H Published in: User Interface Design , Mobile , Mobile Design , Mobile Development Topics Discuss this article » | Share this article » Code Content Culture Design Mobile Process User Science Snapshot Most web designers and developers (not to mention the entire blogosphere) fall squarely in the high-end market. A cultural bias Users expect websites to work on their mobile phones. In two to three years, mobile support exists against OSs aimed will become standard for any site. Web developers must add mobile web development to their at any other market. As skill set or risk losing clients. a result, most people focus on the struggle How do you make websites mobile compatible? The answer is obvious: By testing them on all between iOS and mobile phones, and by solving the problems you encounter. But, that’s a useless answer. It’s Android, and ignore the rest. This has to change. impossible to test your designs on every mobile phone out there. Within the mobile phone landscape, there are at least ten operating systems (OSs) and fifteen browsers that require consideration. Mobile devices are expensive, and not every web developer can afford to buy five to ten of them. Testing “on all mobile phones” is impossible for most web developers. In this article, I’ll give you an overview of the mobile web market, as well as phone platforms and their browsers, so that you can decide which mobile devices to test on. Then, we’ll look at how to set up a mobile test bed. Stay in better touch with customers with
  120. 120. “Testing on as many devices as possible is a greatidea in theory, but in practice it is untenable. Even if webuy a few devices to try to cover more ground, they will beoutdated in just a few months or a year at most. So are wesupposed to buy multiple devices per year?”posted at 11:32 am on December 14, 2010 by klayon“If that’s the mobile landscape, I want no part of it.”posted at 07:22 am on December 15, 2010 by Polsonby http://www.alistapart.com/comments/smartphone-browser-landscape/
  121. 121. If you thought phones were bad,You ain’t seen nothing yet!
  122. 122. Most stores have no remotes and no wi-fihttp://www.flickr.com/photos/elmada/1431918753/
  123. 123. Bring your phone for tethering to TVshttp://www.flickr.com/photos/bendodson/3367856091/
  124. 124. Don’t be surprised if your data gets used…
  125. 125. What are people actually expecting when they buy a smart tv?http://www.flickr.com/photos/presta/623444414/
  126. 126. Storage capacitynot listed as a spec.
  127. 127. Is there a Smart TV market?
  128. 128. Opera TV Emulatorhttp://www.opera.com/business/tv/emulator/
  129. 129. Google TV Emulatorhttps://developers.google.com/tv/android/docs/gtv_emulator
  130. 130. Google TV Spotlight in Chrome Fullscreen http://www.google.com/tv/spotlight-gallery.html
  131. 131. Google TV Spotlight in Chrome Fullscreen http://www.google.com/tv/spotlight-gallery.html
  132. 132. What lessons can we take away from TVs?
  133. 133. 320 px Too much focus on the smaller screen.
  134. 134. Why do we need tolook at our phones toget directions?One vibration for left.Two for right. http://www.flickr.com/photos/williamhook/4225307113
  135. 135. TV resolution reinforces this idea 1980 px1080 px This is HDTV
  136. 136. Need to think about multiple screens.It may be multiple screens interacting together. http://www.apple.com/ipad/features/
  137. 137. Need to think about multiple screens.It may be multiple screens interacting together. http://www.apple.com/ipad/features/
  138. 138. What does TV tell us about context?
  139. 139. What does TV tell us about context? No context Context?
  140. 140. Or is TV context different simply because we’re still in the feature phone era of Smart TVs? http://www.flickr.com/photos/rhodes/6297487639/
  141. 141. Netflix: posture defining different experiences http://www.flickr.com/photos/ezu/66815736/
  142. 142. “Some people at Netflix have been arguingfor a single experience across all devices. Thishas never born out in any kind of testing.Instead, Netflix has a variety of experienceson different devices and even regions.” http://www.lukew.com/ff/entry.asp?1339
  143. 143. • User posture: Stationary, Lean back, on-the-go, shared• Input capabilities: pointer/keyboard, LRUD/OSK, Gesture/OSK• Navigation style: controls & windows, panes• Display capabilities: Hi-Res, near, far away, small, medium, large• These constraints are really powerful. You need to embrace them to get to appropriate designs. http://www.lukew.com/ff/entry.asp?1339
  144. 144. When we need more control to craft an experience for agiven device, how can we do so in a sustainable manner?
  145. 145. Yes, Smart TVssuck right now. http://www.flickr.com/photos/nathaninsandiego/4829858186/
  146. 146. But it would be dangerous to dismiss them.
  147. 147. Fundamental Truth:We can’t predict future behavior from a current experience that sucks.
  148. 148. So even if we don’thave to design for TVs today…
  149. 149. It behooves us to start thinking about andplanning for what it will be like to do so…
  150. 150. So we won’t build solutions for today’s problems and then find ourselves surprised by what comes next.Flickr photo by Drift Words: http://www.flickr.com/photos/44124413076@N01/11846265/
  151. 151. Thank You!Special thanks to Patrick H. Lauke, the Google TV team, Flickr users sharing under creative commons & the kind folks at Beaverton Video Only. Jason Grigsby @grigs • cloudfour.com Slides: bit.ly/immobilism http://www.flickr.com/photos/sualk61/4083223760/
  152. 152. Get 40% off of the print and 50% off of ebook version using code AUTHD at oreilly.com.OR Amazon link (no code): http://bit.ly/hf-mw
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×