Adaptation: Why responsive design actually begins on the server
•
264 likes•29,059 views
The document discusses how responsive design begins on the server by adapting to different devices. It notes that as more devices have become capable of accessing the web, including lower-cost smartphones and basic phones, the definition of what constitutes a "smartphone" has expanded. It argues that while there is diversity in mobile devices, many lower-end devices still provide web access and basic smartphone functionality at an affordable price for many users.
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.flickr.com/photos/newsbiepix/4113886275
- 2. the tech media loves a good story... TechCrunch http://www.flickr.com/photos/scobleizer/4694051328
- 3. 200 million iOS devices and life on the bleeding edge... http://www.flickr.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.flickr.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.flickr.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.flickr.com/photos/abasketofpups/2662225972
- 7. will save us all! http://www.flickr.com/photos/scobleizer/4694051328
- 8. but it's really only kinda useable on few high-end devices... will save us all! http://www.flickr.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.flickr.com/photos/whatleydude/3547624583
- 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 effect n. a peripheral or secondary effect, 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-five 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 different perspective...
- 25. the bleeding edge... + 'ish via China opportunity
- 26. but we still can't see the forest for the trees... http://www.flickr.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.flickr.com/photos/centralasian/3239065547
- 28. last year we asked a simple question... http://www.flickr.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.flickr.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.flickr.com/photos/dantaylor/2161663267
- 33. gotta get 'em all... or even want many of us cannot afford to purchase every shiny new device released... http://www.flickr.com/photos/bytemarks/4732726333
- 34. especially in the light of recent events... http://www.flickr.com/photos/wagnertc/3217859975
- 36. most folks have much more pressing concerns... http://www.flickr.com/photos/bobolink/4706580
- 37. and far higher priorities... http://www.flickr.com/photos/ilamont/4329364198
- 38. which often result in very different purchasing decisions... http://www.flickr.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.flickr.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.flickr.com/photos/yoggy0/5380738918
- 42. every phone is now (essentially) a smartphone*... or soon will be ns of ctual definitioy - but to *a ill var 'smartphone' wey are all magic... normal folks th http://www.flickr.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.flickr.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.flickr.com/photos/nechbi/3841765925
- 45. UNDESIRABLE this inequality creates diversity and (often) "undesirables"... http://www.flickr.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.flickr.com/photos/blank22763/4089926742
- 48. an optimal experience for for a privileged few... http://www.flickr.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.flickr.com/photos/dumbledad/3400708183
- 50. 2 year old, state-of-the-art your smartphone is obsolete, please upgrade now... http://www.flickr.com/photos/herval/2050815997
- 51. um...
- 52. for most folks these are not "higher priorities"... http://www.flickr.com/photos/aaronpk/5328338679
- 53. welcome to the real world... http://www.flickr.com/photos/slemmon/3971197662
- 54. where we learn to adapt as required... http://www.flickr.com/photos/kalleboo/3536493996
- 55. craftivism where simply learning to knit can change your life... http://www.flickr.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.flickr.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.flickr.com/photos/kdnewton/2691125617
- 59. but...
- 60. the iPhone inspired everyone to expect more from their devices... http://www.flickr.com/photos/tom_ruaat/5540148158
- 61. "...yeah, but people don't actually use those undesirable devices?" http://www.flickr.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.flickr.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.flickr.com/photos/thenationalguard/3251277781
- 66. the web was actually built on similar principles... http://www.flickr.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.scientificamerican.com/article.cfm?id=long-live-the-web http://www.flickr.com/photos/lonelyfox/2939757714
- 68. unfortunately, our current mental models started back here... http://www.flickr.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.flickr.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.flickr.com/photos/jedibfa/5146867827
- 71. <diversion> http://www.flickr.com/photos/y_i/2330044065
- 72. short a tale of clients and servers... http://www.flickr.com/photos/richardberg/2135409739
- 73. pastrami on rye... a client makes a request to a server... http://www.flickr.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.flickr.com/photos/_ppo/2393063853
- 75. Rueben... chilli dog... a method to track each client request is required... http://www.flickr.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.flickr.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.flickr.com/photos/_ppo/2393063853
- 78. ensuring they get exactly what they need... http://www.flickr.com/photos/the_junes/2134127618
- 79. rather than everything they might not want... http://www.flickr.com/photos/86624586@N00/10176570
- 80. <diversion/> http://www.flickr.com/photos/alper/3257406961
- 81. ...but what does this have to do with mobile? http://www.flickr.com/photos/mikeycordedda/5328343979
- 82. accomplish great things together working client and server can... http://www.flickr.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. ...profile please? server http://domain.org server then asks the client for it's profile cookie...
- 88. yeah, you're going to need a profile... server http://domain.org if a client doesn't have a profile 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 profile
- 93. { width:{ screen:240, document:240 } } default profile ...hmm, I think I've seen this before? server { width:480, http://domain.org height:480, color-‐depth:8, touch:true, cookie:true, ... } DeviceAtlas profile 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) profile "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 profiles 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 profile merge the baseline data, with the data returned from queries into the client profile...
- 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 profile write the profile 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 fine 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 fine 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 fine 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 profiles 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-‐[email protected]", "320-‐720":"resources/images/meego/pinch-‐[email protected]", Resource Bundles "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, alternate content "typing":{ "0-‐320":"resources/images/meego/[email protected]", appropriate for context "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/typing.png" alternate DOM templates, }, components & fragments "stay-‐safe":{ "0-‐320":"resources/images/meego/stay-‐[email protected]", alternate sized, formatted + "320-‐720":"resources/images/meego/stay-‐[email protected]", encoded video as required "720-‐9999":"resources/images/meego/stay-‐safe.png" }, alternate images for "swipe-‐more":{ required breakpoints "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/swipe.jpg" alternate scripts + styles }, for required client profiles "pinch-‐zoom-‐more":{ "0-‐320":"resources/images/meego/pinch-‐[email protected]", "320-‐720":"resources/images/meego/pinch-‐[email protected]", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing-‐more":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/typing.png" which can be defined in }, "stay-‐safe-‐more":{ any number of ways... "0-‐320":"resources/images/meego/stay-‐[email protected]", "320-‐720":"resources/images/meego/stay-‐[email protected]", "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 profile <script> is also included in the response to the client...
- 108. {}
- 111. client
- 112. { 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...
- 114. or screen resize on an orientation change the script fires again...
- 115. 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 profile and if needed, additional resources are downloaded... based on the pre- bundled references
- 116. http://domain.org/fava-beans/chianti known a client makes a new request to a server...
- 117. ...profile please? server http://domain.org server then asks the client for it's profile cookie...
- 118. { width:{ ...ah, wonderful you've filled 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 profile which now accurately represents the requesting client...
- 119. tacit data server http://domain.org server captures the client-tested profile properties for later dB integration...
- 120. let me get that for you... response server http://domain.org and adapt server then begins to filter content based on the client profile...
- 121. response server http://domain.org on the client any resources required are then bundled as references...
- 122. {}
- 125. client ...ta da!
- 126. and repeat as required...
- 129. all in preparation for the coming zombie apocalypse... @scottjenson zombie frog http://www.flickr.com/photos/digitalsextant/3624030270
- 130. benefits of this approach... http://www.flickr.com/photos/sarahreido/3120877348
- 131. known focus on the features, not the device... OperaMini ceçi n'est plus un iphone http://www.flickr.com/photos/jane_garratt/5377694159
- 132. 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/
- 133. 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
- 134. handling which makes edge cases much easier... http://twitter.com/#!/stephanierieger/status/113604185857069056
- 135. all heavy lifting occurs on the server... http://www.flickr.com/photos/mackarus/4289960218
- 136. folks and their supports a broader range of devices where client-side-only approaches can be unreliable... http://www.flickr.com/photos/mackarus/3022623866
- 137. embrace the future of "unknown unknowns"... http://www.flickr.com/photos/jgoforth/87176920
- 138. a few thoughts for tomorrow... http://www.flickr.com/photos/slemmon/3971195778
- 139. the <img> tag... was an after thought http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element
- 140. ...perhaps it's finally 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...
- 141. <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>
- 142. rethinking (and extending) content negotiation... http://en.wikipedia.org/wiki/Content_negotiation
- 143. 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
- 144. "The wise adapt themselves to circumstances, as the water moulds itself to the pitcher." Chinese Proverb http://www.flickr.com/photos/theowl84/3045227001
- 145. @yiibu please say hi [email protected] thank you the font we use is Museo http://www.exljbris.com/museo.html many thanks to the amazing photographers on http://www.flickr.com/creativecommons/by-2.0 licensed under http://creativecommons.org/licenses/by/2.0 available on http://www.slideshare.net/yiibu/adaptation http://www.flickr.com/photos/kwl/4171367373