SlideShare ist ein Scribd-Unternehmen logo
1 von 145
Downloaden Sie, um offline zu lesen
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 loves
a 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 rane'll
      *current            –w
      fro m 25% to 50%licity...
                        p
       u se 1/3 for sim

                      *please note

                                     http://www.flickr.com/photos/scobleizer/4694051328
1/3
of the US has a
                         ...um, so 2/3 of the US
                  does not have a smartphone?!

 smartphone




                               http://www.flickr.com/photos/scobleizer/4694051328
or if you're a fanboy
                                              feel free to use this math*...



1/2
of the US has a
                                        and
                                              1/2
                                                does not...
 smartphone




                                 n't
                  t percentage ishe
      *the exac rtant for t
        terribly impo presentation...
                      is
     purposes of th


                                                        http://www.flickr.com/photos/abasketofpups/2662225972
will save us all!




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

                                     will save us all!




                                        http://www.flickr.com/photos/scobleizer/4694051328
the "tech industry"
...and are we making
promises we can't keep?


     htc Magic
     Android 1.6




                                         must
                   the " bleeding edge" e of
                     ha ve Android devic stop...
                                      r
                   200 9 is now a doo




                                                   http://www.flickr.com/photos/whatleydude/3547624583
the bleeding edge...
original
the iPhone
     2007
iPhone 3G
iPhone

 2007     2008
iPhone 3GS
iPhone   3G

2007     2008    2009
iPhone 4
iPhone   3G     3GS

2007     2008   2009     2010
3G     3GS     4

2008   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...


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


   web
 touch
         iPhone 3G
iPhone

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


         android
           apps



                   iPhone 3GS
iPhone       3G

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

                htc
              g-five
          samsung
         web os
                             iPhone 4
iPhone   3G           3GS

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


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

2008   2009       2010       2011
we're now in that
 big grey area...
or from a different perspective...
the bleeding edge...
the bleeding edge...



                       +   'ish via China




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




         http://www.flickr.com/photos/clairity/1449248189
2/3
            *


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




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




           http://www.flickr.com/photos/fpat/3692425154
welcome to the
  mobile web
I asked this a year ago,
i'm not sure anything's
changed!!




                                    if you want to use the web
                           on a mobile device, is the purchase
                               of an iPhone the cost of entry?



                                              http://www.flickr.com/photos/sketch22/1127556671
to infinity and beyond...




     well over
by 2015 50% of web traffic is expected
        to come from mobile devices




                 http://www.netmagazine.com/news/uk-sees-huge-mobile-web-traffic-growth-111340
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 web
on 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 to
purchase 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 far
higher priorities...



  http://www.flickr.com/photos/ilamont/4329364198
which often result in very
different purchasing decisions...




                 http://www.flickr.com/photos/timstock/535259176
however...
as lots of Android devices are
now available for less than $200*....




                    or very close to it...
                   ...*free is also becoming a popular option!

                                             http://www.flickr.com/photos/cambodia4kidsorg/5253151186
and some feature phones aimed at
                            the next billion now include WebKit
        ooh, touch...
                                            and a touch screen...




                      ype
Nokia  C3 Touch & T
   S  eries 40 device




                                                http://www.flickr.com/photos/yoggy0/5380738918
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-able
operating system                loaded with everything we've come
                                    to expect from a smartphone...


                    QWERTY keyboard
                    and/or trackball




                                                           http://www.flickr.com/photos/free_programmer/4371778263
less vibrant screens

                                                less responsive
                                                touch screens
limited or no data
plan bundled



                                                 lower spec RAM
                                                 and/or CPU/GPU




                                                few or no OEM
                                                OS updates



                               but not every smartphone
                                       is created equal...


                                         http://www.flickr.com/photos/nechbi/3841765925
UNDESIRABLE
              this inequality creates diversity
                   and (often) "undesirables"...

                              http://www.flickr.com/photos/handwrite/3460075040
"Android WebKit is the closest thing to
being the IE6 of mobile development for me."
- @dalmaer via http://functionsource.com/post/a-day-in-the-life-of-android-webkit-dealings



                                                        http://www.flickr.com/photos/blank22763/4089926742
this thinking creates...
an optimal experience for
    for a privileged few...


         http://www.flickr.com/photos/carbonnyc/5140154965
and a missed opportunity
for many more...

           linkedin HTML5 webapp disappointment




                                                                                    must
                                                                     leeding edge" f 2009
                                                              the "b              o
                                                            have A ndroid device r stop...
                                                                              doo
                                                             is once again a
                                                  http://www.flickr.com/photos/dumbledad/3400708183
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 these
are not "higher priorities"...


            http://www.flickr.com/photos/aaronpk/5328338679
welcome to
the real world...


http://www.flickr.com/photos/slemmon/3971197662
where we learn to
adapt 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 Thriving
http://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 @grigs
to pick up those clippers...




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




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




                                          http://www.flickr.com/photos/misterian/4084280385
yup
...have you actually
offered them anything yet?
                                        re
                         logs, chances aail...
            check your in the long t
           you'll find them




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




             twitter indonesia


0.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 Web's
usefulness and growth is universality.

The Web should be usable by people with disabilities.
It must work with any form of information, be it a
document or a point of data, and information of any
quality–from a silly tweet to a scholarly paper.

And it should be accessible from any kind of hardware
than can connect to the internet: stationary or mobile,
small screen or large."
                                                                                            ...
                                                                    as seen b efore @bdconf
Tim Berners-Lee

Long Live the Web
http://www.scientificamerican.com/article.cfm?id=long-live-the-web




                                                                           http://www.flickr.com/photos/lonelyfox/2939757714
unfortunately, our current
mental 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 world
paul rouget taiwan africa
                              dominated by devices like these...

                                                          http://www.flickr.com/photos/whiteafrican/2594981758
“The best, most solid way out of a crisis
in a changing market is through
experiment and adaptation.”
Richard Branson
Business Stripped Bare – Adventures of a Global Entrepreneur




                                                               http://www.flickr.com/photos/jedibfa/5146867827
<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 doesn't)
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 this
have 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.org




client




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




     server
clouds are hip these days...




      server
http://domain.org
...profile please?




      server
http://domain.org




              server then asks the client
                  for it's profile cookie...
yeah, you're going to need a profile...



                             server
                       http://domain.org




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

 default profile

*defining a 'default' baseline
profile depends on your
project requirements...
                                          server
                                    http://domain.org




                                                                            or default*

notice that this makes the
                                           begin with a baseline profile
assumption that basic = default   that covers the very basic experience...
(in other words "mobile first")
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
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
Mozilla/5.0	
  (Linux;	
  U;	
  Android	
  2.1-­‐update1;	
  en-­‐gb;	
  Nexus	
  One	
  Build/ERE27)	
  
    AppleWebKit/530.17	
  (KHTML,	
  like	
  Gecko)	
  Version/4.0	
  Mobile	
  Safari/530.17




{
	
  width:480,                                                ...found it, here it comes!
	
  height:480,
	
  color-­‐depth:8,
	
  touch:true,
	
  cookie:true,
	
  ...
}
                                         http://deviceatlas.com
DeviceAtlas profile
{
	
  	
  width:{
	
  	
  	
  	
  screen:240,
	
  	
  	
  	
  document:240
	
  	
  }
}
default profile
                               ...hmm, I think I've seen this before?

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

DeviceAtlas profile                now query the user agent string against
                                any tacit knowledge you have collected...
                                                                        may
 	
  	
  	
   "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, I've seen this before...
	
  canvas:true,
	
  flash:true,
	
  video:true,                            server
	
  ...                              http://domain.org
}

Tacit (or known) profile


{
	
  width:480,
	
  height:480,                         this tacit knowledge is gathered
	
  color-­‐depth:8,
	
  touch:true,                    over time from other device profiles...
	
  cookie:true,
	
  ...                                                         ...or through knowledge
}                                                               gained during testing
DeviceAtlas profile
{
	
  	
  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 client
Client profile
                                     server now has a usable profile
                                                 and can continue...
media queries are not a means                           using Javascript to modify
of adapting content contained                            significant portions of the
within the DOM on the client...                       DOM will impact performance
                                                                on mobile devices...



                                      response
                                   filter
                                        server
                                  http://domain.org




                                                               and adapt
                       the server now begins to filter the content
                     based on the properties in the client profile...
Adaptation Rules
ensure all images are
appropriately sized for
client display
replace any images that
contain fine details or text
replace Flash media with
an appropriate alternative         response
where not supported
remove unnecessary
markup, scripts, etc.                server
                               http://domain.org




                                                              or app
                        adaptation 'rules' will vary from site to site,
                          but adapting <img>'s is most common...
Adaptation Rules
ensure all images are
appropriately sized for
client display
replace any images that
contain fine details or text
replace Flash media with
an appropriate alternative         response
where not supported
remove unnecessary
markup, scripts, etc.                server
                               http://domain.org
adapt large tables as
required, link to data
serve appropriate video
format, codec and size
adapt DOM components
including scripts and styles       <video>, <table> and other DOM
                                  structures also require adaptation
                                                   may
Adaptation Rules                                     Resource Bundles
ensure all images are                                         alternate content
appropriately sized for                                   appropriate for context
client display
                                                       alternate DOM templates,
replace any images that                               components & fragments
contain fine details or text
                                                     alternate sized, formatted +
replace Flash media with                              encoded video as required
an appropriate alternative         response
where not supported                                         alternate images for
                                                            required breakpoints
remove unnecessary
markup, scripts, etc.                server            alternate scripts + styles
                               http://domain.org       for required client profiles
adapt large tables as
required, link to data
serve appropriate video
format, codec and size
adapt DOM components
including scripts and styles                       you will often require
                                                        new resources
    "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.org




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


      server
http://domain.org




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


                server
          http://domain.org




                                        on the client
alternate 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...
{}
Adaptation: Why responsive design actually begins on the server
server
http://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...
Adaptation: Why responsive design actually begins on the server
or screen resize
on 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?



      server
http://domain.org




             server then asks the client
                 for it's profile cookie...
{
	
  	
  width:{
                               ...ah, wonderful you've filled in the rest!
	
  	
  	
  	
  screen:800,
	
  	
  	
  	
  document:800
	
  	
  },
	
  	
  xhr:true,
	
  	
  canvas:true,
	
  	
  flash:true,
	
  	
  video:true,
	
  	
  formats:{                            server
	
  	
  h264:probably,                 http://domain.org
	
  	
  ogg:true,
	
  	
  webm:false
	
  	
  },
	
  	
  offline:true
}
Client profile
                                                     which now accurately
                                           represents the requesting client...
tacit data




            server
      http://domain.org




         server captures the client-tested
profile 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


      server
http://domain.org




                              on the client
            any resources required are
         then bundled as references...
{}
Adaptation: Why responsive design actually begins on the server
server
http://domain.org
client




         ...ta da!
and repeat as
   required...
Adaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the server
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...




                        OperaMini



ceçi n'est plus un iphone
                                    http://www.flickr.com/photos/jane_garratt/5377694159
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/
tweaks for "important" devices
(e.g. client-specific requests,
business goal-specific, partners,
high-traffic edge cases etc.)



                                   tacit data enables you to
create custom properties needed
for your specific project              fine tune the profiles...



override false positives




                                            http://www.flickr.com/photos/mujitra/2559447601
handling
which 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 their
supports a broader range of devices
where client-side-only approaches
can 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 thought




http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element
...perhaps it's finally time
                                                                       to rethink it?


<image	
  alt="butterfly">
  <source	
  src="butterfly-­‐small.png"	
  width="100"	
  height="80"	
  />
  <source	
  src="butterfly.png"	
  width="200"	
  height="160"	
  />
  <source	
  src="butterfly-­‐large.svg"	
  width="400"	
  height="400"
  	
  media="min-­‐device-­‐width:320px"	
  />
</image>
                       this of course does not exist,
                       and is simply wishful thinking...
<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  Trasatti's "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
@yiibu
please
say
         hi hello@yiibu.com


                                                                       thank you



    the font we
    use is
             Museo
             http://www.exljbris.com/museo.html


         many thanks to the
         amazing photographers
         on

             http://www.flickr.com/creativecommons/by-2.0


         licensed under

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


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




                                                           http://www.flickr.com/photos/kwl/4171367373

Más contenido relacionado

Was ist angesagt?

Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical webyiibu
 
Why You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeWhy You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeJason Grigsby
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuBryan Rieger
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileJason Grigsby
 
Designing for multiple devices - GA London, 19 Nov 2012
Designing for multiple devices - GA London, 19 Nov 2012Designing for multiple devices - GA London, 19 Nov 2012
Designing for multiple devices - GA London, 19 Nov 2012Anna Dahlström
 
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013Anna Dahlström
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD UK Ltd
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101Antony Ribot
 
Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013
Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013
Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013Anna Dahlström
 
SIUI - Libraries & the Post-PC Era
SIUI - Libraries & the Post-PC EraSIUI - Libraries & the Post-PC Era
SIUI - Libraries & the Post-PC EraJason Griffey
 
Best of GA: Designing For Multiple Devices - Google Campus, 26 Feb 2013
Best of GA: Designing For Multiple Devices - Google Campus, 26 Feb 2013Best of GA: Designing For Multiple Devices - Google Campus, 26 Feb 2013
Best of GA: Designing For Multiple Devices - Google Campus, 26 Feb 2013Anna Dahlström
 
Designing for multiple devices - GA London, 14 Jan 2013
Designing for multiple devices - GA London, 14 Jan 2013Designing for multiple devices - GA London, 14 Jan 2013
Designing for multiple devices - GA London, 14 Jan 2013Anna Dahlström
 
Designing For Multiple Devices - GA New York, 6 March 2013
Designing For Multiple Devices - GA New York, 6 March 2013Designing For Multiple Devices - GA New York, 6 March 2013
Designing For Multiple Devices - GA New York, 6 March 2013Anna Dahlström
 
GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012Anna Dahlström
 
Designing For Multiple Devices - GA London, 04 Mar 2013
Designing For Multiple Devices - GA London,  04 Mar 2013Designing For Multiple Devices - GA London,  04 Mar 2013
Designing For Multiple Devices - GA London, 04 Mar 2013Anna Dahlström
 
Designing for multiple devices - GA, New York 08 Oct 2012
Designing for multiple devices - GA, New York 08 Oct 2012Designing for multiple devices - GA, New York 08 Oct 2012
Designing for multiple devices - GA, New York 08 Oct 2012Anna Dahlström
 

Was ist angesagt? (18)

Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical web
 
Why You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeWhy You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark College
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by Yiibu
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4Mobile
 
Designing for multiple devices - GA London, 19 Nov 2012
Designing for multiple devices - GA London, 19 Nov 2012Designing for multiple devices - GA London, 19 Nov 2012
Designing for multiple devices - GA London, 19 Nov 2012
 
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101
 
Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013
Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013
Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013
 
SIUI - Libraries & the Post-PC Era
SIUI - Libraries & the Post-PC EraSIUI - Libraries & the Post-PC Era
SIUI - Libraries & the Post-PC Era
 
Best of GA: Designing For Multiple Devices - Google Campus, 26 Feb 2013
Best of GA: Designing For Multiple Devices - Google Campus, 26 Feb 2013Best of GA: Designing For Multiple Devices - Google Campus, 26 Feb 2013
Best of GA: Designing For Multiple Devices - Google Campus, 26 Feb 2013
 
Designing for multiple devices - GA London, 14 Jan 2013
Designing for multiple devices - GA London, 14 Jan 2013Designing for multiple devices - GA London, 14 Jan 2013
Designing for multiple devices - GA London, 14 Jan 2013
 
Designing For Multiple Devices - GA New York, 6 March 2013
Designing For Multiple Devices - GA New York, 6 March 2013Designing For Multiple Devices - GA New York, 6 March 2013
Designing For Multiple Devices - GA New York, 6 March 2013
 
GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012
 
Designing For Multiple Devices - GA London, 04 Mar 2013
Designing For Multiple Devices - GA London,  04 Mar 2013Designing For Multiple Devices - GA London,  04 Mar 2013
Designing For Multiple Devices - GA London, 04 Mar 2013
 
Learning Futures
Learning FuturesLearning Futures
Learning Futures
 
Designing for multiple devices - GA, New York 08 Oct 2012
Designing for multiple devices - GA, New York 08 Oct 2012Designing for multiple devices - GA, New York 08 Oct 2012
Designing for multiple devices - GA, New York 08 Oct 2012
 
Imagination and Innovation in IT
Imagination and Innovation in ITImagination and Innovation in IT
Imagination and Innovation in IT
 

Andere mochten auch

Your browser can see and hear and ...
Your browser can see and hear and ...Your browser can see and hear and ...
Your browser can see and hear and ...Rob Manson
 
e is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentatione is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web PresentationRob Manson
 
Build your own reality
Build your own realityBuild your own reality
Build your own realityRob Manson
 
Divergence - what happens after Convergence
Divergence - what happens after ConvergenceDivergence - what happens after Convergence
Divergence - what happens after ConvergenceRob Manson
 
Mobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyMobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyRob Manson
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?yiibu
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...yiibu
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical webyiibu
 
Most Beautiful Women Of The World
Most Beautiful Women Of The WorldMost Beautiful Women Of The World
Most Beautiful Women Of The WorldJuan De Flandes
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new againyiibu
 
Letting Go
Letting GoLetting Go
Letting Goyiibu
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignSara Cannon
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversationyiibu
 
iMentor Steve Jobs
iMentor Steve JobsiMentor Steve Jobs
iMentor Steve JobsTomas Bay
 
Travel Tips Learned from Japan! - #japan #traveltips
Travel Tips Learned from Japan! - #japan #traveltipsTravel Tips Learned from Japan! - #japan #traveltips
Travel Tips Learned from Japan! - #japan #traveltipsEmpowered Presentations
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Webyiibu
 

Andere mochten auch (16)

Your browser can see and hear and ...
Your browser can see and hear and ...Your browser can see and hear and ...
Your browser can see and hear and ...
 
e is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentatione is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentation
 
Build your own reality
Build your own realityBuild your own reality
Build your own reality
 
Divergence - what happens after Convergence
Divergence - what happens after ConvergenceDivergence - what happens after Convergence
Divergence - what happens after Convergence
 
Mobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyMobiles Can Make Your Business Fly
Mobiles Can Make Your Business Fly
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical web
 
Most Beautiful Women Of The World
Most Beautiful Women Of The WorldMost Beautiful Women Of The World
Most Beautiful Women Of The World
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new again
 
Letting Go
Letting GoLetting Go
Letting Go
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation
 
iMentor Steve Jobs
iMentor Steve JobsiMentor Steve Jobs
iMentor Steve Jobs
 
Travel Tips Learned from Japan! - #japan #traveltips
Travel Tips Learned from Japan! - #japan #traveltipsTravel Tips Learned from Japan! - #japan #traveltips
Travel Tips Learned from Japan! - #japan #traveltips
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Web
 

Ähnlich wie Adaptation: Why responsive design actually begins on the server

Its about people, not devices
Its about people, not devicesIts about people, not devices
Its about people, not devicesAlexander Anikin
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuJim Porter
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Therese Kokot
 
Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Gustavo Luveira
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Anna Dahlström
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Victor Minuesa
 
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCJason Grigsby
 
Beyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuBeyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuAdRoll
 
The effects of digital devices
The effects of digital devicesThe effects of digital devices
The effects of digital devicesGreg Dillon
 
Mobile Web Vs Mobile Apps
Mobile Web Vs Mobile AppsMobile Web Vs Mobile Apps
Mobile Web Vs Mobile AppsJoe Hass
 
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentNative vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentJason Grigsby
 
Mobile UX 101 @ Flash Camp Manchester
Mobile UX 101 @ Flash Camp ManchesterMobile UX 101 @ Flash Camp Manchester
Mobile UX 101 @ Flash Camp ManchesterAntony Ribot
 
Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Raymond Morin
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesJason Grigsby
 

Ähnlich wie Adaptation: Why responsive design actually begins on the server (20)

Its about people, not devices
Its about people, not devicesIts about people, not devices
Its about people, not devices
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
Rethinking the mobile web
Rethinking the mobile webRethinking the mobile web
Rethinking the mobile web
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By Yiibu
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
 
Beyond the mobile web
Beyond the mobile webBeyond the mobile web
Beyond the mobile web
 
Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01
 
Mobile mapping w3g
Mobile mapping w3gMobile mapping w3g
Mobile mapping w3g
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
 
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
 
Beyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuBeyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibu
 
A Mobile Introductory
A Mobile IntroductoryA Mobile Introductory
A Mobile Introductory
 
The effects of digital devices
The effects of digital devicesThe effects of digital devices
The effects of digital devices
 
Mobile Web Vs Mobile Apps
Mobile Web Vs Mobile AppsMobile Web Vs Mobile Apps
Mobile Web Vs Mobile Apps
 
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentNative vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
 
Mobile UX 101 @ Flash Camp Manchester
Mobile UX 101 @ Flash Camp ManchesterMobile UX 101 @ Flash Camp Manchester
Mobile UX 101 @ Flash Camp Manchester
 
Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop Shackles
 
Mobile experiences
Mobile experiencesMobile experiences
Mobile experiences
 

Último

EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 

Último (20)

EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 

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.flickr.com/photos/newsbiepix/4113886275
  • 2. the tech media loves a good story... TechCrunch http://www.flickr.com/photos/scobleizer/4694051328
  • 3. 200 million iOS devices and life on the bleeding edge... http://www.flickr.com/photos/scobleizer/3553486766
  • 4. 1/3 * of the US has a smartphone ge statistics rane'll *current –w fro m 25% to 50%licity... p u se 1/3 for sim *please note http://www.flickr.com/photos/scobleizer/4694051328
  • 5. 1/3 of the US has a ...um, so 2/3 of the US does not have a smartphone?! smartphone http://www.flickr.com/photos/scobleizer/4694051328
  • 6. or if you're a fanboy feel free to use this math*... 1/2 of the US has a and 1/2 does not... smartphone n't t percentage ishe *the exac rtant for t terribly impo presentation... is purposes of th http://www.flickr.com/photos/abasketofpups/2662225972
  • 7. will save us all! http://www.flickr.com/photos/scobleizer/4694051328
  • 8. but it's really only kinda useable on few high-end devices... will save us all! http://www.flickr.com/photos/scobleizer/4694051328
  • 9. the "tech industry" ...and are we making promises we can't keep? htc Magic Android 1.6 must the " bleeding edge" e of ha ve Android devic stop... r 200 9 is now a doo http://www.flickr.com/photos/whatleydude/3547624583
  • 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 effect n. a peripheral or secondary effect, 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-five 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 different perspective...
  • 25. the bleeding edge... + 'ish via China opportunity
  • 26. but we still can't see the forest for the trees... http://www.flickr.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.flickr.com/photos/centralasian/3239065547
  • 28. last year we asked a simple question... http://www.flickr.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.flickr.com/photos/sketch22/1127556671
  • 30. to infinity and beyond... well over by 2015 50% of web traffic is expected to come from mobile devices http://www.netmagazine.com/news/uk-sees-huge-mobile-web-traffic-growth-111340
  • 31. 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.flickr.com/photos/dantaylor/2161663267
  • 33. gotta get 'em all... or even want many of us cannot afford to purchase every shiny new device released... http://www.flickr.com/photos/bytemarks/4732726333
  • 34. especially in the light of recent events... http://www.flickr.com/photos/wagnertc/3217859975
  • 36. most folks have much more pressing concerns... http://www.flickr.com/photos/bobolink/4706580
  • 37. and far higher priorities... http://www.flickr.com/photos/ilamont/4329364198
  • 38. which often result in very different purchasing decisions... http://www.flickr.com/photos/timstock/535259176
  • 40. as lots of Android devices are now available for less than $200*.... or very close to it... ...*free is also becoming a popular option! http://www.flickr.com/photos/cambodia4kidsorg/5253151186
  • 41. and some feature phones aimed at the next billion now include WebKit ooh, touch... and a touch screen... ype Nokia C3 Touch & T S eries 40 device http://www.flickr.com/photos/yoggy0/5380738918
  • 42. every phone is now (essentially) a smartphone*... or soon will be ns of ctual definitioy - but to *a ill var 'smartphone' wey are all magic... normal folks th http://www.flickr.com/photos/tanj/4432327487
  • 43. camera, video, 3G connectivity music player, etc. large, colour touch sensitive screen a modern web browser (not WAP) (often) a real, update-able operating system loaded with everything we've come to expect from a smartphone... QWERTY keyboard and/or trackball http://www.flickr.com/photos/free_programmer/4371778263
  • 44. less vibrant screens less responsive touch screens limited or no data plan bundled lower spec RAM and/or CPU/GPU few or no OEM OS updates but not every smartphone is created equal... http://www.flickr.com/photos/nechbi/3841765925
  • 45. UNDESIRABLE this inequality creates diversity and (often) "undesirables"... http://www.flickr.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.flickr.com/photos/blank22763/4089926742
  • 48. an optimal experience for for a privileged few... http://www.flickr.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.flickr.com/photos/dumbledad/3400708183
  • 50. 2 year old, state-of-the-art your smartphone is obsolete, please upgrade now... http://www.flickr.com/photos/herval/2050815997
  • 51. um...
  • 52. for most folks these are not "higher priorities"... http://www.flickr.com/photos/aaronpk/5328338679
  • 53. welcome to the real world... http://www.flickr.com/photos/slemmon/3971197662
  • 54. where we learn to adapt as required... http://www.flickr.com/photos/kalleboo/3536493996
  • 55. craftivism where simply learning to knit can change your life... http://www.flickr.com/photos/bosstweed/152159981
  • 56. from your local library where borrowing books for free is beating paying for ebooks... Times Are Tough, Libraries Are Thriving http://www.nytimes.com/2009/03/15/nyregion/long-island/15libraryli.html http://www.flickr.com/photos/ccacnorthlib/3553821229/
  • 57. where Hulu, iTunes and sports bars are replacing cable services... expensive http://www.businessinsider.com/2008/3/hulu-household-why-i-got-rid-of-cable
  • 58. and which led @grigs to pick up those clippers... http://www.flickr.com/photos/kdnewton/2691125617
  • 60. the iPhone inspired everyone to expect more from their devices... http://www.flickr.com/photos/tom_ruaat/5540148158
  • 61. "...yeah, but people don't actually use those undesirable devices?" http://www.flickr.com/photos/misterian/4084280385
  • 62. yup
  • 63. ...have you actually offered them anything yet? re logs, chances aail... check your in the long t you'll find them http://www.flickr.com/photos/zoetnet/4669800101/
  • 64. small a few companies most certainly have... twitter indonesia 0.facebook OperaMini http://www.flickr.com/photos/nseika/5848996146
  • 65. us humans are amazing when it comes to adapting to new circumstances... ...do we still really need the dogs? http://www.flickr.com/photos/thenationalguard/3251277781
  • 66. the web was actually built on similar principles... http://www.flickr.com/photos/tanaka/3212373419
  • 67. "The primary design principle underlying the Web's usefulness and growth is universality. The Web should be usable by people with disabilities. It must work with any form of information, be it a document or a point of data, and information of any quality–from a silly tweet to a scholarly paper. And it should be accessible from any kind of hardware than can connect to the internet: stationary or mobile, small screen or large." ... as seen b efore @bdconf Tim Berners-Lee Long Live the Web http://www.scientificamerican.com/article.cfm?id=long-live-the-web http://www.flickr.com/photos/lonelyfox/2939757714
  • 68. unfortunately, our current mental models started back here... http://www.flickr.com/photos/blakespot/2343395804
  • 69. The Era of mobile dominance is beginning which did not prepare us for a world paul rouget taiwan africa dominated by devices like these... http://www.flickr.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.flickr.com/photos/jedibfa/5146867827
  • 71. <diversion> http://www.flickr.com/photos/y_i/2330044065
  • 72. short a tale of clients and servers... http://www.flickr.com/photos/richardberg/2135409739
  • 73. pastrami on rye... a client makes a request to a server... http://www.flickr.com/photos/_ppo/2393063853
  • 74. other unique clients make similar requests... yet not identical Rueben... turkey chilli dog... grilled cheese brisket... corned beef... http://www.flickr.com/photos/_ppo/2393063853
  • 75. Rueben... chilli dog... a method to track each client request is required... http://www.flickr.com/photos/mrgarin/3476714113
  • 76. as each client request is received... tra pickle... no pickle... Rueben... pastrami on rye... turkey chilli dog... Rueben... Rueben... grilled cheese brisket... corned beef... http://www.flickr.com/photos/_ppo/2393063853
  • 77. the server tailors each request to each client... 320, hold the pickle... one more 320... 150, pastrami... 210 to go... tracking (ticketing, bills, etc) analytics (what works, what doesn't) preparation (vs just-in-time) tacit knowledge http://www.flickr.com/photos/_ppo/2393063853
  • 78. ensuring they get exactly what they need... http://www.flickr.com/photos/the_junes/2134127618
  • 79. rather than everything they might not want... http://www.flickr.com/photos/86624586@N00/10176570
  • 80. <diversion/> http://www.flickr.com/photos/alper/3257406961
  • 81. ...but what does this have to do with mobile? http://www.flickr.com/photos/mikeycordedda/5328343979
  • 82. accomplish great things together working client and server can... http://www.flickr.com/photos/maladjusted/2341398753
  • 84. http://domain.org client yet unknown a client makes a request to a server...
  • 86. clouds are hip these days... server http://domain.org
  • 87. ...profile please? server http://domain.org server then asks the client for it's profile cookie...
  • 88. yeah, you're going to need a profile... server http://domain.org if a client doesn't have a profile cookie the server creates one for it...
  • 89. {    width:{        screen:240,        document:240    } } let's start with the 'default' profile... default profile *defining a 'default' baseline profile depends on your project requirements... server http://domain.org or default* notice that this makes the begin with a baseline profile assumption that basic = default that covers the very basic experience... (in other words "mobile first")
  • 90. 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 profile
  • 93. {    width:{        screen:240,        document:240    } } default profile ...hmm, I think I've seen this before? server {  width:480, http://domain.org  height:480,  color-­‐depth:8,  touch:true,  cookie:true,  ... } DeviceAtlas profile now query the user agent string against any tacit knowledge you have collected... may
  • 94.         "profile":{"width":"240"}      },      "desktop":  {         "match":"#windows|macintosh|linux#i",         "profile":{"width":"800"} tacit data      },      "iphone":  {         "match":"#iphone#i",         "profile":{"ios":"1",  "width":"320",  "svg":true,  "canvas":true}      },      "ipad":  {         "match":"#ipad#i",         "profile":{"ios":"1",  "width":"768",  "svg":true,  "canvas":true}      },    "android":  {         "match":"#android#i",         "profile":{"droid":"1",  "width":"320",  "flash":true,  "canvas":true,  "video":true}      },      "symbian^3":  { Tacit (or known) profile         "match":"#symbian/3#i",         "profile":{"sym3":"1",  "width":"360"}      },      "symbian9.4":  {         "match":"#symbianos/9.4#i",         "profile":{"sym94":"1",  "width":"360"}      },      "symbian9.3":  {         "match":"#symbianos/9.3#i",         "profile":{"sym93":"1",  "width":"360"} partial profiles are matched via      },      "n73":  { UA string fragments...         "match":"#N73#i",         "profile":{"sym91":"1",  "width":"240"}      },      "series602.x":  {         "match":"#series60/2.8|{series60/2.9}#i",
  • 95. {    width:{ tacit data        screen:240,        document:240    } } default profile {  width:320,  droid:1, yeah, I've seen this before...  canvas:true,  flash:true,  video:true, server  ... http://domain.org } Tacit (or known) profile {  width:480,  height:480, this tacit knowledge is gathered  color-­‐depth:8,  touch:true, over time from other device profiles...  cookie:true,  ... ...or through knowledge } gained during testing DeviceAtlas profile
  • 96. {    width:{        screen:320,        document:320    },    xhr:true,    canvas:true,    flash:false,    video:true,    formats:{ server    h264:probably, http://domain.org    ogg:false,    webm:false    },    offline:true } Client profile merge the baseline data, with the data returned from queries into the client profile...
  • 97. cookie {    width:{ document        screen:320,        document:320    },    xhr:true, response    canvas:true,    flash:false,    video:true,    formats:{ server    h264:probably, http://domain.org    ogg:false,    webm:false    },    offline:true } Client profile write the profile cookie to the doc header which will be returned to the client...
  • 98. {    width:{        screen:320,        document:320    },    xhr:true, response    canvas:true, profile    flash:false,    video:true,    formats:{ server    h264:probably, http://domain.org    ogg:false,    webm:false    },    offline:true } for this client Client profile server now has a usable profile and can continue...
  • 99. media queries are not a means using Javascript to modify of adapting content contained significant portions of the within the DOM on the client... DOM will impact performance on mobile devices... response filter server http://domain.org and adapt the server now begins to filter the content based on the properties in the client profile...
  • 100. Adaptation Rules ensure all images are appropriately sized for client display replace any images that contain fine details or text replace Flash media with an appropriate alternative response where not supported remove unnecessary markup, scripts, etc. server http://domain.org or app adaptation 'rules' will vary from site to site, but adapting <img>'s is most common...
  • 101. Adaptation Rules ensure all images are appropriately sized for client display replace any images that contain fine details or text replace Flash media with an appropriate alternative response where not supported remove unnecessary markup, scripts, etc. server http://domain.org adapt large tables as required, link to data serve appropriate video format, codec and size adapt DOM components including scripts and styles <video>, <table> and other DOM structures also require adaptation may
  • 102. Adaptation Rules Resource Bundles ensure all images are alternate content appropriately sized for appropriate for context client display alternate DOM templates, replace any images that components & fragments contain fine details or text alternate sized, formatted + replace Flash media with encoded video as required an appropriate alternative response where not supported alternate images for required breakpoints remove unnecessary markup, scripts, etc. server alternate scripts + styles http://domain.org for required client profiles adapt large tables as required, link to data serve appropriate video format, codec and size adapt DOM components including scripts and styles you will often require new resources
  • 103.   "pinch-­‐zoom":{     "0-­‐320":"resources/images/meego/pinch-­‐zoom@240.png",     "320-­‐720":"resources/images/meego/pinch-­‐zoom@320.png", Resource Bundles     "720-­‐9999":"resources/images/meego/pinch-­‐zoom.png"   }, alternate content   "typing":{     "0-­‐320":"resources/images/meego/typing@240.png", appropriate for context     "320-­‐720":"resources/images/meego/typing@320.png",     "720-­‐9999":"resources/images/meego/typing.png" alternate DOM templates,   }, components & fragments   "stay-­‐safe":{     "0-­‐320":"resources/images/meego/stay-­‐safe@240.png", alternate sized, formatted +     "320-­‐720":"resources/images/meego/stay-­‐safe@320.png", encoded video as required     "720-­‐9999":"resources/images/meego/stay-­‐safe.png"   }, alternate images for   "swipe-­‐more":{ required breakpoints     "0-­‐320":"resources/images/meego/swipe@240.jpg",     "320-­‐640":"resources/images/meego/swipe@320.jpg",     "640-­‐9999":"resources/images/meego/swipe.jpg" alternate scripts + styles   }, for required client profiles   "pinch-­‐zoom-­‐more":{     "0-­‐320":"resources/images/meego/pinch-­‐zoom@240.png",     "320-­‐720":"resources/images/meego/pinch-­‐zoom@320.png",     "720-­‐9999":"resources/images/meego/pinch-­‐zoom.png"   },   "typing-­‐more":{     "0-­‐320":"resources/images/meego/typing@240.png",       "320-­‐720":"resources/images/meego/typing@320.png",   "720-­‐9999":"resources/images/meego/typing.png" which can be defined in     }, "stay-­‐safe-­‐more":{ any number of ways...     "0-­‐320":"resources/images/meego/stay-­‐safe@240.png",     "320-­‐720":"resources/images/meego/stay-­‐safe@320.png",     "720-­‐9999":"resources/images/meego/stay-­‐safe.png"   },   "location":{
  • 104. video data images response server http://domain.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 profile <script> is also included in the response to the client...
  • 108. {}
  • 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 profile feature detection the client executes its profile <script> and updates its profile cookie accordingly...
  • 114. or screen resize on an orientation change the script fires 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 profile 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. ...profile please? server http://domain.org server then asks the client for it's profile cookie...
  • 118. {    width:{ ...ah, wonderful you've filled in the rest!        screen:800,        document:800    },    xhr:true,    canvas:true,    flash:true,    video:true,    formats:{ server    h264:probably, http://domain.org    ogg:true,    webm:false    },    offline:true } Client profile which now accurately represents the requesting client...
  • 119. tacit data server http://domain.org server captures the client-tested profile properties for later dB integration...
  • 120. let me get that for you... response server http://domain.org and adapt server then begins to filter content based on the client profile...
  • 121. response server http://domain.org on the client any resources required are then bundled as references...
  • 122. {}
  • 125. client ...ta da!
  • 126. and repeat as required...
  • 129. all in preparation for the coming zombie apocalypse... @scottjenson zombie frog http://www.flickr.com/photos/digitalsextant/3624030270
  • 130. benefits of this approach... http://www.flickr.com/photos/sarahreido/3120877348
  • 131. known focus on the features, not the device... OperaMini ceçi n'est plus un iphone http://www.flickr.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-specific requests, business goal-specific, partners, high-traffic edge cases etc.) tacit data enables you to create custom properties needed for your specific project fine tune the profiles... override false positives http://www.flickr.com/photos/mujitra/2559447601
  • 134. handling which makes edge cases much easier... http://twitter.com/#!/stephanierieger/status/113604185857069056
  • 135. all heavy lifting occurs on the server... http://www.flickr.com/photos/mackarus/4289960218
  • 136. folks and their supports a broader range of devices where client-side-only approaches can be unreliable... http://www.flickr.com/photos/mackarus/3022623866
  • 137. embrace the future of "unknown unknowns"... http://www.flickr.com/photos/jgoforth/87176920
  • 138. a few thoughts for tomorrow... http://www.flickr.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 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...
  • 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.flickr.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.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