Slide 1

Slide 1 text

e Immobile Web Jason Grigsby • @grigs • cloudfour.com Slides: bit.ly/immobile-web

Slide 2

Slide 2 text

Follow along @grigs bit.ly/immobile-web http://www.flickr.com/photos/stevegarfield/4247757731/

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

http://www.flickr.com/photos/alphachimpstudio/4990357031/

Slide 5

Slide 5 text

Photo by Alan Light http://www.flickr.com/photos/alan-light/216012860/

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Image source: http://gigaom.com/video/99-dollar-logitech-revue-worth-buying/

Slide 9

Slide 9 text

Vimeo on Google TV

Slide 10

Slide 10 text

Woah… it’s just a web page?

Slide 11

Slide 11 text

View in Couch Mode

Slide 12

Slide 12 text

If there is a coming zombie apocalypse of devices… http://www.flickr.com/photos/adactio/6301799843

Slide 13

Slide 13 text

then TVs are likely the next wave. http://www.flickr.com/photos/athena1970/3935208655/

Slide 14

Slide 14 text

consumes 32.7% of peak downstream traffic in U.S.

Slide 15

Slide 15 text

Big enough to get its own button.

Slide 16

Slide 16 text

88% tablet 86% smartphone People often use mobile while watching tv. 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/

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

http://www.flickr.com/photos/acaben/541334636/ “I nally cracked it.”

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

http://www.flickr.com/photos/yamagatacamille/4267887034/

Slide 24

Slide 24 text

http://allthingsd.com/20091111/nokia-apple/

Slide 25

Slide 25 text

e current Apple TV doesn’t have a browser…

Slide 26

Slide 26 text

http://www.flickr.com/photos/acaben/541334636/

Slide 27

Slide 27 text

[People] “don’t want a computer on their TV,” Apple CEO Steve Jobs said today. “ ey have computers. ey go to their wide-screen TVs for entertainment. Not to have another computer. is is a hard one for people in the computer industry to understand, but it's really easy for consumers to understand. ey get it.” http://www.flickr.com/photos/acaben/541334636/

Slide 28

Slide 28 text

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/

Slide 29

Slide 29 text

Big opportunity is an App Store on Apple TV.

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Major Brands Using Combo of Web and Native

Slide 32

Slide 32 text

Even Apple uses embedded webviews

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Apps = http://www.flickr.com/photos/34818713@N00/1314251273/

Slide 36

Slide 36 text

Apps = http://www.flickr.com/photos/34818713@N00/1314251273/ Embedded Web Views =

Slide 37

Slide 37 text

Apps = http://www.flickr.com/photos/34818713@N00/1314251273/ Embedded Web Views =3rd Party Browsers

Slide 38

Slide 38 text

Apps = If that is true, don’t you think Apple will ship Safari? http://www.flickr.com/photos/34818713@N00/1314251273/ Embedded Web Views =3rd Party Browsers

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

?!?!

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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 ?

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

=

Slide 49

Slide 49 text

=

Slide 50

Slide 50 text

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/ Will Google TV follow Android’s path?

Slide 51

Slide 51 text

Considering TVs helps inform how we build for mobile. http://www.flickr.com/photos/revdancatt/3789612273/

Slide 52

Slide 52 text

And can help us avoid short-sighted solutions http://www.flickr.com/photos/pss/4876189045/

Slide 53

Slide 53 text

So let’s dig in shall we?

Slide 54

Slide 54 text

First, the good news.

Slide 55

Slide 55 text

Surprisingly good browsers in newer TVs.

Slide 56

Slide 56 text

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 html5test.com Total possible points: 475

Slide 57

Slide 57 text

• backgroundsize • borderimage • borderradius • boxshadow • canvas • canvastext • csstransforms • csstransitions • fontface • generatedcontent • hashchange • hsla • input:autofocus • input:max • input:min • input:pattern • input:required • input:step • multiplebgs • opacity • postmessage • rgba • sessionstorage • smil • svg • svgclippaths • textshadow 100% of Smart TVs tested support

Slide 58

Slide 58 text

• localstorage • applicationcache • csscolumns • cssgradients • history • input:multiple • input:placeholder • inputtypes:email • inputtypes:number • inputtypes:search • inputtypes:tel • inputtypes:url • webworkers • audio:m4a • audio:mp3 • cssanimations • cssre ections • draganddrop • exbox-legacy • inputtypes:range • video:h264 • websqldatabase 70% or more support

Slide 59

Slide 59 text

• websockets • inlinesvg • inputtypes:date • inputtypes:datetime • inputtypes:datetime- local • inputtypes:month • inputtypes:time • inputtypes:week • input:autocomplete • input:list • geolocation • indexeddb • inputtypes:color • audio:wav • webgl • audio:ogg • csstransforms3d • exbox • touch • video:ogg • video:webm • audio* • video* Poor support for the following * is has to be a mistake.

Slide 60

Slide 60 text

More importantly, the 2012 models are much faster.

Slide 61

Slide 61 text

More importantly, the 2012 models are much faster. (How fast remains a secret. No one publishes CPU speeds.)

Slide 62

Slide 62 text

So what’s it like to use these TVs?

Slide 63

Slide 63 text

http://www.flickr.com/photos/nathaninsandiego/4829858186/

Slide 64

Slide 64 text

e biggest problem is input.

Slide 65

Slide 65 text

Welcome back T9. We’ve missed you.

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Which is why you see remotes like this

Slide 69

Slide 69 text

Apple hasn’t solved this problem either

Slide 70

Slide 70 text

Apple’s iOS Remote App Makes Life Bearable

Slide 71

Slide 71 text

Nearly every manufacturer has their own apps now.

Slide 72

Slide 72 text

Nearly every manufacturer has their own apps now.

Slide 73

Slide 73 text

Nearly every manufacturer has their own apps now.

Slide 74

Slide 74 text

One of the core lessons: Multi-screen world. It’s a multi-screen world. http://www.flickr.com/photos/marcof/5139160297/

Slide 75

Slide 75 text

How does the web play in this new world?

Slide 76

Slide 76 text

Two main methods of input on these TVs. (Other than linked apps)

Slide 77

Slide 77 text

D-pads

Slide 78

Slide 78 text

Pointers http://thecoolgadgets.com/lg-magic-motion-remote-control-updating-with-3d-button-gesture-and-voice-recognition/

Slide 79

Slide 79 text

When done properly, D-Pad works very well. (Free Opera TV SDK Emulator!)

Slide 80

Slide 80 text

When done properly, D-Pad works very well. (Free Opera TV SDK Emulator!)

Slide 81

Slide 81 text

But when D-pads control on-screen pointers… Yuck!

Slide 82

Slide 82 text

Pointers work well with on screen cursors, but are harder to use precisely. Easy to miss your target. Well implemented D-pad is faster.

Slide 83

Slide 83 text

Plenty of experiments.

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

Touchpads integrated into remotes

Slide 86

Slide 86 text

Voice control?

Slide 87

Slide 87 text

Gesture Controls?

Slide 88

Slide 88 text

Eventually something will stick, right?

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

e TV Context Yes, I said “Context.” http://www.flickr.com/photos/imnohero/2330548144

Slide 91

Slide 91 text

Two great sources for information on designing for TVs

Slide 92

Slide 92 text

http://dev.opera.com/articles/view/creating-web-content-for-tv/

Slide 93

Slide 93 text

https://developers.google.com/tv/web/docs/design_for_tv

Slide 94

Slide 94 text

http://www.flickr.com/photos/chrisbartow/5835428673 Designing for a 10-foot UI

Slide 95

Slide 95 text

• Limit paragraphs to 90 words • Break into small chunks • Line length: 5-7 words • Body text around 21pt on 720p and 28pt on 1080p • Add more leading • Minimum font size of 22px • Line length: 10 words or less • Generous leading Making text easy to read Google Opera

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

“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

Slide 98

Slide 98 text

• When designing a web page for TV, the viewable area should display less information overall, and what's there should focus on a con ned set of tasks (even consider performing their desired task automatically or select by default). • Primary activity often revolves around quick information look- up (for instance, cast and crew details for a particular movie, weather reports, TV listings) and quick access to services. Web content for TV should therefore be optimised — in terms of overall presentation, navigation and functionality — and task- focused, giving quick and clear access to all relevant features and information. Optimize for tasks Google Opera

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

Hover is back!

Slide 101

Slide 101 text

“ e 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.”

Slide 102

Slide 102 text

/* CSS */ #copyright { nav-down: #logo; } CSS3 Basic User Interface speci cation for directional focus navigation http://dev.opera.com/articles/view/tweaking-spatial-navigation-for-tv-browsing/

Slide 103

Slide 103 text

button#b1 { nav-index:1; nav-right:#b2; nav-left:#b4; nav-down:#b2; nav-up:#b4; } button#b2 { nav-index:2; nav-right:#b3; nav-left:#b1; nav-down:#b3; nav-up:#b1; } W3C’s example of four buttons button#b3 { nav-index:3; nav-right:#b4; nav-left:#b2; nav-down:#b4; nav-up:#b2; } button#b4 { nav-index:4; nav-right:#b1; nav-left:#b3; nav-down:#b1; nav-up:#b3; } http://www.w3.org/TR/css3-ui/#nav-dir

Slide 104

Slide 104 text

Unfortunately, only 2 of the 10 TVs I tested supported spatial navigation.

Slide 105

Slide 105 text

Google TV jQuery UI Library http://code.google.com/p/gtv-resources/

Slide 106

Slide 106 text

Unfortunately, I had trouble getting the Google TV jQuery UI library to work on non-Google TVs. Needs more testing.

Slide 107

Slide 107 text

Both solutions require adding a layer of CSS or JS speci cally to support TV interaction. Interactions map to normal keystrokes which could cause unintended outcomes.

Slide 108

Slide 108 text

• Google TV may not be able to render a page as quickly as your workstation. Performance Challenges Google Opera • Modest hardware. Somewhere between high-end smart 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.

Slide 109

Slide 109 text

http://thereisnofold.com/ Uh oh… scrolling sucks on many TVs.

Slide 110

Slide 110 text

Horizontal paging is preferred http://gtv-resources.googlecode.com/svn/trunk/gtv-jquery-demo/index.html

Slide 111

Slide 111 text

Possible Screen Resolutions NTSC PAL Standard Definition (SDTV) 720x480 720x576 Enhanced Definition (EDTV) 720x480 progressive screen 720x576 progressive High definition (HDTV) 1280×720 (720p) 1980x1080 (1080i/p) 1280×720 (720p) 1980x1080 (1080i/p)

Slide 112

Slide 112 text

http://www.flickr.com/photos/horrortaxi/111625808/

Slide 113

Slide 113 text

http://www.flickr.com/photos/horrortaxi/114911713

Slide 114

Slide 114 text

• Only HDTVs. • 720p and 1080i/p • e exact pixel dimensions of the display varies by TV manufacturer. • Provides an auto-zoom feature which you need to design for or around. Supporting different screen resolutions Google Opera • Most modern web-enabled TVs support 1280×720 as a minimum resolution. • 720p content is usually upscaled • Virtual resolutions — as an example, the Nintendo Wii has a virtual width of 800 pixels. Height varies based on the type of TV (4:3 or 16:9 aspect ratio) and user settings.

Slide 115

Slide 115 text

Browserscope report screen sizes Actual resolutions differ greatly.

Slide 116

Slide 116 text

Be aware of overscan issues http://www.flickr.com/photos/geektechnique/2476319455/

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

No problem. We’ll adapt to the screen resolution. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

Slide 119

Slide 119 text

No problem. We’ll adapt to the screen resolution. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

HDTV!

Slide 122

Slide 122 text

No worries. We’ll use media type.

Slide 123

Slide 123 text

None of the TVs supported the TV media type.

Slide 124

Slide 124 text

https://twitter.com/#!/patrick_h_lauke/status/190078528568569856 https://twitter.com/#!/patrick_h_lauke/status/190078688287653889 Media types are useless except for screen and print.

Slide 125

Slide 125 text

Web developers are litter bugs. http://www.flickr.com/photos/jpdaigle/3393858438/

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

Sympathy for the Browser Makers

Slide 128

Slide 128 text

We need to be careful of the impact we have on the world. http://www.flickr.com/photos/samout3/3411361042/

Slide 129

Slide 129 text

Detect a TV with JavaScript?

Slide 130

Slide 130 text

Detect a TV with JavaScript? Nope.

Slide 131

Slide 131 text

http://www.flickr.com/photos/77799978@N00/5351372848/ Alright ne. We’ll use device detection.

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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 Nothing we can use in that string!

Slide 134

Slide 134 text

at sucks. http://www.flickr.com/photos/plunkmasterknows/357836855/

Slide 135

Slide 135 text

What’s the solution? Honestly, I don’t see anyone actively working on it.

Slide 136

Slide 136 text

Are Smart TVs the equivalent of phones before the iPhone was released? http://www.flickr.com/photos/rhodes/6297487639/

Slide 137

Slide 137 text

Are Smart TVs the equivalent of phones before the iPhone was released? is gives me hope. http://www.flickr.com/photos/rhodes/6297487639/

Slide 138

Slide 138 text

Responsive web design still makes sense.

Slide 139

Slide 139 text

Choosing responsiveness, as a characteristic shouldn’t necessarily de ne the wider implementation approach. Device Experiences (i.e. standalone sites, aimed at a group of devices) can also be responsive, providing the exibility to support a much wider range of devices. —Stephanie Rieger

Slide 140

Slide 140 text

ARTICLES TOPICS ABOUT CONTACT CONTRIBUTE FEED D E C E M B E R 14, 2010 Smartphone Browser Landscape by P E T E R - P A U L K O C H Published in: User Interface Design, Mobile, Mobile Design, Mobile Development Discuss this article » | Share this article » Users expect websites to work on their mobile phones. In two to three years, mobile support will become standard for any site. Web developers must add mobile web development to their skill set or risk losing clients. How do you make websites mobile compatible? The answer is obvious: By testing them on all mobile phones, and by solving the problems you encounter. But, that’s a useless answer. It’s 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. Search ALA include discussions Topics 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 exists against OSs aimed at any other market. As a result, most people focus on the struggle between iOS and Android, and ignore the rest. This has to change. Stay in better touch with customers with No. 320

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

What’s the solution? Honestly, I don’t see anyone actively working on it.

Slide 143

Slide 143 text

Most stores have no remotes and no wi- http://www.flickr.com/photos/elmada/1431918753/

Slide 144

Slide 144 text

Bring your phone for tethering to TVs http://www.flickr.com/photos/bendodson/3367856091/

Slide 145

Slide 145 text

Don’t be surprised if your data gets used…

Slide 146

Slide 146 text

What are people actually expecting when they buy a smart tv? http://www.flickr.com/photos/presta/623444414/

Slide 147

Slide 147 text

Storage capacity not listed as a spec.

Slide 148

Slide 148 text

Is there a Smart TV market?

Slide 149

Slide 149 text

Opera TV Emulator http://www.opera.com/business/tv/emulator/

Slide 150

Slide 150 text

No content

Slide 151

Slide 151 text

Google TV Emulator https://developers.google.com/tv/android/docs/gtv_emulator

Slide 152

Slide 152 text

Google TV Spotlight in Chrome Fullscreen http://www.google.com/tv/spotlight-gallery.html

Slide 153

Slide 153 text

Google TV Spotlight in Chrome Fullscreen http://www.google.com/tv/spotlight-gallery.html

Slide 154

Slide 154 text

What lessons can we take away from TVs?

Slide 155

Slide 155 text

320 px Too much focus on the smaller screen.

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

TV resolution reinforces this idea 1980 px 1080 px This is HDTV

Slide 158

Slide 158 text

It may be multiple screens interacting together. Need to think about multiple screens. http://www.apple.com/ipad/features/

Slide 159

Slide 159 text

It may be multiple screens interacting together. Need to think about multiple screens. http://www.apple.com/ipad/features/

Slide 160

Slide 160 text

What does TV tell us about context?

Slide 161

Slide 161 text

No context Context? What does TV tell us about context?

Slide 162

Slide 162 text

Do we need a new way to talk about context? http://www.flickr.com/photos/adactio/4063026852/

Slide 163

Slide 163 text

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/

Slide 164

Slide 164 text

Net ix: posture de ning different experiences http://www. ickr.com/photos/ezu/66815736/

Slide 165

Slide 165 text

“Some people at Net ix have been arguing for a single experience across all devices. is has never born out in any kind of testing. Instead, Net ix has a variety of experiences on different devices and even regions.” http://www.lukew.com/ff/entry.asp?1339

Slide 166

Slide 166 text

• 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 • ese constraints are really powerful. You need to embrace them to get to appropriate designs. http://www.lukew.com/ff/entry.asp?1339

Slide 167

Slide 167 text

When we need more control to craft an experience for a given device, how can we do so in a sustainable manner?

Slide 168

Slide 168 text

http://www.flickr.com/photos/nathaninsandiego/4829858186/ Yes, Smart TVs suck right now.

Slide 169

Slide 169 text

But it would be dangerous to dismiss them.

Slide 170

Slide 170 text

No content

Slide 171

Slide 171 text

No content

Slide 172

Slide 172 text

Fundamental Truth: We can’t extrapolate future behavior from an experience that sucks.

Slide 173

Slide 173 text

So even if we don’t have to design for TVs today…

Slide 174

Slide 174 text

It behooves us to start thinking about and planning for what it will be like to do so…

Slide 175

Slide 175 text

Flickr photo by Drift Words: http://www.flickr.com/photos/44124413076@N01/11846265/ So we won’t build solutions for today’s problems and then nd ourselves surprised by what comes next.

Slide 176

Slide 176 text

No content

Slide 177

Slide 177 text

Jason Grigsby @grigs • cloudfour.com Slides: bit.ly/immobile-web ank You! Special thanks to Patrick H. Lauke, the Google TV team, Flickr users sharing under creative commons & the kind folks at Beaverton Video Only. http://www.flickr.com/photos/sualk61/4083223760/

Slide 178

Slide 178 text

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