• Like
Adaptation: Why responsive design actually begins on the server
Upcoming SlideShare
Loading in...5
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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 lovesa 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 ranell *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/3of 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 youre a fanboy feel free to use this math*...1/2of the US has a and 1/2 does not... smartphone nt 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 its really only kinda useableon few high-end devices... will save us all! http://www.flickr.com/photos/scobleizer/4694051328
  • 9. the "tech industry"...and are we makingpromises we cant 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
  • 10. the bleeding edge...
  • 11. originalthe iPhone 2007
  • 12. iPhone 3GiPhone 2007 2008
  • 13. iPhone 3GSiPhone 3G2007 2008 2009
  • 14. iPhone 4iPhone 3G 3GS2007 2008 2009 2010
  • 15. 3G 3GS 42008 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... originalthe iPhone 2007
  • 18. brings touch, gestures and the real web... web touch iPhone 3GiPhone 2007 2008
  • 19. native apps and the rise of Android... android apps iPhone 3GSiPhone 3G2007 2008 2009
  • 20. whither feature phones, and the further rise of Android... htc g-five samsung web os iPhone 4iPhone 3G 3GS2007 2008 2009 2010
  • 21. blackberry kindle devices go mainstream nook with great expectations... htc LG samsung motorola iPhone 5...3G 3GS 42008 2009 2010 2011
  • 22. were now in that big grey area...
  • 23. or from a different perspective...
  • 24. the bleeding edge...
  • 25. the bleeding edge... + ish via Chinaopportunity
  • 26. but we still cant seethe forest for the trees... http://www.flickr.com/photos/clairity/1449248189
  • 27. 2/3 * of the US does nothave a smartphone... e *or 1/2 if your a fanboy... http://www.flickr.com/photos/centralasian/3239065547
  • 28. last year weasked a simple question... http://www.flickr.com/photos/fpat/3692425154
  • 29. welcome to the mobile webI asked this a year ago,im not sure anythingschanged!! 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 overby 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 webon 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 topurchase 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
  • 35. http://www.flickr.com/photos/chiacomo/3805139360
  • 36. most folks have much more pressing concerns... http://www.flickr.com/photos/bobolink/4706580
  • 37. and farhigher priorities... http://www.flickr.com/photos/ilamont/4329364198
  • 38. which often result in verydifferent purchasing decisions... http://www.flickr.com/photos/timstock/535259176
  • 39. however...
  • 40. as lots of Android devices arenow 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... ypeNokia 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-ableoperating system loaded with everything weve 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 screenslimited or no dataplan 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 tobeing 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
  • 47. this thinking creates...
  • 48. an optimal experience for for a privileged few... http://www.flickr.com/photos/carbonnyc/5140154965
  • 49. and a missed opportunityfor 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 theseare not "higher priorities"... http://www.flickr.com/photos/aaronpk/5328338679
  • 53. welcome tothe real world...http://www.flickr.com/photos/slemmon/3971197662
  • 54. where we learn toadapt 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 Thrivinghttp://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 @grigsto pick up those clippers... http://www.flickr.com/photos/kdnewton/2691125617
  • 59. but...
  • 60. the iPhone inspired everyoneto expect more from their devices... http://www.flickr.com/photos/tom_ruaat/5540148158
  • 61. "...yeah, but people dont actually usethose undesirable devices?" http://www.flickr.com/photos/misterian/4084280385
  • 62. yup
  • 63. ...have you actuallyoffered them anything yet? re logs, chances aail... check your in the long t youll find them http://www.flickr.com/photos/zoetnet/4669800101/
  • 64. small a few companies most certainly have... twitter indonesia0.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 Websusefulness and growth is universality.The Web should be usable by people with disabilities.It must work with any form of information, be it adocument or a point of data, and information of anyquality–from a silly tweet to a scholarly paper.And it should be accessible from any kind of hardwarethan can connect to the internet: stationary or mobile,small screen or large." ... as seen b efore @bdconfTim Berners-LeeLong Live the Webhttp://www.scientificamerican.com/article.cfm?id=long-live-the-web http://www.flickr.com/photos/lonelyfox/2939757714
  • 68. unfortunately, our currentmental 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 worldpaul rouget taiwan africa dominated by devices like these... http://www.flickr.com/photos/whiteafrican/2594981758
  • 70. “The best, most solid way out of a crisisin a changing market is throughexperiment and adaptation.”Richard BransonBusiness 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 doesnt)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 thishave 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.orgclient yet unknown a client makes a request to a server...
  • 85. http://domain.org server
  • 86. clouds are hip these days... serverhttp://domain.org
  • 87. ...profile please? serverhttp://domain.org server then asks the client for its profile cookie...
  • 88. yeah, youre going to need a profile... server http://domain.org if a client doesnt have a profile cookie the server creates one for it...
  • 89. {    width:{        screen:240,        document:240    } } lets start with the default profile... default profile*defining a default baselineprofile depends on yourproject requirements... server http://domain.org or default*notice that this makes the begin with a baseline profileassumption 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, its 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.17hey 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.comDeviceAtlas profile
  • 93. {    width:{        screen:240,        document:240    }}default profile ...hmm, I think Ive 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, Ive 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 testingDeviceAtlas 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 clientClient profile server now has a usable profile and can continue...
  • 99. media queries are not a means using Javascript to modifyof adapting content contained significant portions of thewithin 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 Rulesensure all images areappropriately sized forclient displayreplace any images thatcontain fine details or textreplace Flash media withan appropriate alternative responsewhere not supportedremove unnecessarymarkup, 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 Rulesensure all images areappropriately sized forclient displayreplace any images thatcontain fine details or textreplace Flash media withan appropriate alternative responsewhere not supportedremove unnecessarymarkup, scripts, etc. server http://domain.orgadapt large tables asrequired, link to dataserve appropriate videoformat, codec and sizeadapt DOM componentsincluding scripts and styles <video>, <table> and other DOM structures also require adaptation may
  • 102. Adaptation Rules Resource Bundlesensure all images are alternate contentappropriately sized for appropriate for contextclient display alternate DOM templates,replace any images that components & fragmentscontain fine details or text alternate sized, formatted +replace Flash media with encoded video as requiredan appropriate alternative responsewhere not supported alternate images for required breakpointsremove unnecessarymarkup, scripts, etc. server alternate scripts + styles http://domain.org for required client profilesadapt large tables asrequired, link to dataserve appropriate videoformat, codec and sizeadapt DOM componentsincluding 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 profiles   "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 defined 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.orgthese resources can be static, cached or even dynamically generated... which would make them even more responsive
  • 105. response serverhttp://domain.org all content adaptation is performed on the server... before the page is downloaded
  • 106. response server http://domain.org on the clientalternate 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. {}
  • 109. serverhttp://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 resizeon an orientation change the script fires 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 profile 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. ...profile please? serverhttp://domain.org server then asks the client for its profile cookie...
  • 116. {    width:{ ...ah, wonderful youve 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...
  • 117. tacit data server http://domain.org server captures the client-testedprofile properties for later dB integration...
  • 118. let me get that for you... response server http://domain.org and adapt server then begins to filter content based on the client profile...
  • 119. response serverhttp://domain.org on the client any resources required are then bundled as references...
  • 120. {}
  • 121. serverhttp://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.flickr.com/photos/digitalsextant/3624030270
  • 125. benefits of this approach...http://www.flickr.com/photos/sarahreido/3120877348
  • 126. known focus on the features, not the device... OperaMiniceçi nest plus un iphone http://www.flickr.com/photos/jane_garratt/5377694159
  • 127. browser accepts that features are rarely binary...just because its supported, doesnt meanit 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 tocreate custom properties neededfor your specific project fine tune the profiles...override false positives http://www.flickr.com/photos/mujitra/2559447601
  • 129. handlingwhich makes edge cases much easier... http://twitter.com/#!/stephanierieger/status/113604185857069056
  • 130. all heavy lifting occurs on the server... http://www.flickr.com/photos/mackarus/4289960218
  • 131. folks and theirsupports a broader range of deviceswhere client-side-only approachescan be unreliable... http://www.flickr.com/photos/mackarus/3022623866
  • 132. embrace the future of"unknown unknowns"... http://www.flickr.com/photos/jgoforth/87176920
  • 133. a few thoughts for tomorrow...http://www.flickr.com/photos/slemmon/3971195778
  • 134. the <img> tag... was an after thoughthttp://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element
  • 135. ...perhaps its 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...
  • 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 Trasattis "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.flickr.com/photos/theowl84/3045227001
  • 140. @yiibupleasesay 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.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