Adaptation: Why responsive design actually begins on the server [mobile]
Adaptation: Why responsive design actually begins on the server
1. Adaptation
                                              why responsive design actually begins on the server...




http://creativecommons.org/licenses/by/2.0                       http://www.ﬂickr.com/photos/newsbiepix/4113886275
 2. the tech media  loves
a good story...




        TechCrunch

                       http://www.ﬂickr.com/photos/scobleizer/4694051328
 3. 200 million iOS  devices




                            and life on the
                          bleeding edge...




                          http://www.ﬂickr.com/photos/scobleizer/3553486766
 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.ﬂickr.com/photos/scobleizer/4694051328
 5. 1/3
of the US  has a
                         ...um, so 2/3 of the US
                  does not have a smartphone?!

 smartphone




                               http://www.ﬂickr.com/photos/scobleizer/4694051328
 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.ﬂickr.com/photos/abasketofpups/2662225972
 7. will save us  all!




                    http://www.ﬂickr.com/photos/scobleizer/4694051328
 8. but it's really  only kinda useable
on few high-end devices...

                                     will save us all!




                                        http://www.ﬂickr.com/photos/scobleizer/4694051328
 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.ﬂickr.com/photos/whatleydude/3547624583
 10. the bleeding edge...
  11. original
the iPhone
      2007
 12. iPhone 3G
iPhone

 2007      2008
 13. iPhone 3GS
iPhone    3G

2007     2008    2009
 14. iPhone 4
iPhone    3G     3GS

2007     2008   2009     2010
 15. 3G      3GS     4

2008   2009   2010   2011
                            iPhone 5...
 16. side eﬀect n.
a  peripheral or secondary eﬀect,
especially an undesirable one...




                           http://www.thefreedictionary.com/side+effect
 17. the smartphone
                  era begins...


 original
the iPhone
     2007
 18. brings touch, gestures
                          and the real web...


   web
 touch
         iPhone 3G
iPhone

 2007     2008
 19. native apps and
                                 the rise of Android...


         android
           apps



                   iPhone 3GS
iPhone       3G

2007         2008     2009
 20. whither feature phones,
                                and the further rise of Android...

                htc
              g-ﬁve
          samsung
         web os
                             iPhone 4
iPhone   3G           3GS

2007     2008         2009     2010
 21. blackberry
                    kindle
                                      devices go mainstream
                    nook            with great expectations...


                   htc
                   LG
              samsung
              motorola
                            iPhone 5...
3G     3GS         4

2008   2009       2010       2011
 22. we're now in  that
 big grey area...
 23. or from a  diﬀerent perspective...
 24. the bleeding edge...
  25. the bleeding edge...



                        +   'ish via China




opportunity
 26. but we still  can't see
the forest for the trees...




         http://www.ﬂickr.com/photos/clairity/1449248189
 27. 2/3
             *


  of the US does not
have a smartphone...
                                               e
                              *or 1/2 if you'r
                                 a fanboy...




    http://www.ﬂickr.com/photos/centralasian/3239065547
 28. last year we
asked  a simple question...




           http://www.ﬂickr.com/photos/fpat/3692425154
 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.ﬂickr.com/photos/sketch22/1127556671
 30. to inﬁnity and  beyond...




     well over
by 2015 50% of web traﬃc is expected
        to come from mobile devices




                 http://www.netmagazine.com/news/uk-sees-huge-mobile-web-trafﬁc-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 web
on a mobile device, will the purchase
       of an iPhone be mandatory...?

                    http://www.ﬂickr.com/photos/dantaylor/2161663267
 33. gotta get 'em  all...




                                                      or even want
                many of us cannot aﬀord to
purchase every shiny new device released...




                               http://www.ﬂickr.com/photos/bytemarks/4732726333
 34. especially in the  light of
        recent events...




       http://www.ﬂickr.com/photos/wagnertc/3217859975
 35. http://www.ﬂickr.com/photos/chiacomo/3805139360
  36. most folks have  much more
       pressing concerns...




            http://www.ﬂickr.com/photos/bobolink/4706580
 37. and far
higher priorities...



   http://www.ﬂickr.com/photos/ilamont/4329364198
 38. which often result  in very
diﬀerent purchasing decisions...




                 http://www.ﬂickr.com/photos/timstock/535259176
 39. however...
  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.ﬂickr.com/photos/cambodia4kidsorg/5253151186
 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.ﬂickr.com/photos/yoggy0/5380738918
 42. every phone is  now (essentially)
                                                   a smartphone*...
                                                                        or soon will be




                        ns of
       ctual deﬁnitioy - but to
     *a
                ill var
 'smartphone' wey are all magic...
normal folks th
                                                      http://www.ﬂickr.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-able
operating system                loaded with everything we've come
                                    to expect from a smartphone...


                    QWERTY keyboard
                    and/or trackball




                                                           http://www.ﬂickr.com/photos/free_programmer/4371778263
 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.ﬂickr.com/photos/nechbi/3841765925
 45. UNDESIRABLE
               this inequality creates diversity
                   and (often) "undesirables"...

                              http://www.ﬂickr.com/photos/handwrite/3460075040
 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.ﬂickr.com/photos/blank22763/4089926742
 47. this thinking creates...
  48. an optimal experience  for
    for a privileged few...


         http://www.ﬂickr.com/photos/carbonnyc/5140154965
 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.ﬂickr.com/photos/dumbledad/3400708183
 50. 2 year old,  state-of-the-art
    your smartphone is obsolete,
           please upgrade now...


                               http://www.ﬂickr.com/photos/herval/2050815997
 51. um...
  52. for most folks  these
are not "higher priorities"...


            http://www.ﬂickr.com/photos/aaronpk/5328338679
 53. welcome to
the real  world...


http://www.ﬂickr.com/photos/slemmon/3971197662
 54. where we learn  to
adapt as required...


   http://www.ﬂickr.com/photos/kalleboo/3536493996
 55. craftivism




              where simply learning to knit
                   can change your life...



                         http://www.ﬂickr.com/photos/bosstweed/152159981
 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.ﬂickr.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  @grigs
to pick up those clippers...




          http://www.ﬂickr.com/photos/kdnewton/2691125617
 59. but...
  60. the iPhone inspired  everyone
to expect more from their devices...




                  http://www.ﬂickr.com/photos/tom_ruaat/5540148158
 61. "...yeah, but people  don't actually use
those undesirable devices?"




                                          http://www.ﬂickr.com/photos/misterian/4084280385
 62. yup
  63. ...have you actually
oﬀered  them anything yet?
                                        re
                         logs, chances aail...
            check your in the long t
           you'll ﬁnd them




            http://www.ﬂickr.com/photos/zoetnet/4669800101/
 64. small
                                     a few companies
                                 most certainly have...




             twitter indonesia


0.facebook

                                  OperaMini
                                      http://www.ﬂickr.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.ﬂickr.com/photos/thenationalguard/3251277781
 66. the web was  actually built
   on similar principles...




           http://www.ﬂickr.com/photos/tanaka/3212373419
 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.scientiﬁcamerican.com/article.cfm?id=long-live-the-web




                                                                           http://www.ﬂickr.com/photos/lonelyfox/2939757714
 68. unfortunately, our current
mental  models started back here...

                 http://www.ﬂickr.com/photos/blakespot/2343395804
 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.ﬂickr.com/photos/whiteafrican/2594981758
 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.ﬂickr.com/photos/jedibfa/5146867827
 71. <diversion>
           http://www.ﬂickr.com/photos/y_i/2330044065
 72. short
      a tale of clients
       and servers...




http://www.ﬂickr.com/photos/richardberg/2135409739
 73. pastrami on rye...    a client makes a request
                                to a server...




                              http://www.ﬂickr.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.ﬂickr.com/photos/_ppo/2393063853
 75. Rueben...


chilli dog...




                 a method to track each client
                        request is required...


                              http://www.ﬂickr.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.ﬂickr.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 doesn't)
preparation (vs just-in-time)
tacit knowledge




                                                                  http://www.ﬂickr.com/photos/_ppo/2393063853
 78. ensuring they get  exactly
       what they need...




        http://www.ﬂickr.com/photos/the_junes/2134127618
 79. rather than everything  they
          might not want...




         http://www.ﬂickr.com/photos/86624586@N00/10176570
 80. <diversion/>




           http://www.ﬂickr.com/photos/alper/3257406961
 81. ...but what does  this
have to do with mobile?




     http://www.ﬂickr.com/photos/mikeycordedda/5328343979
 82. accomplish great things  together
  working client and server can...




                http://www.ﬂickr.com/photos/maladjusted/2341398753
 83. client
  84. http://domain.org




client




                      yet unknown
                   a client makes
            a request to a server...
 85. http://domain.org




      server
 86. clouds are hip  these days...




      server
http://domain.org
 87. ...proﬁle please?




       server
http://domain.org




              server then asks the client
                  for it's proﬁle cookie...
 88. yeah, you're going  to need a proﬁle...



                             server
                       http://domain.org




                           if a client doesn't have a proﬁle
                      cookie the server creates one for it...
 89. {
  	
   	
  width:{
  	
  	
  	
  	
  screen:240,
  	
  	
  	
  	
  document:240
  	
  	
  }
  }
                                       let's start with the 'default' proﬁle...

 default proﬁle

*deﬁning a 'default' baseline
proﬁle depends on your
project requirements...
                                          server
                                    http://domain.org




                                                                            or default*

notice that this makes the
                                           begin with a baseline proﬁle
assumption that basic = default   that covers the very basic experience...
(in other words "mobile ﬁrst")
 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. 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. 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 proﬁle
 93. {
	
  	
  width:{
	
   	
  	
  	
  screen:240,
	
  	
  	
  	
  document:240
	
  	
  }
}
default proﬁle
                               ...hmm, I think I've seen this before?

                                               server
{
	
  width:480,                           http://domain.org
	
  height:480,
	
  color-­‐depth:8,
	
  touch:true,
	
  cookie:true,
	
  ...
}

DeviceAtlas proﬁle                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) proﬁle
	
  	
  	
  	
   "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 proﬁles 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 proﬁle

{
	
  width:320,
	
  droid:1,                   yeah, I've seen this before...
	
  canvas:true,
	
  flash:true,
	
  video:true,                            server
	
  ...                              http://domain.org
}

Tacit (or known) proﬁle


{
	
  width:480,
	
  height:480,                         this tacit knowledge is gathered
	
  color-­‐depth:8,
	
  touch:true,                    over time from other device proﬁles...
	
  cookie:true,
	
  ...                                                         ...or through knowledge
}                                                               gained during testing
DeviceAtlas proﬁle
 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 proﬁle
                                      merge the baseline data, with the data
                               returned from queries into the client proﬁle...
 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 proﬁle
                               write the proﬁle cookie to the doc header
                                     which will be returned to the client...
 98. {
	
  	
  width:{
	
   	
  	
  	
  screen:320,
	
  	
  	
  	
  document:320
	
  	
  },
	
  	
  xhr:true,                  response
	
  	
  canvas:true,                               proﬁle
	
  	
  flash:false,
	
  	
  video:true,
	
  	
  formats:{                    server
	
  	
  h264:probably,         http://domain.org
	
  	
  ogg:false,
	
  	
  webm:false
	
  	
  },
	
  	
  offline:true
}
                                                            for this client
Client proﬁle
                                     server now has a usable proﬁle
                                                 and can continue...
 99. media queries are  not a means                           using Javascript to modify
of adapting content contained                            signiﬁcant portions of the
within the DOM on the client...                       DOM will impact performance
                                                                on mobile devices...



                                      response
                                   ﬁlter
                                        server
                                  http://domain.org




                                                               and adapt
                       the server now begins to ﬁlter the content
                     based on the properties in the client proﬁle...
 100. Adaptation Rules
ensure all  images are
appropriately sized for
client display
replace any images that
contain ﬁne 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. Adaptation Rules
ensure all  images are
appropriately sized for
client display
replace any images that
contain ﬁne 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. 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 ﬁne 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 proﬁles
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.      "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 proﬁles
	
     "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 deﬁned 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.org




these resources can be static, cached
    or even dynamically generated...
                        which would make them
                         even more responsive
 105. response


       server
http://domain.org




                all content adaptation is
               performed on the server...
                               before the page is
                                  downloaded
 106. response


                 server
          http://domain.org




                                        on the client
alternate resources that may later be required
              are then bundled as references...
 107. {}
              response


               server
         http://domain.org




                                  feature detection
                an additional proﬁle <script>
is also included in the response to the client...
 108. {}
  110. server
http://domain.org
  111. client
  112. {
	
  	
  width:{
	
   	
  	
  	
  screen:480,
	
  	
  	
  	
  document:480
	
  	
  },
	
  	
  xhr:true,
	
  	
  canvas:true,
	
  	
  flash:true,
	
  	
  video:true,
	
  	
  formats:{
	
  	
  h264:probably,
	
  	
  ogg:true,
	
  	
  webm:false
	
  	
  },
	
  	
  offline:true
}
Client proﬁle
                                                     feature detection
                                    the client executes its proﬁle <script>
                               and updates its proﬁle cookie accordingly...
 114. or screen resize
on  an orientation change
    the script ﬁres again...
 115. 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 proﬁle
                                         and if needed, additional resources
                                                          are downloaded...
                                                                 based on the pre-
                                                                 bundled references
 116. http://domain.org/fava-beans/chianti




                             known
                      a client makes
           a new request to a server...
 117. ...proﬁle please?



       server
http://domain.org




             server then asks the client
                 for it's proﬁle cookie...
 118. {
	
  	
  width:{
                                ...ah, wonderful you've ﬁlled 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 proﬁle
                                                     which now accurately
                                           represents the requesting client...
 119. tacit data




             server
      http://domain.org




         server captures the client-tested
proﬁle properties for later dB integration...
 120. let me get  that for you...
                             response


                             server
                       http://domain.org




                                                 and adapt
                        server then begins to ﬁlter content
                                based on the client proﬁle...
 121. response


       server
http://domain.org




                              on the client
            any resources required are
         then bundled as references...
 122. {}
  124. server
http://domain.org
  125. client




          ...ta da!
 126. and repeat as
    required...
 129. all in preparation  for the coming
            zombie apocalypse...
            @scottjenson zombie frog




                 http://www.ﬂickr.com/photos/digitalsextant/3624030270
 130. beneﬁts of this
        approach...




http://www.ﬂickr.com/photos/sarahreido/3120877348
 131. known
                               focus on the features,
                                    not the device...




                        OperaMini



ceçi n'est plus un iphone
                                    http://www.ﬂickr.com/photos/jane_garratt/5377694159
 132. 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/
 133. tweaks for "important"  devices
(e.g. client-speciﬁc requests,
business goal-speciﬁc, partners,
high-traﬃc edge cases etc.)



                                   tacit data enables you to
create custom properties needed
for your speciﬁc project              ﬁne tune the proﬁles...



override false positives




                                            http://www.ﬂickr.com/photos/mujitra/2559447601
 134. handling
which makes edge  cases
         much easier...




   http://twitter.com/#!/stephanierieger/status/113604185857069056
 135. all heavy lifting  occurs
        on the server...

      http://www.ﬂickr.com/photos/mackarus/4289960218
 136. folks and their
supports  a broader range of devices
where client-side-only approaches
can be unreliable...




                                          http://www.ﬂickr.com/photos/mackarus/3022623866
 137. embrace the future  of
"unknown unknowns"...




        http://www.ﬂickr.com/photos/jgoforth/87176920
 138. a few thoughts
   for tomorrow...




http://www.ﬂickr.com/photos/slemmon/3971195778
 139. the <img> tag...
           was an after thought




http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element
 140. ...perhaps it's ﬁnally  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...
 141. <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>
 142. rethinking (and extending)
     content negotiation...




           http://en.wikipedia.org/wiki/Content_negotiation
 143. 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
 144. "The wise adapt  themselves to circumstances,
    as the water moulds itself to the pitcher."
                                             Chinese Proverb




                              http://www.ﬂickr.com/photos/theowl84/3045227001
 145. @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.ﬂickr.com/creativecommons/by-2.0


         licensed under

             http://creativecommons.org/licenses/by/2.0


             available on
             http://www.slideshare.net/yiibu/adaptation




                                                           http://www.ﬂickr.com/photos/kwl/4171367373
 