The Immobile Web - Speaker Deck

Slide 1

Slide 1 text

http://www.ﬂickr.com/photos/rheaney/4397863376 Jason Grigsby • @grigs • cloudfour.com The Immobile Web

Slide 2

Slide 2 text

TVs? Really? http://www.ﬂickr.com/photos/clovermountain/417511565

Slide 3

Slide 3 text

http://www.ﬂickr.com/photos/alphachimpstudio/4990357031/

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

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

Th Dream Experience - … Uploaded 2 years ago More Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS Woah… it’s a web page?

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Couch Mode + See all Centric TV’s videos / Recently viewed / Related videos Th Dream Experience - … Uploaded 2 years ago More Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago PROMOTED War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS Couch Mode + See all Centric TV’s videos / Recently viewed / Related videos Th Dream Experience - … Uploaded 2 years ago More Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago PROMOTED War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

consumes 33% of peak downstream trafﬁc in U.S.

Slide 16

Slide 16 text

Big enough to get its own button.

Slide 17

Slide 17 text

http://blog.nielsen.com/nielsenwire/online_mobile/double-vision-global-trends-in-tablet-and-smartphone-use-while-watching-tv/

Slide 18

Slide 18 text

88 % of tablet 86 % of smartphone owners use their device while watching TV. http://blog.nielsen.com/nielsenwire/online_mobile/double-vision-global-trends-in-tablet-and-smartphone-use-while-watching-tv/

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Microsoft's Xbox 360 video game console is now used more for watching movies and TV shows and listening to music online than playing video games online. —LA Times, March 2012 http://latimesblogs.latimes.com/entertainmentnewsbuzz/2012/03/xbox-more-entertainment-gaming-hbo-go-comcast-xﬁnity-mlb.html

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Xbox SmartGlass

Slide 23

Slide 23 text

“To make SmartGlass available to the devices that people already own (but best on Microsoft devices), they settled on a client cross-platform HTML5, JavaScript and JSON powered solution for Windows, Windows Phone, iOS and Android devices.” http://www.istartedsomething.com/20121104/build-2012-xbox-smartglass-powerful-developer-platform-held-back-by-limited-availability/

Slide 24

Slide 24 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.ﬂickr.com/photos/jdlasica/5181380514/

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

?!?!

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

$35 Chromecast

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Slide 31

Slide 31 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 32

Slide 32 text

http://www.ﬂickr.com/photos/acaben/541334636/ “I finally cracked it.”

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

The current Apple TV doesn’t have a browser…

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Big opportunity is an App Store on Apple TV.

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Many apps use a combo of web and native

Slide 39

Slide 39 text

Even Apple uses embedded webviews

Slide 40

Slide 40 text

We think the answer can be web standards. The world doesn’t need more proprietary platforms fragmenting the innovative efforts of developers everywhere. —Tom Conrad, Pandora CTO http://blog.pandora.com/2013/06/05/introducing-tv-pandora-com/

Slide 41

Slide 41 text

http://www.ﬂickr.com/photos/34818713@N00/1314251273/

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Considering TVs helps inform how we build for the web. http://www.ﬂickr.com/photos/revdancatt/3789612273/

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

So let’s dig in shall we?

Slide 46

Slide 46 text

http://www.ﬂickr.com/photos/jonathan_moreau/4024305358/

Slide 47

Slide 47 text

Surprisingly good browsers in newer TVs.

Slide 48

Slide 48 text

Brand Model Score Bonus Points Samsung UN55F80BN3 406 12 Toshiba 58L7300 386 16 LG 60A7400 429 8 Panasonic TCP55VT60 317 6 Sharp LC70LE857 412 8 Microsoft Xbox 360 120 5 Sony NSZ-GT1 (Google TV) 330 8 iPhone 4S running iOS 6.0 386 9 Google Chrome on Mac (v27) 463 13 html5test.com of 2013 TVs Total possible points: 500

Slide 49

Slide 49 text

Brand Model Score Samsung UN55F80BN3 55% Toshiba 58L7300 65% LG 60A7400 62% Panasonic TCP55VT60 63% Sharp LC70LE857 56% Microsoft Xbox 360 32% Sony NSZ-GT1 (Google TV) 48% iPhone 4S running iOS 6.0 56% Google Chrome on Mac (v27) 65% css3test.com of 2013 TVs 218 features tested

Slide 50

Slide 50 text

Game console browsers Game console browsers Wii U Browser is a WebKit version of NetFront More details HTML5 Test 258/500 As of December 2012. Source: html5test.com CSS3 Test 48% As of December 2012. Source: css3test.com Acid 3 Test 100% As of December 2012. Source: acid3.acidtests.org Xbox 360 HTML5 Test 120/500 As of February 2013. Source: html5test.com CSS3 Test 33% As of February 2013. Source: css3test.com Acid3 Test 100% As of February 2013. Source: acid3.acidtests.org TV consoles Devices Devices Resources Resources Anna Debenham Anna Debenham http://console.maban.co.uk/

Slide 51

Slide 51 text

So what’s it like to use these TVs?

Slide 52

Slide 52 text

http://www.ﬂickr.com/photos/nathaninsandiego/4829858186/

Slide 53

Slide 53 text

The biggest problem is input.

Slide 54

Slide 54 text

Welcome back T9. We’ve missed you.

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Which is why you see remotes like this

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Apple hasn’t solved this problem either

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Apple’s iOS Remote App Makes Life Bearable

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

Nearly every manufacturer has their own apps now.

Slide 68

Slide 68 text

http://www.ﬂickr.com/photos/marcof/5139160297/

Slide 69

Slide 69 text

It’s a multi-screen world. http://www.ﬂickr.com/photos/marcof/5139160297/

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

How does the web play in this new world?

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Larger text and fewer words.

Slide 74

Slide 74 text

Make up, down, left, right directions clear. http://images.dailytech.com/nimage/29122_large_amazon_prime_screen_5.jpg

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

-pad remote controls D

Slide 77

Slide 77 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 78

Slide 78 text

CSS3 Basic User Interface speciﬁcation for directional focus navigation http://www.w3.org/TR/css3-ui/#nav-dir 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; } 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; }

Slide 79

Slide 79 text

Unfortunately, only TVs using Opera—two 2012 models—supported spatial navigation.

Slide 80

Slide 80 text

Unfortunately, only TVs using Opera—two 2012 models—supported spatial navigation. Late breaking news: Opera is going to add spatial navigation support to Blink.

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

While the 2013 TVs did much better with the Google TV code, it didn’t work on many capable TV browsers.

Slide 83

Slide 83 text

Component Button Link Container Grid Lightbox Tab Container Menu AJAX tv.ui.Link Browser link ( element) has serveral downsides: when it's focused by browser, layout can be damaged by page scrolling to the link, browser displays link destination on the bottom of the screen which distracts user, browsers by default renders its outline which might not match the UI of app. CSS class used for decoration: tv-link HTML structure:

Link content

Click or press space or enter to go to url. Google TV features (goes to http://google.com/tv)

Slide 84

Slide 84 text

Link content

Click or press space or enter to go to url. Google TV features (goes to http://google.com/tv)

Slide 85

Slide 85 text

tv.ui.Link Browser link ( element) has serveral downsides: when it's focused by browser, layout can be damaged by page scrolling to the link, browser displays link destination on the bottom of the screen which distracts user, browsers by default renders its outline which might not match the UI of app. CSS class used for decoration: tv-link HTML structure:

Link content

Click or press space or enter to go to url. Google TV features (goes to http://google.com/tv)

Slide 86

Slide 86 text

Link content

Click or press space or enter to go to url. Google TV features (goes to http://google.com/tv)

Slide 87

Slide 87 text

Link content

Click or press space or enter to go to url. Google TV features (goes to http://google.com/tv) tv.ui.Link Browser link ( element) has serveral downsides: when it's focused by browser, layout can be damaged by page scrolling to the link, browser displays link destination on the bottom of the screen which distracts user, browsers by default renders its outline which might not match the UI of app. CSS class used for decoration: tv-link HTML structure:

Link content

Click or press space or enter to go to url. Google TV features (goes to http://google.com/tv) Wait… WTF?

Slide 88

Slide 88 text

Both solutions require adding a layer of CSS or JS speciﬁcally to support TV interaction.

Slide 89

Slide 89 text

http://www.ﬂickr.com/photos/stewc/6669743035/

Slide 90

Slide 90 text

http://www.ﬂickr.com/photos/stewc/6669743035/ TVs browsers that support d-pad, send arrow key events.

Slide 91

Slide 91 text

http://www.wasdkeyboards.com/index.php/catalog/product/gallery/id/7164/image/343/

Slide 92

Slide 92 text

If then http://www.wasdkeyboards.com/index.php/catalog/product/gallery/id/7164/image/343/

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

is undetectable. This is a recurring theme for input.

Slide 95

Slide 95 text

Browserscope report screen sizes TVs have inconsistent resolutions and overscan.

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

1080p!

Slide 100

Slide 100 text

No worries. We’ll use media type.

Slide 101

Slide 101 text

None of the TVs supported the TV media type.

Slide 102

Slide 102 text

Detect a TV with JavaScript?

Slide 103

Slide 103 text

NOPE! Detect a TV with JavaScript?

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

Mozilla/5.0 (Linux; U) AppleWebKit/ 537.4 (KHTML, like Gecko) Chrome/ 22.0.1229.79 Safari/537.4 User Agent String for a 2013 LG Smart TV

Slide 106

Slide 106 text

Mozilla/5.0 (Linux; U) AppleWebKit/ 537.4 (KHTML, like Gecko) Chrome/ 22.0.1229.79 Safari/537.4 User Agent String for a 2013 LG Smart TV Nothing that says TV in that string!

Slide 107

Slide 107 text

http://www.ﬂickr.com/photos/plunkmasterknows/357836855/

Slide 108

Slide 108 text

What’s the solution?

Slide 109

Slide 109 text

What’s the solution? At the moment, device detection is best solution.

Slide 110

Slide 110 text

What’s the solution? At the moment, device detection is best solution. We need to put pressure on TV browser makers to interoperate.

Slide 111

Slide 111 text

What about testing? http://www.ﬂickr.com/photos/tym/1255655367

Slide 112

Slide 112 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 113

Slide 113 text

If you thought phones were bad, You ain’t seen nothing yet!

Slide 114

Slide 114 text

http://www.ﬂickr.com/photos/judybaxter/4061019111

Slide 115

Slide 115 text

About About What is an "Open Device Lab"? What is an "Open Device Lab"? Contribute Contribute Help the ODL Movement Help the ODL Movement Sponsor Sponsor Donate to Open Device Labs Donate to Open Device Labs Find Find Locate an Open Device Lab Locate an Open Device Lab OpenDeviceLab.com Access a variety of devices. Worldwide. For free. 66 Open Device Labs 66 Open Device Labs across 22 countries across 22 countries 1059 devices accessible 1059 devices accessible Find the right Open Device Lab for your mission and location: washington, dc Filter by manufacturers Acer Advent Ainol Alcatel Aluratek Amazon Apple Archos Asus Barnes & Noble BlackBerry Bookeen Creative Dell EasyPix Ericsson Fujitsu Geeksphone Google HP HTC Huawei Intel Kobo LG Lenovo Microsoft Motorola Nextbook Device Lab DC Washington DC, Columbia United States 0 devices available 1 found this ODL open 1 say it is closed » More details Greyscale Colored

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

Don’t be surprised if your data gets used

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

Storage capacity not listed as a spec

Slide 121

Slide 121 text

Is there a Smart TV market?

Slide 122

Slide 122 text

http://www.ﬂickr.com/photos/darrentunnicliff/4232232092

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

http://www.ﬂickr.com/photos/playstationblog/9012525050

Slide 125

Slide 125 text

No content

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

Are TVs the equivalent of phones before the iPhone? http://www.ﬂickr.com/photos/rhodes/6297487639/

Slide 129

Slide 129 text

Are TVs the equivalent of phones before the iPhone? This gives me hope. http://www.ﬂickr.com/photos/rhodes/6297487639/

Slide 130

Slide 130 text

What lessons can we take away from TVs?

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

320 px Too much focus on the smaller screen.

Slide 134

Slide 134 text

This is HDTV. 1980 px 1080 px This is HDTV

Slide 135

Slide 135 text

Resolution does not deﬁne the optimal experience.

Slide 136

Slide 136 text

http://www.ﬂickr.com/photos/cblue98/7254221968

Slide 137

Slide 137 text

Our big challenge now is adaptive input. http://www.ﬂickr.com/photos/cblue98/7254221968

Slide 138

Slide 138 text

http://www.ﬂickr.com/photos/hellogeri/6154034099/ Two years ago, Jeremy wrote about how…

Slide 139

Slide 139 text

http://www.ﬂickr.com/photos/60415054@N00/14301113/ we told ourselves that the web was…

Slide 140

Slide 140 text

http://www.ﬂickr.com/photos/60415054@N00/14301113/

Slide 141

Slide 141 text

http://www.ﬂickr.com/photos/60415054@N00/14301113/ 640 px 480 px

Slide 142

Slide 142 text

640 px 480 px

Slide 143

Slide 143 text

No content

Slide 144

Slide 144 text

No content

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

No content

Slide 147

Slide 147 text

1024 px 768 px

Slide 148

Slide 148 text

http://www.ﬂickr.com/photos/adactio/6153481666/

Slide 149

Slide 149 text

http://www.ﬂickr.com/photos/adactio/6153481666/ Then mobile came and made us realize…

Slide 150

Slide 150 text

that it was a consensual hallucination all along. http://www.ﬂickr.com/photos/garibaldi/303085857/

Slide 151

Slide 151 text

The web never had a ﬁxed canvas. http://www.ﬂickr.com/photos/paulocarrillo/124755065/

Slide 152

Slide 152 text

Even our tools perpetuate the lie.

Slide 153

Slide 153 text

http://www.ﬂickr.com/photos/69797234@N06/7203485148/ We’ve made tremendous progress.

Slide 154

Slide 154 text

But there is another consensual hallucination. http://www.ﬂickr.com/photos/garibaldi/303085857/

Slide 155

Slide 155 text

No content

Slide 156

Slide 156 text

= =

Slide 157

Slide 157 text

No content

Slide 158

Slide 158 text

Supports hover and pointer events.

Slide 159

Slide 159 text

No content

Slide 160

Slide 160 text

No content

Slide 161

Slide 161 text

Keyboard and touch.

Slide 162

Slide 162 text

No content

Slide 163

Slide 163 text

No content

Slide 164

Slide 164 text

Even the iPhone can have a keyboard.

Slide 165

Slide 165 text

No content

Slide 166

Slide 166 text

No content

Slide 167

Slide 167 text

Are these laptops or tablets?

Slide 168

Slide 168 text

No content

Slide 169

Slide 169 text

No content

Slide 170

Slide 170 text

Desktop computer with 23” touch screen

Slide 171

Slide 171 text

No content

Slide 172

Slide 172 text

Luke nailed it. http://static.lukew.com/uniﬁed_device_design.png

Slide 173

Slide 173 text

No content

Slide 174

Slide 174 text

We can no longer make assumptions about input based on screen size or form factor. And we probably never should have.

Slide 175

Slide 175 text

No content

Slide 176

Slide 176 text

mobile desktop THE ART OF WEB DEVELOPMENT THE ART OF WEB DEVELOPMENT Web widgets THE ART OF WEB DEVELOPMENT THE ART OF WEB DEVELOPMENT Mobile widgets

Slide 177

Slide 177 text

No content

Slide 178

Slide 178 text

No content

Slide 179

Slide 179 text

No content

Slide 180

Slide 180 text

Hover state No hover state

Slide 181

Slide 181 text

Hover state Typing easier for many No hover state Typing often more difﬁcult

Slide 182

Slide 182 text

Higher precision with mouse means smaller targets possible Hover state Less precise than mouse and requires larger touch targets Typing easier for many No hover state Typing often more difﬁcult

Slide 183

Slide 183 text

Higher precision with mouse means smaller targets possible Hover state Less precise than mouse and requires larger touch targets Typing easier for many No hover state Typing often more difﬁcult Right clicking and “power” tools Single and multi-touch gestures

Slide 184

Slide 184 text

No content

Slide 185

Slide 185 text

No content

Slide 186

Slide 186 text

http://www.ﬂickr.com/photos/28096801@N05/5012309802

Slide 187

Slide 187 text

I got this. Detect touch. http://www.ﬂickr.com/photos/28096801@N05/5012309802

Slide 188

Slide 188 text

No content

Slide 189

Slide 189 text

Whatever you may think, it currently isn't possible to reliably detect whether or not the current device has a touchscreen, from within the browser. —Stu Cox, You Can’t Reliably Detect a Touch Screen http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

Slide 190

Slide 190 text

Chrome would like to turn on touch events by default. https://code.google.com/p/chromium/issues/detail?id=159527 https://docs.google.com/a/cloudfour.com/presentation/d/1-n1qyzewpagREbzW2zm0wOalq33UhbtbSkWf9mEdly8/edit#slide=id.gc2d80e5b_171

Slide 191

Slide 191 text

No content

Slide 192

Slide 192 text

Detect a mouse? Not reliably.

Slide 193

Slide 193 text

No content

Slide 194

Slide 194 text

No content

Slide 195

Slide 195 text

Surely we can detect a keyboard?

Slide 196

Slide 196 text

Surely we can detect a keyboard? NOPE

Slide 197

Slide 197 text

No content

Slide 198

Slide 198 text

Input is dynamic.

Slide 199

Slide 199 text

Input is dynamic.

Slide 200

Slide 200 text

No content

Slide 201

Slide 201 text

is undetectable. Just like every other form of input.

Slide 202

Slide 202 text

Boris Smus’s experiments responding to input.

Slide 203

Slide 203 text

Boris Smus’s experiments responding to input.

Slide 204

Slide 204 text

http://www.ﬂickr.com/photos/lyza/7382235106 Maybe we need to be more zen about input.

Slide 205

Slide 205 text

No content

Slide 206

Slide 206 text

After poking at this problem for a few weeks, my conclusion is: every desktop UI should be designed for touch now. When any desktop machine could have a touch interface, we have to proceed as if they all do. —Josh Clark http://globalmoxie.com/blog/desktop-touch-design.shtml

Slide 207

Slide 207 text

No content

Slide 208

Slide 208 text

What about those who won’t let go of their “power” interfaces? http://www.ﬂickr.com/photos/ecos/4092571213/

Slide 209

Slide 209 text

http://www.ﬂickr.com/photos/scarygami/5689980135/ One option: give them a choice.

Slide 210

Slide 210 text

No content

Slide 211

Slide 211 text

Gmail display density settings

Slide 212

Slide 212 text

Slide 213

Slide 213 text

Slide 214

Slide 214 text

Slide 215

Slide 215 text

Vimeo Couch Mode

Slide 216

Slide 216 text

No content

Slide 217

Slide 217 text

The key beneﬁt of this approach: You’re designing for user need not for a speciﬁc form factor or input.

Slide 218

Slide 218 text

http://www.ﬂickr.com/photos/raver_mikey/504815463

Slide 219

Slide 219 text

No content

Slide 220

Slide 220 text

Progressive Input?

Slide 221

Slide 221 text

Graph from Chapter 1 of Adaptive Web Design by Aaron Gustafson http://easy-readers.net/books/adaptive-web-design/

Slide 222

Slide 222 text

Graph from Chapter 1 of Adaptive Web Design by Aaron Gustafson http://easy-readers.net/books/adaptive-web-design/ Progressive enhancement contains a value judgment

Slide 223

Slide 223 text

Who are we to judge what input is better? http://www.ﬂickr.com/photos/fensterbme/4783366926

Slide 224

Slide 224 text

We need to learn to adapt. http://www.ﬂickr.com/photos/cdm/147947664/

Slide 225

Slide 225 text

http://www.ﬂickr.com/photos/nathaninsandiego/4829858186/ Yes, TVs suck right now.

Slide 226

Slide 226 text

But it would be dangerous to dismiss them.

Slide 227

Slide 227 text

No content

Slide 228

Slide 228 text

No content

Slide 229

Slide 229 text

Fundamental Truth: We can’t predict future behavior from a current experience that sucks.

Slide 230

Slide 230 text

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

Slide 231

Slide 231 text

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

Slide 232

Slide 232 text

TVs help us understand the challenges we already face.

Slide 233

Slide 233 text

Flickr photo by Drift Words: http://www.ﬂickr.com/photos/44124413076@N01/11846265/ And helps us prepare for the uncertainty of what is to come.

Slide 234

Slide 234 text

Thank You! Special thanks to Luke Wroblewski, Patrick H. Lauke, Chewy Chong, Nishant Kothary, Paul Irish, Flickr users sharing under creative commons and the kind folks at Beaverton Video Only.