Adaptation: Why responsive design actually begins on the server

1. Adaptation why responsive design actually begins on the server... http://creativecommons.org/licenses/by/2.0 http://www.ﬂickr.com/photos/newsbiepix/4113886275

2. the tech media loves a good story... TechCrunch http://www.ﬂickr.com/photos/scobleizer/4694051328

3. 200 million iOS devices and life on the bleeding edge... http://www.ﬂickr.com/photos/scobleizer/3553486766

4. 1/3 * of the US has a smartphone ge statistics rane'll *current –w fro m 25% to 50%licity... p u se 1/3 for sim *please note http://www.ﬂickr.com/photos/scobleizer/4694051328

5. 1/3 of the US has a ...um, so 2/3 of the US does not have a smartphone?! smartphone http://www.ﬂickr.com/photos/scobleizer/4694051328

6. or if you're a fanboy feel free to use this math*... 1/2 of the US has a and 1/2 does not... smartphone n't t percentage ishe *the exac rtant for t terribly impo presentation... is purposes of th http://www.ﬂickr.com/photos/abasketofpups/2662225972

7. will save us all! http://www.ﬂickr.com/photos/scobleizer/4694051328

8. but it's really only kinda useable on few high-end devices... will save us all! http://www.ﬂickr.com/photos/scobleizer/4694051328

9. the "tech industry" ...and are we making promises we can't keep? htc Magic Android 1.6 must the " bleeding edge" e of ha ve Android devic stop... r 200 9 is now a doo http://www.ﬂickr.com/photos/whatleydude/3547624583

10. the bleeding edge...

11. original the iPhone 2007

12. iPhone 3G iPhone 2007 2008

13. iPhone 3GS iPhone 3G 2007 2008 2009

14. iPhone 4 iPhone 3G 3GS 2007 2008 2009 2010

15. 3G 3GS 4 2008 2009 2010 2011 iPhone 5...

16. side eﬀect n. a peripheral or secondary eﬀect, especially an undesirable one... http://www.thefreedictionary.com/side+effect

17. the smartphone era begins... original the iPhone 2007

18. brings touch, gestures and the real web... web touch iPhone 3G iPhone 2007 2008

19. native apps and the rise of Android... android apps iPhone 3GS iPhone 3G 2007 2008 2009

20. whither feature phones, and the further rise of Android... htc g-ﬁve samsung web os iPhone 4 iPhone 3G 3GS 2007 2008 2009 2010

21. blackberry kindle devices go mainstream nook with great expectations... htc LG samsung motorola iPhone 5... 3G 3GS 4 2008 2009 2010 2011

22. we're now in that big grey area...

23. or from a diﬀerent perspective...

24. the bleeding edge...

25. the bleeding edge... + 'ish via China opportunity

26. but we still can't see the forest for the trees... http://www.ﬂickr.com/photos/clairity/1449248189

27. 2/3 * of the US does not have a smartphone... e *or 1/2 if you'r a fanboy... http://www.ﬂickr.com/photos/centralasian/3239065547

28. last year we asked a simple question... http://www.ﬂickr.com/photos/fpat/3692425154

29. welcome to the mobile web I asked this a year ago, i'm not sure anything's changed!! if you want to use the web on a mobile device, is the purchase of an iPhone the cost of entry? http://www.ﬂickr.com/photos/sketch22/1127556671

30. to infinity and beyond... well over by 2015 50% of web traffic is expected to come from mobile devices http://www.netmagazine.com/news/uk-sees-huge-mobile-web-traffic-growth-111340

31. let me rephrase the question...

32. still the only device where the Web actually works this is rhetorical, and absurd... in 2015, if you want to use the web on a mobile device, will the purchase of an iPhone be mandatory...? http://www.ﬂickr.com/photos/dantaylor/2161663267

33. gotta get 'em all... or even want many of us cannot aﬀord to purchase every shiny new device released... http://www.ﬂickr.com/photos/bytemarks/4732726333

34. especially in the light of recent events... http://www.ﬂickr.com/photos/wagnertc/3217859975

35. http://www.ﬂickr.com/photos/chiacomo/3805139360

36. most folks have much more pressing concerns... http://www.ﬂickr.com/photos/bobolink/4706580

37. and far higher priorities... http://www.ﬂickr.com/photos/ilamont/4329364198

38. which often result in very diﬀerent purchasing decisions... http://www.ﬂickr.com/photos/timstock/535259176

39. however...

40. as lots of Android devices are now available for less than $200*.... or very close to it... ...*free is also becoming a popular option! http://www.ﬂickr.com/photos/cambodia4kidsorg/5253151186

41. and some feature phones aimed at the next billion now include WebKit ooh, touch... and a touch screen... ype Nokia C3 Touch & T S eries 40 device http://www.ﬂickr.com/photos/yoggy0/5380738918

42. every phone is now (essentially) a smartphone*... or soon will be ns of ctual deﬁnitioy - but to *a ill var 'smartphone' wey are all magic... normal folks th http://www.ﬂickr.com/photos/tanj/4432327487

43. camera, video, 3G connectivity music player, etc. large, colour touch sensitive screen a modern web browser (not WAP) (often) a real, update-able operating system loaded with everything we've come to expect from a smartphone... QWERTY keyboard and/or trackball http://www.ﬂickr.com/photos/free_programmer/4371778263

44. less vibrant screens less responsive touch screens limited or no data plan bundled lower spec RAM and/or CPU/GPU few or no OEM OS updates but not every smartphone is created equal... http://www.ﬂickr.com/photos/nechbi/3841765925

45. UNDESIRABLE this inequality creates diversity and (often) "undesirables"... http://www.ﬂickr.com/photos/handwrite/3460075040

46. "Android WebKit is the closest thing to being the IE6 of mobile development for me." - @dalmaer via http://functionsource.com/post/a-day-in-the-life-of-android-webkit-dealings http://www.ﬂickr.com/photos/blank22763/4089926742

47. this thinking creates...

48. an optimal experience for for a privileged few... http://www.ﬂickr.com/photos/carbonnyc/5140154965

49. and a missed opportunity for many more... linkedin HTML5 webapp disappointment must leeding edge" f 2009 the "b o have A ndroid device r stop... doo is once again a http://www.ﬂickr.com/photos/dumbledad/3400708183

50. 2 year old, state-of-the-art your smartphone is obsolete, please upgrade now... http://www.ﬂickr.com/photos/herval/2050815997

51. um...

52. for most folks these are not "higher priorities"... http://www.ﬂickr.com/photos/aaronpk/5328338679

53. welcome to the real world... http://www.ﬂickr.com/photos/slemmon/3971197662

54. where we learn to adapt as required... http://www.ﬂickr.com/photos/kalleboo/3536493996

55. craftivism where simply learning to knit can change your life... http://www.ﬂickr.com/photos/bosstweed/152159981

56. from your local library where borrowing books for free is beating paying for ebooks... Times Are Tough, Libraries Are Thriving http://www.nytimes.com/2009/03/15/nyregion/long-island/15libraryli.html http://www.ﬂickr.com/photos/ccacnorthlib/3553821229/

57. where Hulu, iTunes and sports bars are replacing cable services... expensive http://www.businessinsider.com/2008/3/hulu-household-why-i-got-rid-of-cable

58. and which led @grigs to pick up those clippers... http://www.ﬂickr.com/photos/kdnewton/2691125617

59. but...

60. the iPhone inspired everyone to expect more from their devices... http://www.ﬂickr.com/photos/tom_ruaat/5540148158

61. "...yeah, but people don't actually use those undesirable devices?" http://www.ﬂickr.com/photos/misterian/4084280385

62. yup

63. ...have you actually offered them anything yet? re logs, chances aail... check your in the long t you'll find them http://www.flickr.com/photos/zoetnet/4669800101/

64. small a few companies most certainly have... twitter indonesia 0.facebook OperaMini http://www.ﬂickr.com/photos/nseika/5848996146

65. us humans are amazing when it comes to adapting to new circumstances... ...do we still really need the dogs? http://www.ﬂickr.com/photos/thenationalguard/3251277781

66. the web was actually built on similar principles... http://www.ﬂickr.com/photos/tanaka/3212373419

67. "The primary design principle underlying the Web's usefulness and growth is universality. The Web should be usable by people with disabilities. It must work with any form of information, be it a document or a point of data, and information of any quality–from a silly tweet to a scholarly paper. And it should be accessible from any kind of hardware than can connect to the internet: stationary or mobile, small screen or large." ... as seen b efore @bdconf Tim Berners-Lee Long Live the Web http://www.scientiﬁcamerican.com/article.cfm?id=long-live-the-web http://www.ﬂickr.com/photos/lonelyfox/2939757714

68. unfortunately, our current mental models started back here... http://www.ﬂickr.com/photos/blakespot/2343395804

69. The Era of mobile dominance is beginning which did not prepare us for a world paul rouget taiwan africa dominated by devices like these... http://www.ﬂickr.com/photos/whiteafrican/2594981758

70. “The best, most solid way out of a crisis in a changing market is through experiment and adaptation.” Richard Branson Business Stripped Bare – Adventures of a Global Entrepreneur http://www.ﬂickr.com/photos/jedibfa/5146867827

71. <diversion> http://www.ﬂickr.com/photos/y_i/2330044065

72. short a tale of clients and servers... http://www.ﬂickr.com/photos/richardberg/2135409739

73. pastrami on rye... a client makes a request to a server... http://www.ﬂickr.com/photos/_ppo/2393063853

74. other unique clients make similar requests... yet not identical Rueben... turkey chilli dog... grilled cheese brisket... corned beef... http://www.ﬂickr.com/photos/_ppo/2393063853

75. Rueben... chilli dog... a method to track each client request is required... http://www.ﬂickr.com/photos/mrgarin/3476714113

76. as each client request is received... tra pickle... no pickle... Rueben... pastrami on rye... turkey chilli dog... Rueben... Rueben... grilled cheese brisket... corned beef... http://www.ﬂickr.com/photos/_ppo/2393063853

77. the server tailors each request to each client... 320, hold the pickle... one more 320... 150, pastrami... 210 to go... tracking (ticketing, bills, etc) analytics (what works, what doesn't) preparation (vs just-in-time) tacit knowledge http://www.ﬂickr.com/photos/_ppo/2393063853

78. ensuring they get exactly what they need... http://www.ﬂickr.com/photos/the_junes/2134127618

79. rather than everything they might not want... http://www.ﬂickr.com/photos/86624586@N00/10176570

80. <diversion/> http://www.ﬂickr.com/photos/alper/3257406961

81. ...but what does this have to do with mobile? http://www.ﬂickr.com/photos/mikeycordedda/5328343979

82. accomplish great things together working client and server can... http://www.ﬂickr.com/photos/maladjusted/2341398753

83. client

84. http://domain.org client yet unknown a client makes a request to a server...

85. http://domain.org server

86. clouds are hip these days... server http://domain.org

87. ...proﬁle please? server http://domain.org server then asks the client for it's proﬁle cookie...

88. yeah, you're going to need a proﬁle... server http://domain.org if a client doesn't have a proﬁle cookie the server creates one for it...

89. { width:{ screen:240, document:240 } } let's start with the 'default' profile... default profile *defining a 'default' baseline profile depends on your project requirements... server http://domain.org or default* notice that this makes the begin with a baseline profile assumption that basic = default that covers the very basic experience... (in other words "mobile first")

90. eww.... then...grab the client user agent string (trust me, it's more useful than you think) server http://domain.org ...oh yes, user-agent please? Mozilla/5.0 (Linux; U; Android 2.1-‐update1; en-‐gb; Nexus One Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

91. Mozilla/5.0 (Linux; U; Android 2.1-‐update1; en-‐gb; Nexus One Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 hey DeviceAtlas, wanna check this UA for me? server http://domain.org query the user agent string against a device database such as DeviceAtlas... ...or WURFL

92. Mozilla/5.0 (Linux; U; Android 2.1-‐update1; en-‐gb; Nexus One Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 { width:480, ...found it, here it comes! height:480, color-‐depth:8, touch:true, cookie:true, ... } http://deviceatlas.com DeviceAtlas proﬁle

93. { width:{ screen:240, document:240 } } default proﬁle ...hmm, I think I've seen this before? server { width:480, http://domain.org height:480, color-‐depth:8, touch:true, cookie:true, ... } DeviceAtlas proﬁle now query the user agent string against any tacit knowledge you have collected... may

94. "profile":{"width":"240"} }, "desktop": { "match":"#windows|macintosh|linux#i", "profile":{"width":"800"} tacit data }, "iphone": { "match":"#iphone#i", "profile":{"ios":"1", "width":"320", "svg":true, "canvas":true} }, "ipad": { "match":"#ipad#i", "profile":{"ios":"1", "width":"768", "svg":true, "canvas":true} }, "android": { "match":"#android#i", "profile":{"droid":"1", "width":"320", "flash":true, "canvas":true, "video":true} }, "symbian^3": { Tacit (or known) proﬁle "match":"#symbian/3#i", "profile":{"sym3":"1", "width":"360"} }, "symbian9.4": { "match":"#symbianos/9.4#i", "profile":{"sym94":"1", "width":"360"} }, "symbian9.3": { "match":"#symbianos/9.3#i", "profile":{"sym93":"1", "width":"360"} partial proﬁles are matched via }, "n73": { UA string fragments... "match":"#N73#i", "profile":{"sym91":"1", "width":"240"} }, "series602.x": { "match":"#series60/2.8|{series60/2.9}#i",

95. { width:{ tacit data screen:240, document:240 } } default profile { width:320, droid:1, yeah, I've seen this before... canvas:true, flash:true, video:true, server ... http://domain.org } Tacit (or known) profile { width:480, height:480, this tacit knowledge is gathered color-‐depth:8, touch:true, over time from other device profiles... cookie:true, ... ...or through knowledge } gained during testing DeviceAtlas profile

96. { width:{ screen:320, document:320 }, xhr:true, canvas:true, flash:false, video:true, formats:{ server h264:probably, http://domain.org ogg:false, webm:false }, offline:true } Client proﬁle merge the baseline data, with the data returned from queries into the client proﬁle...

97. cookie { width:{ document screen:320, document:320 }, xhr:true, response canvas:true, flash:false, video:true, formats:{ server h264:probably, http://domain.org ogg:false, webm:false }, offline:true } Client proﬁle write the proﬁle cookie to the doc header which will be returned to the client...

98. { width:{ screen:320, document:320 }, xhr:true, response canvas:true, profile flash:false, video:true, formats:{ server h264:probably, http://domain.org ogg:false, webm:false }, offline:true } for this client Client profile server now has a usable profile and can continue...

99. media queries are not a means using Javascript to modify of adapting content contained significant portions of the within the DOM on the client... DOM will impact performance on mobile devices... response filter server http://domain.org and adapt the server now begins to filter the content based on the properties in the client profile...

100. Adaptation Rules ensure all images are appropriately sized for client display replace any images that contain ﬁne details or text replace Flash media with an appropriate alternative response where not supported remove unnecessary markup, scripts, etc. server http://domain.org or app adaptation 'rules' will vary from site to site, but adapting <img>'s is most common...

101. Adaptation Rules ensure all images are appropriately sized for client display replace any images that contain ﬁne details or text replace Flash media with an appropriate alternative response where not supported remove unnecessary markup, scripts, etc. server http://domain.org adapt large tables as required, link to data serve appropriate video format, codec and size adapt DOM components including scripts and styles <video>, <table> and other DOM structures also require adaptation may

102. Adaptation Rules Resource Bundles ensure all images are alternate content appropriately sized for appropriate for context client display alternate DOM templates, replace any images that components & fragments contain ﬁne details or text alternate sized, formatted + replace Flash media with encoded video as required an appropriate alternative response where not supported alternate images for required breakpoints remove unnecessary markup, scripts, etc. server alternate scripts + styles http://domain.org for required client proﬁles adapt large tables as required, link to data serve appropriate video format, codec and size adapt DOM components including scripts and styles you will often require new resources

103. "pinch-‐zoom":{ "0-‐320":"resources/images/meego/pinch-‐zoom@240.png", "320-‐720":"resources/images/meego/pinch-‐zoom@320.png", Resource Bundles "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, alternate content "typing":{ "0-‐320":"resources/images/meego/typing@240.png", appropriate for context "320-‐720":"resources/images/meego/typing@320.png", "720-‐9999":"resources/images/meego/typing.png" alternate DOM templates, }, components & fragments "stay-‐safe":{ "0-‐320":"resources/images/meego/stay-‐safe@240.png", alternate sized, formatted + "320-‐720":"resources/images/meego/stay-‐safe@320.png", encoded video as required "720-‐9999":"resources/images/meego/stay-‐safe.png" }, alternate images for "swipe-‐more":{ required breakpoints "0-‐320":"resources/images/meego/swipe@240.jpg", "320-‐640":"resources/images/meego/swipe@320.jpg", "640-‐9999":"resources/images/meego/swipe.jpg" alternate scripts + styles }, for required client proﬁles "pinch-‐zoom-‐more":{ "0-‐320":"resources/images/meego/pinch-‐zoom@240.png", "320-‐720":"resources/images/meego/pinch-‐zoom@320.png", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing-‐more":{ "0-‐320":"resources/images/meego/typing@240.png", "320-‐720":"resources/images/meego/typing@320.png", "720-‐9999":"resources/images/meego/typing.png" which can be deﬁned in }, "stay-‐safe-‐more":{ any number of ways... "0-‐320":"resources/images/meego/stay-‐safe@240.png", "320-‐720":"resources/images/meego/stay-‐safe@320.png", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "location":{

104. video data images response server http://domain.org these resources can be static, cached or even dynamically generated... which would make them even more responsive

105. response server http://domain.org all content adaptation is performed on the server... before the page is downloaded

106. response server http://domain.org on the client alternate resources that may later be required are then bundled as references...

107. {} response server http://domain.org feature detection an additional proﬁle <script> is also included in the response to the client...

108. {}

109. server http://domain.org

110. client

111. { width:{ screen:480, document:480 }, xhr:true, canvas:true, flash:true, video:true, formats:{ h264:probably, ogg:true, webm:false }, offline:true } Client profile feature detection the client executes its profile <script> and updates its profile cookie accordingly...

112. or screen resize on an orientation change the script ﬁres again...

113. images { width:{ updated screen:800, document:800 }, xhr:true, canvas:true, flash:true, video:true, formats:{ h264:probably, ogg:true, webm:false }, offline:true } Client proﬁle and if needed, additional resources are downloaded... based on the pre- bundled references

114. http://domain.org/fava-beans/chianti known a client makes a new request to a server...

115. ...proﬁle please? server http://domain.org server then asks the client for it's proﬁle cookie...

116. { width:{ ...ah, wonderful you've ﬁlled in the rest! screen:800, document:800 }, xhr:true, canvas:true, flash:true, video:true, formats:{ server h264:probably, http://domain.org ogg:true, webm:false }, offline:true } Client proﬁle which now accurately represents the requesting client...

117. tacit data server http://domain.org server captures the client-tested proﬁle properties for later dB integration...

118. let me get that for you... response server http://domain.org and adapt server then begins to ﬁlter content based on the client proﬁle...

119. response server http://domain.org on the client any resources required are then bundled as references...

120. {}

121. server http://domain.org

122. client ...ta da!

123. and repeat as required...

124. all in preparation for the coming zombie apocalypse... @scottjenson zombie frog http://www.ﬂickr.com/photos/digitalsextant/3624030270

125. beneﬁts of this approach... http://www.ﬂickr.com/photos/sarahreido/3120877348

126. known focus on the features, not the device... OperaMini ceçi n'est plus un iphone http://www.ﬂickr.com/photos/jane_garratt/5377694159

127. browser accepts that features are rarely binary... just because it's 'supported', doesn't mean it works as intended (or works at all)... http://html5test.com/

128. tweaks for "important" devices (e.g. client-specific requests, business goal-specific, partners, high-traffic edge cases etc.) tacit data enables you to create custom properties needed for your specific project fine tune the profiles... override false positives http://www.flickr.com/photos/mujitra/2559447601

129. handling which makes edge cases much easier... http://twitter.com/#!/stephanierieger/status/113604185857069056

130. all heavy lifting occurs on the server... http://www.ﬂickr.com/photos/mackarus/4289960218

131. folks and their supports a broader range of devices where client-side-only approaches can be unreliable... http://www.ﬂickr.com/photos/mackarus/3022623866

132. embrace the future of "unknown unknowns"... http://www.ﬂickr.com/photos/jgoforth/87176920

133. a few thoughts for tomorrow... http://www.ﬂickr.com/photos/slemmon/3971195778

134. the <img> tag... was an after thought http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element

135. ...perhaps it's ﬁnally time to rethink it? <image alt="butterfly"> <source src="butterfly-‐small.png" width="100" height="80" /> <source src="butterfly.png" width="200" height="160" /> <source src="butterfly-‐large.svg" width="400" height="400" media="min-‐device-‐width:320px" /> </image> this of course does not exist, and is simply wishful thinking...

136. <html> ...media queries for the DOM? ... ie: conditional content @media all (max-‐device-‐width:320px) { <img src="butterfly-‐small.png" width="100" height="80" /> } @media all (min-‐device-‐width:320px) { <img src="butterfly.png" width="200" height="160" /> } @media all (min-‐device-‐width:320px) and (svg:true) { <img src="butterfly.svg" width="400" height="400" /> } this of course does not exist, and is ... only the simplest form of an idea... </html>

137. rethinking (and extending) content negotiation... http://en.wikipedia.org/wiki/Content_negotiation

138. and maybe even go back and revisit UA strings... Andrea Trasatti sorting user agent strings out ee for so me thoughts...srting Andrea Trasatti's "So ut" O User Agent Strings http://en.wikipedia.org/wiki/User_agent

139. "The wise adapt themselves to circumstances, as the water moulds itself to the pitcher." Chinese Proverb http://www.ﬂickr.com/photos/theowl84/3045227001

140. @yiibu please say hi hello@yiibu.com thank you the font we use is Museo http://www.exljbris.com/museo.html many thanks to the amazing photographers on http://www.ﬂickr.com/creativecommons/by-2.0 licensed under http://creativecommons.org/licenses/by/2.0 available on http://www.slideshare.net/yiibu/adaptation http://www.ﬂickr.com/photos/kwl/4171367373

Adaptation: Why responsive design actually begins on the server

Esté a ler uma amostra.

Confira estes a seguir

Adaptation: Why responsive design actually begins on the server

Mais Conteúdo rRelacionado

Diapositivos para si (18)

Quem viu também gostou (16)

Semelhante a Adaptation: Why responsive design actually begins on the server (20)

Mais recentes (20)

Adaptation: Why responsive design actually begins on the server