SlideShare a Scribd company logo
1 of 178
Download to read offline
The Immobile Web




Jason Grigsby • @grigs • cloudfour.com
      Slides: bit.ly/immobilism
Follow along

     Tweets:@grigs
Slides: bit.ly/immobilism




http://www.flickr.com/photos/stevegarfield/4247757731/
The Immobile Web
http://www.flickr.com/photos/alphachimpstudio/4990357031/
Photo by Alan Light
http://www.flickr.com/photos/alan-light/216012860/
The Immobile Web
The Immobile Web
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/6301799843




If 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                              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/
The Immobile Web
“I finally cracked it.”




                          http://www.flickr.com/photos/acaben/541334636/
The Immobile Web
The Immobile Web
The Immobile Web
The Immobile Web
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 their
TV,” Apple CEO Steve Jobs said today.
“They have computers. They go to their
wide-screen TVs for entertainment. Not to
have another computer. This is a hard one for
people in the computer industry to
understand, but it's really easy for consumers
to understand. They get it.”

                               http://www.flickr.com/photos/acaben/541334636/
And so, it turns out people want keyboards. I
mean, when I started in this business one of
the biggest challenges was that people
couldn’t type.…


And if you do email of any volume, you gotta
have a keyboard. So we look at the tablet and
we think it’s gonna fail.
                            —Steve Jobs, 2003

                                http://www.flickr.com/photos/acaben/541334636/
Big opportunity is an App Store on Apple TV.
The Immobile Web
Major Brands Using Combo of Web and Native
Even Apple uses embedded webviews
The Immobile Web
The Immobile Web
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?
                 http://www.flickr.com/photos/34818713@N00/1314251273/
“By the summer of 2012, the
majority of the televisions you
see in stores will have Google
TV embedded in it”




      Photo by JD Lasica/Socialmedia.biz
      http://www.flickr.com/photos/jdlasica/5181380514/
?!?!
The Immobile Web
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%
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%
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%
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%
The Immobile Web
The Immobile Web
=
=
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/
Considering
           TVs helps
           inform how
           we build for
           mobile.




http://www.flickr.com/photos/revdancatt/3789612273/
And can help us avoid
short-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.com
Year    Brand                Model    Score     Bonus Points        Notes

2011   LG        60PZ950                  221             6

2011   Sony      KDL55HX729               222             6

2011   Sony      NSZ-GT1                  343             8    Google TV v3.2


2012   LG        47LS5700                 302             8

2012   LG        55LM62BND1               302             8

2012   Sharp     LC80LE844                281             0

2012   Samsung   UN55ES6100               229             2

2012   Samsung   UN55ES8000               244             2

2012   Sony      KDL55HX750               267             6

2012   iPhone    4S                       305             9    Running iOS 5.1


2012   Google    Chrome                   378            13    Chrome 18 on Mac




                      Total possible points: 475
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
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
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.
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.
The Immobile Web
The Immobile Web
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
Pointers




http://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 use
precisely. Easy to
 miss your target.
Well implemented
 D-pad is faster.
Plenty of
experiments.
The Immobile Web
Touchpads integrated into remotes
Voice control?
Gesture Controls?
Eventually something will stick, right?
The TV Context




http://www.flickr.com/photos/imnohero/2330548144
The TV Context




Yes, I said “Context.”
http://www.flickr.com/photos/imnohero/2330548144
Our vision of mobile
context is often wrong.




http://www.flickr.com/photos/brunauto/5062644167/
80% during
misc downtime

76% while
waiting in lines

62% while
watching TV

69% for point of
sale research


                   http://www.flickr.com/photos/missmeng/5327470961
TMI: 39% use phone
on the toilet.
Yes, we can’t know
the 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 UI




http://www.flickr.com/photos/chrisbartow/5835428673
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
The Immobile Web
“A good rule of thumb is to increase the
size of an element (such as an image or
font) 1.5x for 720p and 2.0x for 1080p
relative to the size of that element in a
normal PC browser experience.”
                       —Google TV Guide
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 what's 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.
The Immobile Web
Hover is back!
“The main interface of Google TV encourages the
use of the D-pad on the remote to make selections
on a screen -- it's likely that users will keep this
habit even on the web.”
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/
W3C’s example of four buttons

button#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
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 testing.
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. 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.
Uh oh… scrolling
                            sucks on many TVs.




http://thereisnofold.com/
Horizontal paging is preferred




http://gtv-resources.googlecode.com/svn/trunk/gtv-jquery-demo/index.html
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.
Actual resolutions differ greatly.




Browserscope report screen sizes
The Immobile Web
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/
The Immobile Web
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/190078528568569856
       https://twitter.com/#!/patrick_h_lauke/status/190078688287653889
Web developers are litter bugs.




     http://www.flickr.com/photos/jpdaigle/3393858438/
The Immobile Web
Sympathy for the Browser Makers
We need to be careful of the impact we have on the
                      world.




             http://www.flickr.com/photos/samout3/3411361042/
Detect a TV with JavaScript?
Detect a TV with JavaScript?

        Nope.
Alright fine.
                                                  We’ll use device
                                                    detection.




http://www.flickr.com/photos/77799978@N00/5351372848/
User Agent String for a 2012 LG Smart TV

Mozilla/5.0 (DirectFB; Linux; ko-KR)
AppleWebKit/534.26+ (KHTML, like
Gecko) Version/5.0 Safari/534.26+
User Agent String for a 2012 LG Smart TV

Mozilla/5.0 (DirectFB; Linux; ko-KR)
AppleWebKit/534.26+ (KHTML, like
Gecko) Version/5.0 Safari/534.26+


      Nothing we can use in that string!
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/6297487639/
Are Smart TVs the equivalent of phones
    before the iPhone was released?




           This gives me hope.
        http://www.flickr.com/photos/rhodes/6297487639/
Responsive web design still makes sense.
Choosing responsiveness, as a characteristic
shouldn’t necessarily define the wider
implementation approach. Device
Experiences (i.e. standalone sites, aimed at a
group of devices) can also be responsive,
providing the flexibility to support a much
wider range of devices.
                          —Stephanie Rieger
No.   ARTICLES                 TOPICS                  ABOUT               CONTACT               CONTRIBUTE          FEED
320
                                                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
“Testing on as many devices as possible is a great
idea in theory, but in practice it is untenable. Even if we
buy a few devices to try to cover more ground, they will be
outdated in just a few months or a year at most. So are we
supposed 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/
If you thought phones were bad,
You ain’t seen nothing yet!
Most stores have no remotes and no wi-fi




http://www.flickr.com/photos/elmada/1431918753/
Bring your phone for tethering to TVs




http://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 capacity
not listed as a spec.
Is there a Smart TV market?
Opera TV Emulator




http://www.opera.com/business/tv/emulator/
The Immobile Web
Google TV Emulator




https://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 to
look at our phones to
get directions?

One vibration for left.
Two for right.




 http://www.flickr.com/photos/williamhook/4225307113
TV resolution reinforces this idea
                        1980 px
1080 px




                                               This is
                                               HDTV
Need to think about multiple screens.




It may be multiple screens interacting together.




              http://www.apple.com/ipad/features/
Need to think about multiple screens.




It may be multiple screens interacting together.




              http://www.apple.com/ipad/features/
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/photos/rhodes/6297487639/
Netflix: posture defining different experiences
              http://www.flickr.com/photos/ezu/66815736/
“Some people at Netflix have been arguing
for a single experience across all devices. This
has never born out in any kind of testing.
Instead, Netflix has a variety of experiences
on different devices and even regions.”

           http://www.lukew.com/ff/entry.asp?1339
• 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
When we need more control to craft an experience for a
given device, how can we do so in a sustainable manner?
Yes, Smart TVs
suck right now.




                  http://www.flickr.com/photos/nathaninsandiego/4829858186/
But it would be dangerous to dismiss them.
The Immobile Web
The Immobile Web
Fundamental Truth:
We can’t predict future behavior from
  a current experience that sucks.
So even if we don’t
have to design for
  TVs today…
It behooves us to start thinking about and
planning 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 what comes next.




Flickr photo by Drift Words: http://www.flickr.com/photos/44124413076@N01/11846265/
The Immobile Web
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/
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

More Related Content

Similar to The Immobile Web

Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCJason Grigsby
 
The innovation of smart phone
The innovation of smart phoneThe innovation of smart phone
The innovation of smart phonechun_alan
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Avenga Germany GmbH
 
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof SzafranekWhat lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof SzafranekWooga
 
Smartphone Reporting Done Smarter
Smartphone Reporting Done SmarterSmartphone Reporting Done Smarter
Smartphone Reporting Done SmarterVictor Hernandez
 
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basics
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup -  360 video production basicsFairfax Sydney #mojo #mojocon Feb 2017 Meetup -  360 video production basics
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basicsJamie Andrei
 
Mobile News Madness - March 2012
Mobile News Madness - March 2012Mobile News Madness - March 2012
Mobile News Madness - March 2012Jeff Bollinger
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011davyjones
 
Fighting Fragmentation with Fragments
Fighting Fragmentation with FragmentsFighting Fragmentation with Fragments
Fighting Fragmentation with Fragmentsgrunicanada
 
SmartPhone Design and Delivery
SmartPhone Design and DeliverySmartPhone Design and Delivery
SmartPhone Design and DeliveryJason Diehl
 
Gnome, linux mobile stacks, and you
Gnome, linux mobile stacks, and youGnome, linux mobile stacks, and you
Gnome, linux mobile stacks, and youAndrew Savory
 
Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013Phil Barrett
 
PRESENTATION ON ANDROID
PRESENTATION ON ANDROIDPRESENTATION ON ANDROID
PRESENTATION ON ANDROIDRajat Kumar
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for EngineersBrian LeRoux
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
Modern Domino: Android 4.4 (KitKat)
Modern Domino:   Android 4.4 (KitKat)Modern Domino:   Android 4.4 (KitKat)
Modern Domino: Android 4.4 (KitKat)Peter Presnell
 

Similar to The Immobile Web (20)

Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
 
The innovation of smart phone
The innovation of smart phoneThe innovation of smart phone
The innovation of smart phone
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
 
What Lies Ahead for HTML5
What Lies Ahead for HTML5What Lies Ahead for HTML5
What Lies Ahead for HTML5
 
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof SzafranekWhat lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
 
Smartphone Reporting Done Smarter
Smartphone Reporting Done SmarterSmartphone Reporting Done Smarter
Smartphone Reporting Done Smarter
 
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basics
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup -  360 video production basicsFairfax Sydney #mojo #mojocon Feb 2017 Meetup -  360 video production basics
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basics
 
Mobile News Madness - March 2012
Mobile News Madness - March 2012Mobile News Madness - March 2012
Mobile News Madness - March 2012
 
2010 And Beyond
2010 And Beyond2010 And Beyond
2010 And Beyond
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
Fighting Fragmentation with Fragments
Fighting Fragmentation with FragmentsFighting Fragmentation with Fragments
Fighting Fragmentation with Fragments
 
SmartPhone Design and Delivery
SmartPhone Design and DeliverySmartPhone Design and Delivery
SmartPhone Design and Delivery
 
Gnome, linux mobile stacks, and you
Gnome, linux mobile stacks, and youGnome, linux mobile stacks, and you
Gnome, linux mobile stacks, and you
 
React Native on Android TV
React Native on Android TVReact Native on Android TV
React Native on Android TV
 
Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013
 
PRESENTATION ON ANDROID
PRESENTATION ON ANDROIDPRESENTATION ON ANDROID
PRESENTATION ON ANDROID
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 
Mobile Trends 2012
Mobile Trends 2012Mobile Trends 2012
Mobile Trends 2012
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Modern Domino: Android 4.4 (KitKat)
Modern Domino:   Android 4.4 (KitKat)Modern Domino:   Android 4.4 (KitKat)
Modern Domino: Android 4.4 (KitKat)
 

More from Jason Grigsby

Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web AppJason Grigsby
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App ChallengesJason Grigsby
 
Why Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your websiteWhy Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your websiteJason Grigsby
 
The Case for Progressive Web Apps
The Case for Progressive Web AppsThe Case for Progressive Web Apps
The Case for Progressive Web AppsJason Grigsby
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?Jason Grigsby
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and VideoJason Grigsby
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real worldJason Grigsby
 
Adaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoAdaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoJason Grigsby
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive DesignJason Grigsby
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesJason Grigsby
 
Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future Jason Grigsby
 
Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.Jason Grigsby
 
Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!Jason Grigsby
 
Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!Jason Grigsby
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.Jason Grigsby
 
Journalism and the Future of Mobile
Journalism and the Future of MobileJournalism and the Future of Mobile
Journalism and the Future of MobileJason Grigsby
 
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired  - Central Oregon Ad FedGet Me a Mobile Strategy or You're Fired  - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad FedJason Grigsby
 
Why You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeWhy You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeJason Grigsby
 
Google Talk: DOs and DON'Ts of Mobile Strategy
Google Talk: DOs and DON'Ts of Mobile StrategyGoogle Talk: DOs and DON'Ts of Mobile Strategy
Google Talk: DOs and DON'Ts of Mobile StrategyJason Grigsby
 

More from Jason Grigsby (20)

Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 
Why Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your websiteWhy Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your website
 
The Case for Progressive Web Apps
The Case for Progressive Web AppsThe Case for Progressive Web Apps
The Case for Progressive Web Apps
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and Video
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
 
Adaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoAdaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San Diego
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop Shackles
 
Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future
 
Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.
 
Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!
 
Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.
 
Journalism and the Future of Mobile
Journalism and the Future of MobileJournalism and the Future of Mobile
Journalism and the Future of Mobile
 
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired  - Central Oregon Ad FedGet Me a Mobile Strategy or You're Fired  - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad Fed
 
Why You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeWhy You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark College
 
Google Talk: DOs and DON'Ts of Mobile Strategy
Google Talk: DOs and DON'Ts of Mobile StrategyGoogle Talk: DOs and DON'Ts of Mobile Strategy
Google Talk: DOs and DON'Ts of Mobile Strategy
 

Recently uploaded

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Alexander Turgeon
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 

Recently uploaded (20)

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 

The Immobile Web

  • 1. The Immobile Web Jason Grigsby • @grigs • cloudfour.com Slides: bit.ly/immobilism
  • 2. Follow along Tweets:@grigs Slides: bit.ly/immobilism http://www.flickr.com/photos/stevegarfield/4247757731/
  • 5. Photo by Alan Light http://www.flickr.com/photos/alan-light/216012860/
  • 10. Woah… it’s just a web page?
  • 12. http://www.flickr.com/photos/adactio/6301799843 If there is a coming zombie apocalypse of devices…
  • 13. then TVs are likely the next wave. http://www.flickr.com/photos/athena1970/3935208655/
  • 14. consumes 32.7% of peak downstream traffic in U.S.
  • 15. Big enough to get its own button.
  • 16. 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/
  • 18. “I finally cracked it.” http://www.flickr.com/photos/acaben/541334636/
  • 25. The current Apple TV doesn’t have a browser…
  • 27. [People] “don’t want a computer on their TV,” Apple CEO Steve Jobs said today. “They have computers. They go to their wide-screen TVs for entertainment. Not to have another computer. This is a hard one for people in the computer industry to understand, but it's really easy for consumers to understand. They get it.” http://www.flickr.com/photos/acaben/541334636/
  • 28. And so, it turns out people want keyboards. I mean, when I started in this business one of the biggest challenges was that people couldn’t type.… And if you do email of any volume, you gotta have a keyboard. So we look at the tablet and we think it’s gonna fail. —Steve Jobs, 2003 http://www.flickr.com/photos/acaben/541334636/
  • 29. Big opportunity is an App Store on Apple TV.
  • 31. Major Brands Using Combo of Web and Native
  • 32. Even Apple uses embedded webviews
  • 35. Apps = http://www.flickr.com/photos/34818713@N00/1314251273/
  • 36. Apps = Embedded Web Views = http://www.flickr.com/photos/34818713@N00/1314251273/
  • 37. Apps = Embedded Web Views = 3rd Party Browsers http://www.flickr.com/photos/34818713@N00/1314251273/
  • 38. 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/
  • 39. “By the summer of 2012, the majority of the televisions you see in stores will have Google TV embedded in it” Photo by JD Lasica/Socialmedia.biz http://www.flickr.com/photos/jdlasica/5181380514/
  • 40. ?!?!
  • 42. 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%
  • 43. 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%
  • 44. 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%
  • 45. 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%
  • 48. =
  • 49. =
  • 50. 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/
  • 51. Considering TVs helps inform how we build for mobile. http://www.flickr.com/photos/revdancatt/3789612273/
  • 52. And can help us avoid short-sighted solutions http://www.flickr.com/photos/pss/4876189045/
  • 53. So let’s dig in shall we?
  • 55. Surprisingly good browsers in newer TVs.
  • 56. html5test.com Year Brand Model Score Bonus Points Notes 2011 LG 60PZ950 221 6 2011 Sony KDL55HX729 222 6 2011 Sony NSZ-GT1 343 8 Google TV v3.2 2012 LG 47LS5700 302 8 2012 LG 55LM62BND1 302 8 2012 Sharp LC80LE844 281 0 2012 Samsung UN55ES6100 229 2 2012 Samsung UN55ES8000 244 2 2012 Sony KDL55HX750 267 6 2012 iPhone 4S 305 9 Running iOS 5.1 2012 Google Chrome 378 13 Chrome 18 on Mac Total possible points: 475
  • 57. 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
  • 58. 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
  • 59. 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.
  • 60. More importantly, the 2012 models are much faster.
  • 61. More importantly, the 2012 models are much faster. (How fast remains a secret. No one publishes CPU speeds.)
  • 62. So what’s it like to use these TVs?
  • 64. The biggest problem is input.
  • 65. Welcome back T9. We’ve missed you.
  • 68. Which is why you see remotes like this
  • 69. Apple hasn’t solved this problem either
  • 70. Apple’s iOS Remote App Makes Life Bearable
  • 71. Nearly every manufacturer has their own apps now.
  • 72. Nearly every manufacturer has their own apps now.
  • 73. Nearly every manufacturer has their own apps now.
  • 74. One a multi-screen world. It’s of the core lessons: Multi-screen world. http://www.flickr.com/photos/marcof/5139160297/
  • 75. How does the web play in this new world?
  • 76. Two main methods of input on these TVs. (Other than linked apps)
  • 79. When done properly, D-Pad works very well. (Free Opera TV SDK Emulator!)
  • 80. When done properly, D-Pad works very well. (Free Opera TV SDK Emulator!)
  • 81. But when D-pads control on-screen pointers… Yuck!
  • 82. Pointers work well with on screen cursors, but are harder to use precisely. Easy to miss your target. Well implemented D-pad is faster.
  • 88. Eventually something will stick, right?
  • 90. The TV Context Yes, I said “Context.” http://www.flickr.com/photos/imnohero/2330548144
  • 91. Our vision of mobile context is often wrong. http://www.flickr.com/photos/brunauto/5062644167/
  • 92. 80% during misc downtime 76% while waiting in lines 62% while watching TV 69% for point of sale research http://www.flickr.com/photos/missmeng/5327470961
  • 93. TMI: 39% use phone on the toilet.
  • 94. Yes, we can’t know the mobile context. http://www.flickr.com/photos/timcaynes/158599960/
  • 95. But when it comes to TVs, context seems to matter again. http://www.flickr.com/photos/imnohero/2330548144
  • 96. Two great sources for information on designing for TVs.
  • 99. Designing for a 10-foot UI http://www.flickr.com/photos/chrisbartow/5835428673
  • 100. 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
  • 102. “A good rule of thumb is to increase the size of an element (such as an image or font) 1.5x for 720p and 2.0x for 1080p relative to the size of that element in a normal PC browser experience.” —Google TV Guide
  • 103. 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 what's 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.
  • 106. “The main interface of Google TV encourages the use of the D-pad on the remote to make selections on a screen -- it's likely that users will keep this habit even on the web.”
  • 107. 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/
  • 108. W3C’s example of four buttons button#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
  • 109. Unfortunately, only 2 of the 10 TVs I tested supported spatial navigation.
  • 110. Google TV jQuery UI Library http://code.google.com/p/gtv-resources/
  • 111. Unfortunately, I had trouble getting the Google TV jQuery UI library to work on non-Google TVs. Needs more testing.
  • 112. Both solutions require adding a layer of CSS or JS specifically to support TV interaction.
  • 113. 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.
  • 114. Uh oh… scrolling sucks on many TVs. http://thereisnofold.com/
  • 115. Horizontal paging is preferred http://gtv-resources.googlecode.com/svn/trunk/gtv-jquery-demo/index.html
  • 116. 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.
  • 117. Actual resolutions differ greatly. Browserscope report screen sizes
  • 119. No problem. We’ll adapt to the screen resolution. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  • 120. No problem. We’ll adapt to the screen resolution. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  • 122. HDTV!
  • 123. No worries. We’ll use media type. <link rel="stylesheet" media="screen" href="..."> <link rel="stylesheet" media="tv" href="...">
  • 124. None of the TVs supported the TV media type.
  • 125. 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
  • 126. Web developers are litter bugs. http://www.flickr.com/photos/jpdaigle/3393858438/
  • 128. Sympathy for the Browser Makers
  • 129. We need to be careful of the impact we have on the world. http://www.flickr.com/photos/samout3/3411361042/
  • 130. Detect a TV with JavaScript?
  • 131. Detect a TV with JavaScript? Nope.
  • 132. Alright fine. We’ll use device detection. http://www.flickr.com/photos/77799978@N00/5351372848/
  • 133. User Agent String for a 2012 LG Smart TV Mozilla/5.0 (DirectFB; Linux; ko-KR) AppleWebKit/534.26+ (KHTML, like Gecko) Version/5.0 Safari/534.26+
  • 134. User Agent String for a 2012 LG Smart TV Mozilla/5.0 (DirectFB; Linux; ko-KR) AppleWebKit/534.26+ (KHTML, like Gecko) Version/5.0 Safari/534.26+ Nothing we can use in that string!
  • 135. That sucks. http://www.flickr.com/photos/plunkmasterknows/357836855/
  • 136. What’s the solution? I don’t see many people actively working on it.
  • 137. Are Smart TVs the equivalent of phones before the iPhone was released? http://www.flickr.com/photos/rhodes/6297487639/
  • 138. Are Smart TVs the equivalent of phones before the iPhone was released? This gives me hope. http://www.flickr.com/photos/rhodes/6297487639/
  • 139. Responsive web design still makes sense.
  • 140. Choosing responsiveness, as a characteristic shouldn’t necessarily define the wider implementation approach. Device Experiences (i.e. standalone sites, aimed at a group of devices) can also be responsive, providing the flexibility to support a much wider range of devices. —Stephanie Rieger
  • 141. No. ARTICLES TOPICS ABOUT CONTACT CONTRIBUTE FEED 320 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
  • 142. “Testing on as many devices as possible is a great idea in theory, but in practice it is untenable. Even if we buy a few devices to try to cover more ground, they will be outdated in just a few months or a year at most. So are we supposed 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/
  • 143. If you thought phones were bad, You ain’t seen nothing yet!
  • 144. Most stores have no remotes and no wi-fi http://www.flickr.com/photos/elmada/1431918753/
  • 145. Bring your phone for tethering to TVs http://www.flickr.com/photos/bendodson/3367856091/
  • 146. Don’t be surprised if your data gets used…
  • 147. What are people actually expecting when they buy a smart tv? http://www.flickr.com/photos/presta/623444414/
  • 149. Is there a Smart TV market?
  • 153. Google TV Spotlight in Chrome Fullscreen http://www.google.com/tv/spotlight-gallery.html
  • 154. Google TV Spotlight in Chrome Fullscreen http://www.google.com/tv/spotlight-gallery.html
  • 155. What lessons can we take away from TVs?
  • 156. 320 px Too much focus on the smaller screen.
  • 157. Why do we need to look at our phones to get directions? One vibration for left. Two for right. http://www.flickr.com/photos/williamhook/4225307113
  • 158. TV resolution reinforces this idea 1980 px 1080 px This is HDTV
  • 159. Need to think about multiple screens. It may be multiple screens interacting together. http://www.apple.com/ipad/features/
  • 160. Need to think about multiple screens. It may be multiple screens interacting together. http://www.apple.com/ipad/features/
  • 161. What does TV tell us about context?
  • 162. What does TV tell us about context? No context Context?
  • 163. 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/
  • 164. Netflix: posture defining different experiences http://www.flickr.com/photos/ezu/66815736/
  • 165. “Some people at Netflix have been arguing for a single experience across all devices. This has never born out in any kind of testing. Instead, Netflix has a variety of experiences on different devices and even regions.” http://www.lukew.com/ff/entry.asp?1339
  • 166. • 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
  • 167. When we need more control to craft an experience for a given device, how can we do so in a sustainable manner?
  • 168. Yes, Smart TVs suck right now. http://www.flickr.com/photos/nathaninsandiego/4829858186/
  • 169. But it would be dangerous to dismiss them.
  • 172. Fundamental Truth: We can’t predict future behavior from a current experience that sucks.
  • 173. So even if we don’t have to design for TVs today…
  • 174. It behooves us to start thinking about and planning for what it will be like to do so…
  • 175. 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/
  • 177. 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/
  • 178. 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