Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
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