0
Adaptation                                             why responsive design actually begins on the server...http://creati...
the tech media lovesa good story...        TechCrunch                       http://www.flickr.com/photos/scobleizer/4694051...
200 million iOS devices                            and life on the                          bleeding edge...              ...
1/3                      *of the US has a smartphone                             ge               statistics ranell      *...
1/3of the US has a                         ...um, so 2/3 of the US                  does not have a smartphone?! smartphon...
or if youre a fanboy                                              feel free to use this math*...1/2of the US has a        ...
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!         ...
the "tech industry"...and are we makingpromises we cant keep?     htc Magic     Android 1.6                               ...
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.thefree...
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                   iPh...
whither feature phones,                               and the further rise of Android...                htc              g...
blackberry                   kindle                                      devices go mainstream                    nook    ...
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                  ...
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...
to infinity and beyond...     well overby 2015 50% of web traffic is expected        to come from mobile devices             ...
let me rephrase the question...
still the only                            device where                             the Web                           actua...
gotta get em all...                                                      or even want                many of us cannot affo...
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...             ...
and some feature phones aimed at                            the next billion now include WebKit        ooh, touch...      ...
every phone is now (essentially)                                                   a smartphone*...                       ...
camera, video,                                         3G connectivity                                                    ...
less vibrant screens                                                less responsive                                       ...
UNDESIRABLE              this inequality creates diversity                   and (often) "undesirables"...                ...
"Android WebKit is the closest thing tobeing the IE6 of mobile development for me."- @dalmaer via http://functionsource.co...
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                                   ...
2 year old, state-of-the-art    your smartphone is obsolete,           please upgrade now...                              ...
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...                         htt...
from your local library                                                                          where borrowing books for...
where Hulu, iTunes and sports bars      are replacing cable services...                               expensive           ...
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/55...
"...yeah, but people dont actually usethose undesirable devices?"                                          http://www.flick...
yup
...have you actuallyoffered them anything yet?                                        re                         logs, chan...
small                                    a few companies                                 most certainly have...           ...
us humans are amazing when it comes                           to adapting to new circumstances......do we still really   n...
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 ...
unfortunately, our currentmental models started back here...                 http://www.flickr.com/photos/blakespot/2343395...
The Era of mobile dominance is beginning                            which did not prepare us for a worldpaul rouget taiwan...
“The best, most solid way out of a crisisin a changing market is throughexperiment and adaptation.”Richard BransonBusiness...
<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...                              h...
other unique clients make                                                                similar requests...              ...
Rueben...chilli dog...                a method to track each client                        request is required...         ...
as each client request                                                                  is received...tra pickle...       ...
the server tailors each request                                                           to each client...               ...
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/...
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 co...
yeah, youre going to need a profile...                             server                       http://domain.org          ...
{  	  	  width:{  	  	  	  	  screen:240,  	  	  	  	  document:240  	  	  }  }                                       lets...
eww....                               then...grab the client user agent string                            (trust me, its m...
Mozilla/5.0	  (Linux;	  U;	  Android	  2.1-­‐update1;	  en-­‐gb;	  Nexus	  One	  Build/ERE27)	         AppleWebKit/530.17	...
Mozilla/5.0	  (Linux;	  U;	  Android	  2.1-­‐update1;	  en-­‐gb;	  Nexus	  One	  Build/ERE27)	      AppleWebKit/530.17	  (...
{	  	  width:{	  	  	  	  screen:240,	  	  	  	  document:240	  	  }}default profile                               ...hmm, ...
 	  	  	   "profile":{"width":"240"}	  	  	  },	  	  	  "desktop":	  {	  	  	  	   "match":"#windows|macintosh|linux#i",	 ...
{	  	  width:{                          tacit data	  	  	  	  screen:240,	  	  	  	  document:240	  	  }}default profile{	 ...
{	  	  width:{	  	  	  	  screen:320,	  	  	  	  document:320	  	  },	  	  xhr:true,	  	  canvas:true,	  	  flash:false,	 ...
cookie{	  	  width:{                   document	  	  	  	  screen:320,	  	  	  	  document:320	  	  },	  	  xhr:true,     ...
{	  	  width:{	  	  	  	  screen:320,	  	  	  	  document:320	  	  },	  	  xhr:true,                  response	  	  canvas...
media queries are not a means                           using Javascript to modifyof adapting content contained           ...
Adaptation Rulesensure all images areappropriately sized forclient displayreplace any images thatcontain fine details or te...
Adaptation Rulesensure all images areappropriately sized forclient displayreplace any images thatcontain fine details or te...
Adaptation Rules                                     Resource Bundlesensure all images are                                ...
    "pinch-­‐zoom":{	     	   "0-­‐320":"resources/images/meego/pinch-­‐zoom@240.png",	     	   "320-­‐720":"resources/ima...
video                      data                               images      response        server  http://domain.orgthese r...
response      serverhttp://domain.org                all content adaptation is               performed on the server...   ...
response                server          http://domain.org                                        on the clientalternate re...
{}             response               server         http://domain.org                                  feature detection ...
{}
serverhttp://domain.org
client
{	  	  width:{	  	  	  	  screen:480,	  	  	  	  document:480	  	  },	  	  xhr:true,	  	  canvas:true,	  	  flash:true,	  ...
or screen resizeon an orientation change    the script fires again...
images{	  	  width:{                updated	  	  	  	  screen:800,	  	  	  	  document:800	  	  },	  	  xhr:true,	  	  can...
http://domain.org/fava-beans/chianti                            known                      a client makes           a new ...
...profile please?      serverhttp://domain.org             server then asks the client                 for its profile cook...
{	  	  width:{                               ...ah, wonderful youve filled in the rest!	  	  	  	  screen:800,	  	  	  	  d...
tacit data            server      http://domain.org         server captures the client-testedprofile properties for later d...
let me get that for you...                             response                             server                       h...
response      serverhttp://domain.org                              on the client            any resources required are    ...
{}
serverhttp://domain.org
client         ...ta da!
and repeat as   required...
all in preparation for the coming            zombie apocalypse...            @scottjenson zombie frog                 http...
benefits of this       approach...http://www.flickr.com/photos/sarahreido/3120877348
known                              focus on the features,                                    not the device...            ...
browser accepts that features   are rarely binary...just because its supported, doesnt meanit works as intended (or works ...
tweaks for "important" devices(e.g. client-specific requests,business goal-specific, partners,high-traffic edge cases etc.)   ...
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...                   ...
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	  al...
<html>                                         ...media queries for the DOM?...                                           ...
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 agen...
"The wise adapt themselves to circumstances,    as the water moulds itself to the pitcher."                               ...
@yiibupleasesay         hi hello@yiibu.com                                                                       thank you...
Adaptation
Adaptation
Adaptation
Adaptation
Adaptation
Upcoming SlideShare
Loading in...5
×

Adaptation

846

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
846
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Adaptation"

  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 lovesa 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 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. 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. 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. 7. will save us all! http://www.flickr.com/photos/scobleizer/4694051328
  8. 8. but its really only kinda useableon few high-end devices... will save us all! http://www.flickr.com/photos/scobleizer/4694051328
  9. 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. 10. the bleeding edge...
  11. 11. originalthe iPhone 2007
  12. 12. iPhone 3GiPhone 2007 2008
  13. 13. iPhone 3GSiPhone 3G2007 2008 2009
  14. 14. iPhone 4iPhone 3G 3GS2007 2008 2009 2010
  15. 15. 3G 3GS 42008 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... originalthe iPhone 2007
  18. 18. brings touch, gestures and the real web... web touch iPhone 3GiPhone 2007 2008
  19. 19. native apps and the rise of Android... android apps iPhone 3GSiPhone 3G2007 2008 2009
  20. 20. whither feature phones, and the further rise of Android... htc g-five samsung web os iPhone 4iPhone 3G 3GS2007 2008 2009 2010
  21. 21. blackberry kindle devices go mainstream nook with great expectations... htc LG samsung motorola iPhone 5...3G 3GS 42008 2009 2010 2011
  22. 22. were 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 Chinaopportunity
  26. 26. but we still cant seethe forest for the trees... http://www.flickr.com/photos/clairity/1449248189
  27. 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. 28. last year weasked a simple question... http://www.flickr.com/photos/fpat/3692425154
  29. 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. 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. 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 webon 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 topurchase 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 farhigher priorities... http://www.flickr.com/photos/ilamont/4329364198
  38. 38. which often result in verydifferent purchasing decisions... http://www.flickr.com/photos/timstock/535259176
  39. 39. however...
  40. 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. 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. 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-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. 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. 45. UNDESIRABLE this inequality creates diversity and (often) "undesirables"... http://www.flickr.com/photos/handwrite/3460075040
  46. 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. 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 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. 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 theseare not "higher priorities"... http://www.flickr.com/photos/aaronpk/5328338679
  53. 53. welcome tothe real world...http://www.flickr.com/photos/slemmon/3971197662
  54. 54. where we learn toadapt 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 Thrivinghttp://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 @grigsto pick up those clippers... http://www.flickr.com/photos/kdnewton/2691125617
  59. 59. but...
  60. 60. the iPhone inspired everyoneto expect more from their devices... http://www.flickr.com/photos/tom_ruaat/5540148158
  61. 61. "...yeah, but people dont actually usethose undesirable devices?" http://www.flickr.com/photos/misterian/4084280385
  62. 62. yup
  63. 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. 64. small a few companies most certainly have... twitter indonesia0.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 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. 68. unfortunately, our currentmental 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 worldpaul 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 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. 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 doesnt)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 thishave 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.orgclient yet unknown a client makes a request to a server...
  85. 85. http://domain.org server
  86. 86. clouds are hip these days... serverhttp://domain.org
  87. 87. ...profile please? serverhttp://domain.org server then asks the client for its profile cookie...
  88. 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. 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. 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. 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. 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. 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. 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, 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. 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 clientClient profile server now has a usable profile and can continue...
  99. 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. 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. 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. 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. 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.orgthese resources can be static, cached or even dynamically generated... which would make them even more responsive
  105. 105. response serverhttp://domain.org all content adaptation is performed on the server... before the page is downloaded
  106. 106. response server http://domain.org on the clientalternate 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. serverhttp://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 resizeon 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? serverhttp://domain.org server then asks the client for its profile cookie...
  116. 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. 117. tacit data server http://domain.org server captures the client-testedprofile 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 serverhttp://domain.org on the client any resources required are then bundled as references...
  120. 120. {}
  121. 121. serverhttp://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... OperaMiniceçi nest plus un iphone http://www.flickr.com/photos/jane_garratt/5377694159
  127. 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. 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. 129. handlingwhich 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 theirsupports a broader range of deviceswhere client-side-only approachescan 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 thoughthttp://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element
  135. 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. 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 Trasattis "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. @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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×