• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content







Total Views
Views on SlideShare
Embed Views



1 Embed 106

http://logmob.wordpress.com 106


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Adaptation Adaptation Presentation Transcript

    • Adaptation why responsive design actually begins on the server...http://creativecommons.org/licenses/by/2.0 http://www.flickr.com/photos/newsbiepix/4113886275
    • the tech media lovesa good story... TechCrunch http://www.flickr.com/photos/scobleizer/4694051328
    • 200 million iOS devices and life on the bleeding edge... http://www.flickr.com/photos/scobleizer/3553486766
    • 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
    • 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
    • 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
    • will save us all! http://www.flickr.com/photos/scobleizer/4694051328
    • but its really only kinda useableon few high-end devices... will save us all! http://www.flickr.com/photos/scobleizer/4694051328
    • 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
    • the bleeding edge...
    • originalthe iPhone 2007
    • iPhone 3GiPhone 2007 2008
    • iPhone 3GSiPhone 3G2007 2008 2009
    • iPhone 4iPhone 3G 3GS2007 2008 2009 2010
    • 3G 3GS 42008 2009 2010 2011 iPhone 5...
    • side effect n.a peripheral or secondary effect,especially an undesirable one... http://www.thefreedictionary.com/side+effect
    • the smartphone era begins... originalthe iPhone 2007
    • brings touch, gestures and the real web... web touch iPhone 3GiPhone 2007 2008
    • native apps and the rise of Android... android apps iPhone 3GSiPhone 3G2007 2008 2009
    • whither feature phones, and the further rise of Android... htc g-five samsung web os iPhone 4iPhone 3G 3GS2007 2008 2009 2010
    • blackberry kindle devices go mainstream nook with great expectations... htc LG samsung motorola iPhone 5...3G 3GS 42008 2009 2010 2011
    • were now in that big grey area...
    • or from a different perspective...
    • the bleeding edge...
    • the bleeding edge... + ish via Chinaopportunity
    • but we still cant seethe forest for the trees... http://www.flickr.com/photos/clairity/1449248189
    • 2/3 * of the US does nothave a smartphone... e *or 1/2 if your a fanboy... http://www.flickr.com/photos/centralasian/3239065547
    • last year weasked a simple question... http://www.flickr.com/photos/fpat/3692425154
    • 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
    • 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
    • let me rephrase the question...
    • 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
    • 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
    • especially in the light of recent events... http://www.flickr.com/photos/wagnertc/3217859975
    • http://www.flickr.com/photos/chiacomo/3805139360
    • most folks have much more pressing concerns... http://www.flickr.com/photos/bobolink/4706580
    • and farhigher priorities... http://www.flickr.com/photos/ilamont/4329364198
    • which often result in verydifferent purchasing decisions... http://www.flickr.com/photos/timstock/535259176
    • however...
    • 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
    • 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
    • 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
    • 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
    • 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
    • UNDESIRABLE this inequality creates diversity and (often) "undesirables"... http://www.flickr.com/photos/handwrite/3460075040
    • "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
    • this thinking creates...
    • an optimal experience for for a privileged few... http://www.flickr.com/photos/carbonnyc/5140154965
    • 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
    • 2 year old, state-of-the-art your smartphone is obsolete, please upgrade now... http://www.flickr.com/photos/herval/2050815997
    • um...
    • for most folks theseare not "higher priorities"... http://www.flickr.com/photos/aaronpk/5328338679
    • welcome tothe real world...http://www.flickr.com/photos/slemmon/3971197662
    • where we learn toadapt as required... http://www.flickr.com/photos/kalleboo/3536493996
    • craftivism where simply learning to knit can change your life... http://www.flickr.com/photos/bosstweed/152159981
    • 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/
    • 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
    • and which led @grigsto pick up those clippers... http://www.flickr.com/photos/kdnewton/2691125617
    • but...
    • the iPhone inspired everyoneto expect more from their devices... http://www.flickr.com/photos/tom_ruaat/5540148158
    • "...yeah, but people dont actually usethose undesirable devices?" http://www.flickr.com/photos/misterian/4084280385
    • yup
    • ...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/
    • small a few companies most certainly have... twitter indonesia0.facebook OperaMini http://www.flickr.com/photos/nseika/5848996146
    • 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
    • the web was actually built on similar principles... http://www.flickr.com/photos/tanaka/3212373419
    • "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
    • unfortunately, our currentmental models started back here... http://www.flickr.com/photos/blakespot/2343395804
    • 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
    • “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
    • <diversion> http://www.flickr.com/photos/y_i/2330044065
    • short a tale of clients and servers...http://www.flickr.com/photos/richardberg/2135409739
    • pastrami on rye... a client makes a request to a server... http://www.flickr.com/photos/_ppo/2393063853
    • 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
    • Rueben...chilli dog... a method to track each client request is required... http://www.flickr.com/photos/mrgarin/3476714113
    • 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
    • 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
    • ensuring they get exactly what they need... http://www.flickr.com/photos/the_junes/2134127618
    • rather than everything they might not want... http://www.flickr.com/photos/86624586@N00/10176570
    • <diversion/> http://www.flickr.com/photos/alper/3257406961
    • ...but what does thishave to do with mobile? http://www.flickr.com/photos/mikeycordedda/5328343979
    • accomplish great things together working client and server can... http://www.flickr.com/photos/maladjusted/2341398753
    • client
    • http://domain.orgclient yet unknown a client makes a request to a server...
    • http://domain.org server
    • clouds are hip these days... serverhttp://domain.org
    • ...profile please? serverhttp://domain.org server then asks the client for its profile cookie...
    • 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...
    • {    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")
    • 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
    • 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
    • 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
    • {    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
    •         "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",
    • {    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
    • {    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...
    • 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...
    • {    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...
    • 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...
    • 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...
    • 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
    • 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
    •   "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":{
    • video data images response server http://domain.orgthese resources can be static, cached or even dynamically generated... which would make them even more responsive
    • response serverhttp://domain.org all content adaptation is performed on the server... before the page is downloaded
    • response server http://domain.org on the clientalternate resources that may later be required are then bundled as references...
    • {} response server http://domain.org feature detection an additional profile <script>is also included in the response to the client...
    • {}
    • serverhttp://domain.org
    • client
    • {    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...
    • or screen resizeon an orientation change the script fires again...
    • 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
    • http://domain.org/fava-beans/chianti known a client makes a new request to a server...
    • ...profile please? serverhttp://domain.org server then asks the client for its profile cookie...
    • {    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...
    • tacit data server http://domain.org server captures the client-testedprofile properties for later dB integration...
    • let me get that for you... response server http://domain.org and adapt server then begins to filter content based on the client profile...
    • response serverhttp://domain.org on the client any resources required are then bundled as references...
    • {}
    • serverhttp://domain.org
    • client ...ta da!
    • and repeat as required...
    • all in preparation for the coming zombie apocalypse... @scottjenson zombie frog http://www.flickr.com/photos/digitalsextant/3624030270
    • benefits of this approach...http://www.flickr.com/photos/sarahreido/3120877348
    • known focus on the features, not the device... OperaMiniceçi nest plus un iphone http://www.flickr.com/photos/jane_garratt/5377694159
    • browser accepts that features are rarely binary...just because its supported, doesnt meanit works as intended (or works at all)... http://html5test.com/
    • 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
    • handlingwhich makes edge cases much easier... http://twitter.com/#!/stephanierieger/status/113604185857069056
    • all heavy lifting occurs on the server... http://www.flickr.com/photos/mackarus/4289960218
    • folks and theirsupports a broader range of deviceswhere client-side-only approachescan be unreliable... http://www.flickr.com/photos/mackarus/3022623866
    • embrace the future of"unknown unknowns"... http://www.flickr.com/photos/jgoforth/87176920
    • a few thoughts for tomorrow...http://www.flickr.com/photos/slemmon/3971195778
    • the <img> tag... was an after thoughthttp://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element
    • ...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...
    • <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>
    • rethinking (and extending) content negotiation... http://en.wikipedia.org/wiki/Content_negotiation
    • 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
    • "The wise adapt themselves to circumstances, as the water moulds itself to the pitcher." Chinese Proverb http://www.flickr.com/photos/theowl84/3045227001
    • @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