O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Adaptation: Why responsive design actually begins on the server

Próximos SlideShares
Beyond the mobile web by yiibu
Beyond the mobile web by yiibu
Carregando em…3

Confira estes a seguir

1 de 145 Anúncio

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

  1. 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. 2. the tech media loves a good story... TechCrunch http://www.flickr.com/photos/scobleizer/4694051328
  3. 3. 200 million iOS devices and life on the bleeding edge... http://www.flickr.com/photos/scobleizer/3553486766
  4. 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. 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. 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. 7. will save us all! http://www.flickr.com/photos/scobleizer/4694051328
  8. 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. 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
  10. 10. the bleeding edge...
  11. 11. original the iPhone 2007
  12. 12. iPhone 3G iPhone 2007 2008
  13. 13. iPhone 3GS iPhone 3G 2007 2008 2009
  14. 14. iPhone 4 iPhone 3G 3GS 2007 2008 2009 2010
  15. 15. 3G 3GS 4 2008 2009 2010 2011 iPhone 5...
  16. 16. side effect n. a peripheral or secondary effect, especially an undesirable one... http://www.thefreedictionary.com/side+effect
  17. 17. the smartphone era begins... original the iPhone 2007
  18. 18. brings touch, gestures and the real web... web touch iPhone 3G iPhone 2007 2008
  19. 19. native apps and the rise of Android... android apps iPhone 3GS iPhone 3G 2007 2008 2009
  20. 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. 21. blackberry kindle devices go mainstream nook with great expectations... htc LG samsung motorola iPhone 5... 3G 3GS 4 2008 2009 2010 2011
  22. 22. we're now in that big grey area...
  23. 23. or from a different perspective...
  24. 24. the bleeding edge...
  25. 25. the bleeding edge... + 'ish via China opportunity
  26. 26. but we still can't see the forest for the trees... http://www.flickr.com/photos/clairity/1449248189
  27. 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. 28. last year we asked a simple question... http://www.flickr.com/photos/fpat/3692425154
  29. 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. 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. 31. let me rephrase the question...
  32. 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. 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. 34. especially in the light of recent events... http://www.flickr.com/photos/wagnertc/3217859975
  35. 35. http://www.flickr.com/photos/chiacomo/3805139360
  36. 36. most folks have much more pressing concerns... http://www.flickr.com/photos/bobolink/4706580
  37. 37. and far higher priorities... http://www.flickr.com/photos/ilamont/4329364198
  38. 38. which often result in very different purchasing decisions... http://www.flickr.com/photos/timstock/535259176
  39. 39. however...
  40. 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. 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. 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. 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. 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. 45. UNDESIRABLE this inequality creates diversity and (often) "undesirables"... http://www.flickr.com/photos/handwrite/3460075040
  46. 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
  47. 47. this thinking creates...
  48. 48. an optimal experience for for a privileged few... http://www.flickr.com/photos/carbonnyc/5140154965
  49. 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. 50. 2 year old, state-of-the-art your smartphone is obsolete, please upgrade now... http://www.flickr.com/photos/herval/2050815997
  51. 51. um...
  52. 52. for most folks these are not "higher priorities"... http://www.flickr.com/photos/aaronpk/5328338679
  53. 53. welcome to the real world... http://www.flickr.com/photos/slemmon/3971197662
  54. 54. where we learn to adapt as required... http://www.flickr.com/photos/kalleboo/3536493996
  55. 55. craftivism where simply learning to knit can change your life... http://www.flickr.com/photos/bosstweed/152159981
  56. 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. 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. 58. and which led @grigs to pick up those clippers... http://www.flickr.com/photos/kdnewton/2691125617
  59. 59. but...
  60. 60. the iPhone inspired everyone to expect more from their devices... http://www.flickr.com/photos/tom_ruaat/5540148158
  61. 61. "...yeah, but people don't actually use those undesirable devices?" http://www.flickr.com/photos/misterian/4084280385
  62. 62. yup
  63. 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. 64. small a few companies most certainly have... twitter indonesia 0.facebook OperaMini http://www.flickr.com/photos/nseika/5848996146
  65. 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. 66. the web was actually built on similar principles... http://www.flickr.com/photos/tanaka/3212373419
  67. 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. 68. unfortunately, our current mental models started back here... http://www.flickr.com/photos/blakespot/2343395804
  69. 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. 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. 71. <diversion> http://www.flickr.com/photos/y_i/2330044065
  72. 72. short a tale of clients and servers... http://www.flickr.com/photos/richardberg/2135409739
  73. 73. pastrami on rye... a client makes a request to a server... http://www.flickr.com/photos/_ppo/2393063853
  74. 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. 75. Rueben... chilli dog... a method to track each client request is required... http://www.flickr.com/photos/mrgarin/3476714113
  76. 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. 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. 78. ensuring they get exactly what they need... http://www.flickr.com/photos/the_junes/2134127618
  79. 79. rather than everything they might not want... http://www.flickr.com/photos/86624586@N00/10176570
  80. 80. <diversion/> http://www.flickr.com/photos/alper/3257406961
  81. 81. ...but what does this have to do with mobile? http://www.flickr.com/photos/mikeycordedda/5328343979
  82. 82. accomplish great things together working client and server can... http://www.flickr.com/photos/maladjusted/2341398753
  83. 83. client
  84. 84. http://domain.org client yet unknown a client makes a request to a server...
  85. 85. http://domain.org server
  86. 86. clouds are hip these days... server http://domain.org
  87. 87. ...profile please? server http://domain.org server then asks the client for it's profile cookie...
  88. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 105. response server http://domain.org all content adaptation is performed on the server... before the page is downloaded
  106. 106. response server http://domain.org on the client alternate resources that may later be required are then bundled as references...
  107. 107. {} response server http://domain.org feature detection an additional profile <script> is also included in the response to the client...
  108. 108. {}
  109. 109. server http://domain.org
  110. 110. client
  111. 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. 112. or screen resize on an orientation change the script fires again...
  113. 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. 114. http://domain.org/fava-beans/chianti known a client makes a new request to a server...
  115. 115. ...profile please? server http://domain.org server then asks the client for it's profile cookie...
  116. 116. {    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...
  117. 117. tacit data server http://domain.org server captures the client-tested profile properties for later dB integration...
  118. 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. 119. response server http://domain.org on the client any resources required are then bundled as references...
  120. 120. {}
  121. 121. server http://domain.org
  122. 122. client ...ta da!
  123. 123. and repeat as required...
  124. 124. all in preparation for the coming zombie apocalypse... @scottjenson zombie frog http://www.flickr.com/photos/digitalsextant/3624030270
  125. 125. benefits of this approach... http://www.flickr.com/photos/sarahreido/3120877348
  126. 126. known focus on the features, not the device... OperaMini ceçi n'est plus un iphone http://www.flickr.com/photos/jane_garratt/5377694159
  127. 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. 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. 129. handling which makes edge cases much easier... http://twitter.com/#!/stephanierieger/status/113604185857069056
  130. 130. all heavy lifting occurs on the server... http://www.flickr.com/photos/mackarus/4289960218
  131. 131. folks and their supports a broader range of devices where client-side-only approaches can be unreliable... http://www.flickr.com/photos/mackarus/3022623866
  132. 132. embrace the future of "unknown unknowns"... http://www.flickr.com/photos/jgoforth/87176920
  133. 133. a few thoughts for tomorrow... http://www.flickr.com/photos/slemmon/3971195778
  134. 134. the <img> tag... was an after thought http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element
  135. 135. ...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...
  136. 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. 137. rethinking (and extending) content negotiation... http://en.wikipedia.org/wiki/Content_negotiation
  138. 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. 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. 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.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