adaptation
DESCRIPTION
TRANSCRIPT
![Page 1: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/newsbiepix/4113886275
why responsive design actually begins on the server...
Adaptation
http://creativecommons.org/licenses/by/2.0
![Page 2: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/2.jpg)
http://www.flickr.com/photos/scobleizer/4694051328
a good story...the tech media loves
TechCrunch
![Page 3: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/3.jpg)
bleeding edge...and life on the
http://www.flickr.com/photos/scobleizer/3553486766
200 million iOS devices
![Page 4: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/4.jpg)
http://www.flickr.com/photos/scobleizer/4694051328
1/3of the US has a smartphone
*please note
*current statistics range
from 25% to 50% – we'll use 1/3 for simplicity...
*
![Page 5: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/5.jpg)
http://www.flickr.com/photos/scobleizer/4694051328
1/3of the US has a smartphone
does not have a smartphone?!...um, so 2/3 of the US
![Page 6: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/6.jpg)
http://www.flickr.com/photos/abasketofpups/2662225972
1/2of the US has a smartphone
feel free to use this math*...or if you're a fanboy
1/2does not...
and
*the exact percentage isn't
terribly important for the
purposes of this presentation...
![Page 7: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/7.jpg)
http://www.flickr.com/photos/scobleizer/4694051328
will save us all!
![Page 8: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/scobleizer/4694051328
on few high-end devices...but it's really only kinda useable
will save us all!
![Page 9: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/9.jpg)
promises we can't keep?...and are we making
http://www.flickr.com/photos/whatleydude/3547624583
the "tech industry"
the "bleeding edge" must have Android device of
2009 is now a door stop...
htc MagicAndroid 1.6
![Page 10: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/10.jpg)
the bleeding edge...
![Page 11: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/11.jpg)
2007
the iPhoneoriginal
![Page 12: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/12.jpg)
2008
iPhone 3G
2007
iPhone
![Page 13: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/13.jpg)
2008
iPhone 3GS
2007 2009
3GiPhone
![Page 14: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/14.jpg)
20082007 2009
3GiPhone
iPhone 4
2010
3GS
![Page 15: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/15.jpg)
2008 2009
3GiPhone
iPhone 5...2010
3GS
2011
4
![Page 16: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/16.jpg)
side effect n.
a peripheral or secondary effect, especially an undesirable one...
http://www.thefreedictionary.com/side+effect
![Page 17: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/17.jpg)
2007
the iPhoneoriginal
era begins...the smartphone
![Page 18: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/18.jpg)
20082007
webtouch iPhone 3G
iPhone
and the real web...brings touch, gestures
![Page 19: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/19.jpg)
20082007 2009
3GiPhone
androidapps
iPhone 3GS
the rise of Android...native apps and
![Page 20: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/20.jpg)
20082007 2009
3GiPhoneiPhone 4
2010
3GS
htcg-five
samsungweb os
and the further rise of Android...whither feature phones,
![Page 21: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/21.jpg)
2008 2009
3GiPhone
iPhone 5...
2010
3GS
2011
4
htcLG
samsungmotorola
blackberrykindle
nook with great expectations... devices go mainstream
![Page 22: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/22.jpg)
iPhone
big grey area...we're now in that
![Page 23: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/23.jpg)
iPhone
or from a different perspective...
![Page 24: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/24.jpg)
the bleeding edge...
![Page 25: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/25.jpg)
opportunity
the bleeding edge...
'ish via China+
![Page 26: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/26.jpg)
http://www.flickr.com/photos/clairity/1449248189
the forest for the trees...but we still can't see
![Page 27: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/27.jpg)
http://www.flickr.com/photos/centralasian/3239065547
have a smartphone...of the US does not
*or 1/2 if you're a fanboy...
2/3*
![Page 28: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/28.jpg)
iPhone
http://www.flickr.com/photos/fpat/3692425154
asked a simple question...last year we
![Page 29: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/29.jpg)
http://www.flickr.com/photos/sketch22/1127556671
I asked this a year ago,i'm not sure anything's changed!!
mobile webwelcome to the
of an iPhone the cost of entry?on a mobile device, is the purchase
if you want to use the web
![Page 30: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/30.jpg)
to come from mobile devicesby 2015 50% of web traffic is expected
http://www.netmagazine.com/news/uk-sees-huge-mobile-web-traffic-growth-111340
to infinity and beyond...
well over
![Page 31: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/31.jpg)
iPhone
let me rephrase the question...
![Page 32: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/32.jpg)
http://www.flickr.com/photos/dantaylor/2161663267
of an iPhone be mandatory...?on a mobile device, will the purchase
in 2015, if you want to use the web
still the only device where
the Webactually works
this is rhetorical, and absurd...
![Page 33: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/33.jpg)
http://www.flickr.com/photos/bytemarks/4732726333
purchase every shiny new device released... many of us cannot afford to
gotta get 'em all...
or even want
![Page 34: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/34.jpg)
http://www.flickr.com/photos/wagnertc/3217859975
recent events...especially in the light of
![Page 35: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/35.jpg)
http://www.flickr.com/photos/chiacomo/3805139360
![Page 36: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/36.jpg)
http://www.flickr.com/photos/bobolink/4706580997
pressing concerns...most folks have much more
![Page 37: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/37.jpg)
http://www.flickr.com/photos/ilamont/4329364198
higher priorities...and far
![Page 38: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/38.jpg)
different purchasing decisions...which often result in very
http://www.flickr.com/photos/timstock/535259176
![Page 39: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/39.jpg)
iPhone
however...
![Page 40: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/40.jpg)
...*free is also becoming a popular option!
now available for less than $200*....as lots of Android devices are
http://www.flickr.com/photos/cambodia4kidsorg/5253151186
or very close to it...
![Page 41: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/41.jpg)
the next billion now include WebKitand some feature phones aimed at
http://www.flickr.com/photos/yoggy0/5380738918
and a touch screen...
Nokia C3 Touch & TypeSeries 40 device
ooh, touch...
![Page 42: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/42.jpg)
http://www.flickr.com/photos/tanj/4432327487
a smartphone*...every phone is now (essentially)
or soon will be
*actual definitions of 'smartphone' will vary - but to
normal folks they are all magic...
![Page 43: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/43.jpg)
http://www.flickr.com/photos/free_programmer/4371778263
(often) a real, update-able operating system
large, colourtouch sensitive screen
a modern web browser (not WAP)
camera, video, music player, etc.3G connectivity
QWERTY keyboard and/or trackball
to expect from a smartphone...loaded with everything we've come
![Page 44: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/44.jpg)
http://www.flickr.com/photos/nechbi/3841765925
is created equal...but not every smartphone
less vibrant screens
lower spec RAMand/or CPU/GPU
less responsive touch screens
few or no OEM OS updates
limited or no data plan bundled
![Page 45: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/45.jpg)
and (often) "undesirables"...this inequality creates diversity
http://www.flickr.com/photos/handwrite/3460075040
UNDESIRABLE
![Page 46: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/46.jpg)
being the IE6 of mobile development for me.""Android WebKit is the closest thing to
- @dalmaer via http://functionsource.com/post/a-day-in-the-life-of-android-webkit-dealings
http://www.flickr.com/photos/blank22763/4089926742
![Page 47: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/47.jpg)
iPhone
this thinking creates...
![Page 48: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/48.jpg)
for a privileged few...an optimal experience for
http://www.flickr.com/photos/carbonnyc/5140154965
![Page 49: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/49.jpg)
http://www.flickr.com/photos/dumbledad/3400708183
for many more...and a missed opportunity
the "bleeding edge" must have Android device of
2009
is once again a door stop...
linkedin HTML5 webapp disappointment
![Page 50: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/50.jpg)
http://www.flickr.com/photos/herval/2050815997
please upgrade now...your smartphone is obsolete,
2 year old, state-of-the-art
![Page 51: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/51.jpg)
iPhone
um...
![Page 52: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/52.jpg)
http://www.flickr.com/photos/aaronpk/5328338679
are not "higher priorities"...for most folks these
![Page 53: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/53.jpg)
http://www.flickr.com/photos/slemmon/3971197662
the real world...welcome to
![Page 54: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/54.jpg)
http://www.flickr.com/photos/kalleboo/3536493996
adapt as required...where we learn to
![Page 55: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/55.jpg)
can change your life...where simply learning to knit
http://www.flickr.com/photos/bosstweed/152159981
craftivism
![Page 56: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/56.jpg)
is beating paying for ebooks...where borrowing books for free
http://www.flickr.com/photos/ccacnorthlib/3553821229/Times Are Tough, Libraries Are Thrivinghttp://www.nytimes.com/2009/03/15/nyregion/long-island/15libraryli.html
from your local library
![Page 57: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/57.jpg)
are replacing cable services...where Hulu, iTunes and sports bars
http://www.businessinsider.com/2008/3/hulu-household-why-i-got-rid-of-cable
expensive
![Page 58: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/58.jpg)
http://www.flickr.com/photos/kdnewton/2691125617
to pick up those clippers...and which led @grigs
![Page 59: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/59.jpg)
iPhone
but...
![Page 60: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/60.jpg)
to expect more from their devices...the iPhone inspired everyone
http://www.flickr.com/photos/tom_ruaat/5540148158
![Page 61: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/61.jpg)
those undesirable devices?""...yeah, but people don't actually use
http://www.flickr.com/photos/misterian/4084280385
![Page 62: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/62.jpg)
iPhone
yup
![Page 63: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/63.jpg)
http://www.flickr.com/photos/zoetnet/4669800101/
offered them anything yet?...have you actually
check your logs, chances are
you'll find them in the long tail...
![Page 64: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/64.jpg)
most certainly have...a few companies
0.facebook
twitter indonesia
http://www.flickr.com/photos/nseika/5848996146
OperaMini
small
![Page 65: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/65.jpg)
to adapting to new circumstances...us humans are amazing when it comes
http://www.flickr.com/photos/thenationalguard/3251277781
...do we still really need the dogs?
![Page 66: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/66.jpg)
on similar principles...the web was actually built
http://www.flickr.com/photos/tanaka/3212373419
![Page 67: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/67.jpg)
iPhone
"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."
Tim Berners-Lee
Long Live the Webhttp://www.scientificamerican.com/article.cfm?id=long-live-the-web
http://www.flickr.com/photos/lonelyfox/2939757714
as seen before @bdconf...
![Page 68: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/68.jpg)
http://www.flickr.com/photos/blakespot/2343395804
mental models started back here...unfortunately, our current
![Page 69: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/69.jpg)
dominated by devices like these...which did not prepare us for a world
http://www.flickr.com/photos/whiteafrican/2594981758
The Era of mobile dominance is beginning
paul rouget taiwan africa
![Page 70: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/70.jpg)
http://www.flickr.com/photos/jedibfa/5146867827
“The best, most solid way out of a crisis in a changing market is through experiment and adaptation.”Richard BransonBusiness Stripped Bare – Adventures of a Global Entrepreneur
![Page 71: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/71.jpg)
http://www.flickr.com/photos/y_i/2330044065
<diversion>
![Page 72: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/72.jpg)
and servers...a tale of clients
http://www.flickr.com/photos/richardberg/2135409739
short
![Page 73: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/73.jpg)
http://www.flickr.com/photos/_ppo/2393063853
to a server...a client makes a requestpastrami on rye...
![Page 74: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/74.jpg)
http://www.flickr.com/photos/_ppo/2393063853
similar requests...other unique clients make
brisket...
corned beef...
turkeygrilled cheese
Rueben...chilli dog...
yet not identical
![Page 75: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/75.jpg)
http://www.flickr.com/photos/mrgarin/3476714113
request is required...a method to track each client
Rueben...
chilli dog...
![Page 76: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/76.jpg)
http://www.flickr.com/photos/_ppo/2393063853
is received...as each client request
corned beef...
turkey
grilled cheeseRueben...
Rueben...
brisket...chilli dog...
Rueben...pastrami on rye...
no pickle...extra pickle...
![Page 77: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/77.jpg)
tracking (ticketing, bills, etc)analytics (what works, what doesn't)preparation (vs just-in-time)tacit knowledge
http://www.flickr.com/photos/_ppo/2393063853
320, hold the pickle...
150, pastrami...
to each client...the server tailors each request
210 to go...one more 320...
![Page 78: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/78.jpg)
http://www.flickr.com/photos/the_junes/2134127618
what they need...ensuring they get exactly
![Page 79: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/79.jpg)
http://www.flickr.com/photos/86624586@N00/10176570
might not want...rather than everything they
![Page 80: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/80.jpg)
http://www.flickr.com/photos/alper/3257406961
<diversion/>
![Page 81: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/81.jpg)
http://www.flickr.com/photos/mikeycordedda/5328343979
have to do with mobile?...but what does this
![Page 82: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/82.jpg)
http://www.flickr.com/photos/maladjusted/2341398753
working client and server can...accomplish great things together
![Page 83: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/83.jpg)
client
![Page 84: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/84.jpg)
client
http://domain.org
a request to a server...a client makes
yet unknown
![Page 85: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/85.jpg)
server
http://domain.org
![Page 86: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/86.jpg)
serverhttp://domain.org
clouds are hip these days...
![Page 87: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/87.jpg)
for it's profile cookie...server then asks the client
server
...profile please?
http://domain.org
![Page 88: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/88.jpg)
yeah, you're going to need a profile...
cookie the server creates one for it...if a client doesn't have a profile
http://domain.orgserver
![Page 89: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/89.jpg)
let's start with the 'default' profile...
that covers the very basic experience...begin with a baseline profile
or default*
http://domain.orgserver
default profile
{ width:{ screen:240, document:240 }}
*defining a 'default' baseline profile depends on your project requirements...
notice that this makes the assumption that basic = default (in other words "mobile first")
![Page 90: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/90.jpg)
...oh yes, user-agent please?
http://domain.orgserver
(trust me, it's more useful than you think)then...grab the client user agent string
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
eww....
![Page 91: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/91.jpg)
hey DeviceAtlas, wanna check this UA for me?
http://domain.orgserver
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
a device database such as DeviceAtlas...query the user agent string against
...or WURFL
![Page 92: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/92.jpg)
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
DeviceAtlas profile
{ width:480, height:480, color-‐depth:8, touch:true, cookie:true, ...}
http://deviceatlas.com
...found it, here it comes!
![Page 93: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/93.jpg)
http://domain.orgserver
default profile
{ width:{ screen:240, document:240 }}
DeviceAtlas profile
{ width:480, height:480, color-‐depth:8, touch:true, cookie:true, ...}
any tacit knowledge you have collected...now query the user agent string against
...hmm, I think I've seen this before?
may
![Page 94: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/94.jpg)
{"profiles":{ "bot": { "match":"#bot|borg|google|yahoo|slurp|msnbot|msrbot|openbot|archiver|netresearch|lycos|scooter|altavista|teoma|gigabot|baiduspider|blitzbot|oegp|charlotte|furlbot|http%20client|polybot|htdig|ichiro|mogimogi|larbin|pompos|scrubby|searchsight|seekbot|semanticdiscovery|silk|snappy|speedy|spider|voila|vortex|voyager|zao|zeal#i", "profile":{"bot":"1"} }, "default": { "match":"#no-‐match-‐found#i", "profile":{"width":"240"} }, "desktop": { "match":"#windows|macintosh|linux#i", "profile":{"width":"800"} }, "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": { "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"} }, "n73": { "match":"#N73#i", "profile":{"sym91":"1", "width":"240"} }, "series602.x": { "match":"#series60/2.8|{series60/2.9}#i", "profile":{"s60":"1", "width":"240"} }, "maemo": { "match":"#maemo#i", "profile":{"maemo":"1"} }, "webos": { "match":"#webos#i", "profile":{"web0s":"1"} }, "blackberry": { "match":"#blackberry#i", "profile":{"bb":"1"} }, "windowsphone": { "match":"#windows phone os#i", "profile":{"winpho":"1"} }, "windowsmobile": { "match":"#windows mobile#i", "profile":{"winmo":"1", "width":"240"} }, "s40ovi": { "match":"#S40OviBrowser#i", "profile":{"s40ovi":"1", "width":"240"} }, "s40QWERTY": { "match":"#NokiaC3#i", "profile":{"s40QWERTY":"1", "width":"320"} }, "MeeGo": { "match":"#MeeGo#i", "profile":{"meego":"1", "width":"320"} }, "ipadoperamini": { "match":"#ipad opera mini#i", "profile":{"omini":"1", "width":"768"} }}}
UA string fragments...partial profiles are matched via
tacit data
Tacit (or known) profile
![Page 95: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/95.jpg)
http://domain.orgserver
default profile
{ width:{ screen:240, document:240 }}
DeviceAtlas profile
{ width:480, height:480, color-‐depth:8, touch:true, cookie:true, ...}
over time from other device profiles...this tacit knowledge is gathered
Tacit (or known) profile
{ width:320, droid:1, canvas:true, flash:true, video:true, ...}
tacit data
yeah, I've seen this before...
...or through knowledge gained during testing
![Page 96: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/96.jpg)
http://domain.orgserver
returned from queries into the client profile...merge the baseline data, with the data
Client profile
{ width:{ screen:320, document:320 }, xhr:true, canvas:true, flash:false, video:true, formats:{ h264:probably, ogg:false, webm:false }, offline:true}
![Page 97: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/97.jpg)
http://domain.orgserver
which will be returned to the client...write the profile cookie to the doc header
response
cookie
document
Client profile
{ width:{ screen:320, document:320 }, xhr:true, canvas:true, flash:false, video:true, formats:{ h264:probably, ogg:false, webm:false }, offline:true}
![Page 98: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/98.jpg)
and can continue...
for this client
http://domain.orgserver
responseprofile
Client profile
{ width:{ screen:320, document:320 }, xhr:true, canvas:true, flash:false, video:true, formats:{ h264:probably, ogg:false, webm:false }, offline:true}
server now has a usable profile
![Page 99: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/99.jpg)
http://domain.orgserver
response
filter
based on the properties in the client profile...the server now begins to filter the content
and adapt
media queries are not a means of adapting content contained within the DOM on the client...
using Javascript to modify significant portions of the
DOM will impact performance on mobile devices...
![Page 100: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/100.jpg)
http://domain.orgserver
response
but adapting <img>'s is most common...adaptation 'rules' will vary from site to site,
or app
Adaptation Rulesensure all images are appropriately sized for client display
replace any images that contain fine details or text
replace Flash media with an appropriate alternative where not supported
remove unnecessarymarkup, scripts, etc.
![Page 101: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/101.jpg)
http://domain.orgserver
response
structures also require adaptation<video>, <table> and other DOM
Adaptation Rulesensure all images are appropriately sized for client display
replace any images that contain fine details or text
replace Flash media with an appropriate alternative where not supported
remove unnecessarymarkup, scripts, etc.
adapt large tables asrequired, link to data
serve appropriate video format, codec and size
adapt DOM components including scripts and styles
may
![Page 102: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/102.jpg)
http://domain.orgserver
response
Adaptation Rulesensure all images are appropriately sized for client display
replace any images that contain fine details or text
replace Flash media with an appropriate alternative where not supported
remove unnecessarymarkup, scripts, etc.
adapt large tables asrequired, link to data
serve appropriate video format, codec and size
adapt DOM components including scripts and styles
new resourcesyou will often require
Resource Bundlesalternate content
appropriate for context
alternate DOM templates, components & fragments
alternate sized, formatted + encoded video as required
alternate images for required breakpoints
alternate scripts + stylesfor required client profiles
![Page 103: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/103.jpg)
{"/index.html":{ "title":"Nokia Browser", "meta":{ "keywords":"nokia,browser,web,series 40,Symbian,MeeGo,mobile web", "description":"nokia,browser,web,series40,symbian,meego,everywhere" }, "images":{ "img-‐home-‐feature":{ "0-‐320":"/resources/images/home-‐[email protected]", "320-‐655":"/resources/images/home-‐[email protected]", "655-‐9999":"/resources/images/home-‐feature.png" }, "img-‐smartphones":{ "0-‐320":"/resources/images/[email protected]", "320-‐640":"/resources/images/smartphones.png", "640-‐9999":"/resources/images/smartphones.png" }, "img-‐mobilephones":{ "0-‐320":"/resources/images/[email protected]", "320-‐640":"/resources/images/mobilephones.png", "640-‐9999":"/resources/images/mobilephones.png" }, "img-‐twitter":{ "0-‐320":"resources/images/share-‐twitter.png", "320-‐730":"resources/images/share-‐twitter.png", "730-‐9999":"resources/images/share-‐twitter-‐small.png" }, "img-‐facebook":{ "0-‐320":"resources/images/share-‐facebook.png", "320-‐730":"resources/images/share-‐facebook.png", "730-‐9999":"resources/images/share-‐facebook-‐small.png" } }},"/update-‐browser.html":{ "title":"Update your Nokia Browser", "meta":{ "keywords":"nokia,browser,web,series40,symbian,meego,everywhere", "description":"Updates are now available for most Nokia devices including Series 40 mobile phones, Series 60 and Symbian^3 smartphone devices." }, "images":{ "img-‐twitter":{ "0-‐320":"resources/images/share-‐twitter.png", "320-‐730":"resources/images/share-‐twitter.png", "730-‐9999":"resources/images/share-‐twitter-‐small.png" }, "img-‐facebook":{ "0-‐320":"resources/images/share-‐facebook.png", "320-‐730":"resources/images/share-‐facebook.png", "730-‐9999":"resources/images/share-‐facebook-‐small.png" } }},"/smartphones.html":{ "title":"Nokia Browsers for Smartphones", "meta":{ "keywords":"nokia, browser, smartphone, Series 60, S60, Symbian", "description":"This is the description for the test/test.html page" }, "images":{ "img-‐choose-‐s60":{ "0-‐320":"resources/images/smartphones/choose-‐[email protected]", "320-‐640":"resources/images/smartphones/choose-‐[email protected]", "640-‐9999":"resources/images/smartphones/choose-‐s60.png" }, "img-‐choose-‐meego":{ "0-‐320":"resources/images/smartphones/choose-‐[email protected]", "320-‐640":"resources/images/smartphones/choose-‐[email protected]", "604-‐9999":"resources/images/smartphones/choose-‐meego.png" }, "img-‐twitter":{ "0-‐320":"resources/images/share-‐twitter.png", "320-‐730":"resources/images/share-‐twitter.png", "730-‐9999":"resources/images/share-‐twitter-‐small.png" }, "img-‐facebook":{ "0-‐320":"resources/images/share-‐facebook.png", "320-‐730":"resources/images/share-‐facebook.png", "730-‐9999":"resources/images/share-‐facebook-‐small.png" } }},"/meego-‐browser.html":{ "title":"Nokia Browser for MeeGo smartphones", "meta":{ "keywords":"nokia, browser, smartphone, MeeGo", "description":"Discover seamlessly smooth browsing and the latest technologies with Nokia Browser for MeeGo smartphone devices." }, "images":{ "swipe":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/swipe.jpg" }, "pinch-‐zoom":{ "0-‐320":"resources/images/meego/pinch-‐[email protected]", "320-‐720":"resources/images/meego/pinch-‐[email protected]", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/typing.png" }, "stay-‐safe":{ "0-‐320":"resources/images/meego/stay-‐[email protected]", "320-‐720":"resources/images/meego/stay-‐[email protected]", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "location":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/location.png" }, "surf-‐more":{ "0-‐320":"resources/images/meego/surf-‐[email protected]", "320-‐640":"resources/images/meego/surf-‐[email protected]", "640-‐9999":"resources/images/meego/surf-‐more.png" }, "technologies":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/technologies.png" }, "top-‐sites":{ "0-‐320":"resources/images/meego/top-‐[email protected]", "320-‐720":"resources/images/meego/top-‐[email protected]", "720-‐9999":"resources/images/meego/top-‐sites.png" }, "download":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/download.png" }, "update":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/update.png" }, "img-‐twitter":{ "0-‐320":"resources/images/share-‐twitter.png", "320-‐730":"resources/images/share-‐twitter.png", "730-‐9999":"resources/images/share-‐twitter-‐small.png" }, "img-‐facebook":{ "0-‐320":"resources/images/share-‐facebook.png", "320-‐730":"resources/images/share-‐facebook.png", "730-‐9999":"resources/images/share-‐facebook-‐small.png" } }},"/meego-‐copy1.html":{ "title":"Nokia Browser for MeeGo smartphones", "meta":{ "keywords":"nokia, browser, smartphone, MeeGo", "description":"Discover seamlessly smooth browsing and the latest technologies with Nokia Browser for MeeGo smartphone devices." }, "images":{ "swipe":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/swipe.jpg" }, "pinch-‐zoom":{ "0-‐320":"resources/images/meego/pinch-‐[email protected]", "320-‐720":"resources/images/meego/pinch-‐[email protected]", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/typing.png" }, "stay-‐safe":{ "0-‐320":"resources/images/meego/stay-‐[email protected]", "320-‐720":"resources/images/meego/stay-‐[email protected]", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "location":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/location.png" }, "surf-‐more":{ "0-‐320":"resources/images/meego/surf-‐[email protected]", "320-‐640":"resources/images/meego/surf-‐[email protected]", "640-‐9999":"resources/images/meego/surf-‐more.png" }, "technologies":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/technologies.png" }, "top-‐sites":{ "0-‐320":"resources/images/meego/top-‐[email protected]", "320-‐720":"resources/images/meego/top-‐[email protected]", "720-‐9999":"resources/images/meego/top-‐sites.png" }, "download":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/download.png" }, "update":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/update.png" } }},"/meego-‐copy2.html":{ "title":"Nokia Browser for MeeGo smartphones", "meta":{ "keywords":"nokia, browser, smartphone, MeeGo", "description":"Discover seamlessly smooth browsing and the latest technologies with Nokia Browser for MeeGo smartphone devices." }, "images":{ "swipe":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/swipe.jpg" }, "pinch-‐zoom":{ "0-‐320":"resources/images/meego/pinch-‐[email protected]", "320-‐720":"resources/images/meego/pinch-‐[email protected]", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/typing.png" }, "stay-‐safe":{ "0-‐320":"resources/images/meego/stay-‐[email protected]", "320-‐720":"resources/images/meego/stay-‐[email protected]", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "swipe-‐more":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/swipe.jpg" }, "pinch-‐zoom-‐more":{ "0-‐320":"resources/images/meego/pinch-‐[email protected]", "320-‐720":"resources/images/meego/pinch-‐[email protected]", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing-‐more":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/typing.png" }, "stay-‐safe-‐more":{ "0-‐320":"resources/images/meego/stay-‐[email protected]", "320-‐720":"resources/images/meego/stay-‐[email protected]", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "location":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/location.png" }, "location2":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/location.png" }, "technologies":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/technologies.png" } }},"/meego-‐copy3.html":{ "title":"Nokia Browser for MeeGo smartphones", "meta":{ "keywords":"nokia, browser, smartphone, MeeGo", "description":"Discover seamlessly smooth browsing and the latest technologies with Nokia Browser for MeeGo smartphone devices." }, "images":{ "swipe":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/swipe.jpg" }, "pinch-‐zoom":{ "0-‐320":"resources/images/meego/pinch-‐[email protected]", "320-‐720":"resources/images/meego/pinch-‐[email protected]", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/typing.png" }, "stay-‐safe":{ "0-‐320":"resources/images/meego/stay-‐[email protected]", "320-‐720":"resources/images/meego/stay-‐[email protected]", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "location":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/location.png" }, "surf-‐more":{ "0-‐320":"resources/images/meego/surf-‐[email protected]", "320-‐640":"resources/images/meego/surf-‐[email protected]", "640-‐9999":"resources/images/meego/surf-‐more.png" }, "surf-‐more2":{ "0-‐320":"resources/images/meego/surf-‐[email protected]", "320-‐640":"resources/images/meego/surf-‐[email protected]", "640-‐9999":"resources/images/meego/surf-‐more.png" }, "technologies2":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/technologies.png" }, "top-‐sites2":{ "0-‐320":"resources/images/meego/top-‐[email protected]", "320-‐720":"resources/images/meego/top-‐[email protected]", "720-‐9999":"resources/images/meego/top-‐sites.png" }, "download2":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/download.png" }, "update2":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/update.png" }, "technologies":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐640":"resources/images/meego/[email protected]", "640-‐9999":"resources/images/meego/technologies.png" }, "top-‐sites":{ "0-‐320":"resources/images/meego/top-‐[email protected]", "320-‐720":"resources/images/meego/top-‐[email protected]", "720-‐9999":"resources/images/meego/top-‐sites.png" }, "download":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/download.png" }, "update":{ "0-‐320":"resources/images/meego/[email protected]", "320-‐720":"resources/images/meego/[email protected]", "720-‐9999":"resources/images/meego/update.png" } }},"/7-‐3-‐browser.html":{ "title":"Nokia Browser 7.3 for Symbian", "meta":{ "keywords":"nokia,browser,web,series40,symbian,meego,everywhere", "description":"Updates are now available for most Nokia devices including Series 40 mobile phones, Series 60 and Symbian^3 smartphone devices." }, "images":{ "img-‐tap":{ "0-‐320":"resources/images/symbian/[email protected]", "320-‐640":"resources/images/symbian/[email protected]", "640-‐9999":"resources/images/symbian/tap.png" }, "img-‐pinch-‐zoom":{ "0-‐320":"resources/images/symbian/pinch-‐[email protected]", "320-‐720":"resources/images/symbian/pinch-‐[email protected]", "720-‐9999":"resources/images/symbian/pinch-‐zoom.png" }, "img-‐type":{ "0-‐320":"resources/images/symbian/[email protected]", "320-‐720":"resources/images/symbian/[email protected]", "720-‐9999":"resources/images/symbian/type.png" }, "img-‐multitask":{ "0-‐320":"resources/images/symbian/[email protected]", "320-‐720":"resources/images/symbian/[email protected]", "720-‐9999":"resources/images/symbian/multitask.png" }, "img-‐technology":{ "0-‐320":"resources/images/symbian/[email protected]", "320-‐640":"resources/images/symbian/[email protected]", "640-‐9999":"resources/images/symbian/technology.png" }, "img-‐full-‐screen":{ "0-‐320":"resources/images/symbian/full-‐[email protected]", "320-‐640":"resources/images/symbian/full-‐[email protected]", "640-‐9999":"resources/images/symbian/full-‐screen.png" }, "img-‐safety":{ "0-‐320":"resources/images/symbian/[email protected]", "320-‐720":"resources/images/symbian/[email protected]", "720-‐9999":"resources/images/symbian/safety.png" }, "img-‐keyboard":{ "0-‐320":"resources/images/symbian/[email protected]", "320-‐720":"resources/images/symbian/[email protected]", "720-‐9999":"resources/images/symbian/keyboard.png" }, "img-‐update":{ "0-‐320":"resources/images/symbian/[email protected]", "320-‐720":"resources/images/symbian/[email protected]", "720-‐9999":"resources/images/symbian/update.png" }, "img-‐twitter":{ "0-‐320":"resources/images/share-‐twitter.png", "320-‐730":"resources/images/share-‐twitter.png", "730-‐9999":"resources/images/share-‐twitter-‐small.png" }, "img-‐facebook":{ "0-‐320":"resources/images/share-‐facebook.png", "320-‐730":"resources/images/share-‐facebook.png", "730-‐9999":"resources/images/share-‐facebook-‐small.png" } }},"/s40-‐browser.html":{ "title":"Nokia Browser for Series 40 mobile phones", "meta":{ "keywords":"nokia, browser, featurephone, Series 40, S40", "description":"The new Nokia Browser makes it easier, faster and more affordable than ever before to access the Internet on your Series 40 mobile phone." }, "images":{ "img-‐surf-‐the-‐web":{ "0-‐320":"resources/images/s40/surf-‐the-‐[email protected]", "320-‐640":"resources/images/s40/surf-‐the-‐[email protected]", "640-‐9999":"resources/images/s40/surf-‐the-‐web.jpg" }, "img-‐quick-‐access":{ "0-‐320":"resources/images/s40/quick-‐[email protected]", "320-‐720":"resources/images/s40/quick-‐[email protected]", "720-‐9999":"resources/images/s40/quick-‐access.png" }, "img-‐always-‐in-‐control":{ "0-‐320":"resources/images/s40/always-‐in-‐[email protected]", "320-‐720":"resources/images/s40/always-‐in-‐[email protected]", "720-‐9999":"resources/images/s40/always-‐in-‐control.png" }, "img-‐popular-‐sites":{ "0-‐320":"resources/images/s40/popular-‐[email protected]", "320-‐720":"resources/images/s40/popular-‐[email protected]", "720-‐9999":"resources/images/s40/popular-‐sites.png" }, "img-‐world-‐of-‐apps":{ "0-‐320":"resources/images/s40/world-‐of-‐[email protected]", "320-‐640":"resources/images/s40/world-‐of-‐[email protected]", "640-‐9999":"resources/images/s40/world-‐of-‐apps.jpg" }, "img-‐easy-‐to-‐use":{ "0-‐320":"resources/images/s40/easy-‐to-‐[email protected]", "320-‐640":"resources/images/s40/easy-‐to-‐[email protected]", "640-‐9999":"resources/images/s40/easy-‐to-‐use.png" }, "img-‐any-‐device":{ "0-‐320":"resources/images/s40/any-‐[email protected]", "320-‐640":"resources/images/s40/any-‐[email protected]", "640-‐9999":"resources/images/s40/any-‐device.png" }, "img-‐your-‐view":{ "0-‐320":"resources/images/s40/your-‐[email protected]", "320-‐720":"resources/images/s40/your-‐[email protected]", "720-‐9999":"resources/images/s40/your-‐view.png" }, "img-‐auto-‐update":{ "0-‐320":"resources/images/s40/auto-‐[email protected]", "320-‐720":"resources/images/s40/auto-‐[email protected]", "720-‐9999":"resources/images/s40/auto-‐update.png" }, "img-‐do-‐more":{ "0-‐320":"resources/images/s40/do-‐[email protected]", "320-‐720":"resources/images/s40/do-‐[email protected]", "720-‐9999":"resources/images/s40/do-‐more.png" }, "img-‐twitter":{ "0-‐320":"resources/images/share-‐twitter.png", "320-‐730":"resources/images/share-‐twitter.png", "730-‐9999":"resources/images/share-‐twitter-‐small.png" }, "img-‐facebook":{ "0-‐320":"resources/images/share-‐facebook.png", "320-‐730":"resources/images/share-‐facebook.png", "730-‐9999":"resources/images/share-‐facebook-‐small.png" } }}}
Resource Bundlesalternate content
appropriate for context
alternate DOM templates, components & fragments
alternate sized, formatted + encoded video as required
alternate images for required breakpoints
alternate scripts + stylesfor required client profiles
any number of ways...which can be defined in
![Page 104: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/104.jpg)
http://domain.orgserver
response
or even dynamically generated...these resources can be static, cached
images
datavideo
which would make them even more responsive
![Page 105: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/105.jpg)
http://domain.orgserver
response
performed on the server...all content adaptation is
before the page is downloaded
![Page 106: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/106.jpg)
are then bundled as references...
http://domain.orgserver
response
alternate resources that may later be required on the client
![Page 107: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/107.jpg)
http://domain.orgserver
response
is also included in the response to the client...an additional profile <script>
feature detection
{}
![Page 108: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/108.jpg)
{}
![Page 109: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/109.jpg)
![Page 110: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/110.jpg)
http://domain.orgserver
![Page 111: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/111.jpg)
client
![Page 112: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/112.jpg)
and updates its profile cookie accordingly... the client executes its profile <script>
feature detectionClient profile
{ width:{ screen:480, document:480 }, xhr:true, canvas:true, flash:true, video:true, formats:{ h264:probably, ogg:true, webm:false }, offline:true}
![Page 113: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/113.jpg)
![Page 114: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/114.jpg)
the script fires again... on an orientation change
or screen resize
![Page 115: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/115.jpg)
are downloaded...and if needed, additional resources
images
Client profile
{ width:{ screen:800, document:800 }, xhr:true, canvas:true, flash:true, video:true, formats:{ h264:probably, ogg:true, webm:false }, offline:true}
updated
based on the pre-bundled references
![Page 116: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/116.jpg)
http://domain.org/fava-beans/chianti
a new request to a server...a client makesknown
![Page 117: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/117.jpg)
for it's profile cookie...server then asks the client
server
...profile please?
http://domain.org
![Page 118: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/118.jpg)
http://domain.orgserver
represents the requesting client...which now accurately
...ah, wonderful you've filled in the rest!
Client profile
{ width:{ screen:800, document:800 }, xhr:true, canvas:true, flash:true, video:true, formats:{ h264:probably, ogg:true, webm:false }, offline:true}
![Page 119: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/119.jpg)
http://domain.orgserver
profile properties for later dB integration...server captures the client-tested
tacit data
![Page 120: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/120.jpg)
http://domain.orgserver
responselet me get that for you...
based on the client profile...server then begins to filter content
and adapt
![Page 121: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/121.jpg)
then bundled as references...any resources required are
on the client
http://domain.orgserver
response
![Page 122: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/122.jpg)
{}
![Page 123: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/123.jpg)
![Page 124: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/124.jpg)
http://domain.orgserver
![Page 125: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/125.jpg)
client
...ta da!
![Page 126: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/126.jpg)
required...and repeat as
![Page 127: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/127.jpg)
![Page 128: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/128.jpg)
![Page 129: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/129.jpg)
http://www.flickr.com/photos/digitalsextant/3624030270
zombie apocalypse...all in preparation for the coming
@scottjenson zombie frog
![Page 130: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/130.jpg)
http://www.flickr.com/photos/sarahreido/3120877348
approach...benefits of this
![Page 131: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/131.jpg)
http://www.flickr.com/photos/jane_garratt/5377694159
ceçi n'est plus un iphone
not the device...focus on the features,
known
OperaMini
![Page 132: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/132.jpg)
http://html5test.com/
are rarely binary...accepts that features
browser
just because it's 'supported', doesn't mean it works as intended (or works at all)...
![Page 133: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/133.jpg)
http://www.flickr.com/photos/mujitra/2559447601
fine tune the profiles...tacit data enables you to
tweaks for "important" devices (e.g. client-specific requests, business goal-specific, partners, high-traffic edge cases etc.)
create custom properties needed for your specific project
override false positives
![Page 134: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/134.jpg)
http://twitter.com/#!/stephanierieger/status/113604185857069056
much easier...which makes edge cases
handling
![Page 135: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/135.jpg)
http://www.flickr.com/photos/mackarus/4289960218
on the server...all heavy lifting occurs
![Page 136: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/136.jpg)
http://www.flickr.com/photos/mackarus/3022623866
can be unreliable...where client-side-only approachessupports a broader range of devices
folks and their
![Page 137: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/137.jpg)
http://www.flickr.com/photos/jgoforth/87176920
"unknown unknowns"...embrace the future of
![Page 138: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/138.jpg)
http://www.flickr.com/photos/slemmon/3971195778
for tomorrow...a few thoughts
![Page 139: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/139.jpg)
http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element
was an after thought
the <img> tag...
![Page 140: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/140.jpg)
<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>
to rethink it?
...perhaps it's finally time
this of course does not exist, and is simply wishful thinking...
![Page 141: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/141.jpg)
<html>...
@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" />}
...</html>
ie: conditional content
...media queries for the DOM?
this of course does not exist, and is only the simplest form of an idea...
![Page 142: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/142.jpg)
http://en.wikipedia.org/wiki/Content_negotiation
content negotiation...
rethinking (and extending)
![Page 143: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/143.jpg)
http://en.wikipedia.org/wiki/User_agent
revisit UA strings...
and maybe even go back and
for some thoughts...see Andrea Trasatti's "Sorting User Agent Strings Out"
Andrea Trasatti sorting user agent strings out
![Page 144: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/144.jpg)
http://www.flickr.com/photos/theowl84/3045227001
as the water moulds itself to the pitcher.""The wise adapt themselves to circumstances,
Chinese Proverb
![Page 145: Adaptation](https://reader031.vdocument.in/reader031/viewer/2022020720/54bfd37d4a79596c778b4596/html5/thumbnails/145.jpg)
http://www.flickr.com/photos/kwl/4171367373
thank you
hi
http://www.exljbris.com/museo.htmlMuseo
the font we use is
please say
@yiibu
http://www.slideshare.net/yiibu/adaptation
available on
http://creativecommons.org/licenses/by/2.0
licensed under
many thanks to the amazing photographers on
http://www.flickr.com/creativecommons/by-2.0