Adaptation: Why responsive design actually begins on the server

http://www.flickr.com/photos/newsbiepix/4113886275

why responsive design actually begins on the server...

Adaptation

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

http://www.flickr.com/photos/tinou/453593446


http://www.flickr.com/photos/scobleizer/4694051328

a good story...the tech media loves

TechCrunch



bleeding edge...and life on the


200 million iOS devices




1/3of the US has a smartphone

*please note

*current statistics range

from 25% to 50% – we'll use 1/3 for simplicity...

*





does not have a smartphone?!...um, so 2/3 of the US



http://www.flickr.com/photos/abasketofpups/2662225972


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




will save us all!




on few high-end devices...but it's really only kinda useable

will save us all!



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



the bleeding edge...

2007

the iPhoneoriginal

2008

iPhone 3G

2007

iPhone

2008

iPhone 3GS

2007 2009

3GiPhone

20082007 2009

3GiPhone

iPhone 4

2010

3GS

2008 2009

3GiPhone

iPhone 5...2010

3GS

2011

4

side effect n.

a peripheral or secondary effect, especially an undesirable one...

http://www.thefreedictionary.com/side+effect



2007

the iPhoneoriginal

era begins...the smartphone

20082007

webtouch iPhone 3G

iPhone

and the real web...brings touch, gestures

20082007 2009

3GiPhone

androidapps

iPhone 3GS

the rise of Android...native apps and

20082007 2009

3GiPhoneiPhone 4

2010

3GS

htcg-five

samsungweb os

and the further rise of Android...whither feature phones,

2008 2009

3GiPhone

iPhone 5...

2010

3GS

2011

4

htcLG

samsungmotorola

blackberrykindle

nook with great expectations... devices go mainstream

iPhone

big grey area...we're now in that

iPhone

or from a different perspective...


opportunity


'ish via China+

http://www.flickr.com/photos/clairity/1449248189

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

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*

iPhone

http://www.flickr.com/photos/fpat/3692425154

asked a simple question...last year we

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



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

iPhone

let me rephrase the question...

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



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

http://www.flickr.com/photos/wagnertc/3217859975

recent events...especially in the light of

http://www.flickr.com/photos/chiacomo/3805139360

http://www.flickr.com/photos/bobolink/4706580997

pressing concerns...most folks have much more

http://www.flickr.com/photos/ilamont/4329364198

higher priorities...and far

different purchasing decisions...which often result in very

http://www.flickr.com/photos/timstock/535259176

iPhone

however...

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

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

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



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

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



and (often) "undesirables"...this inequality creates diversity

http://www.flickr.com/photos/handwrite/3460075040

UNDESIRABLE

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

iPhone

this thinking creates...

for a privileged few...an optimal experience for

http://www.flickr.com/photos/carbonnyc/5140154965

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

http://www.flickr.com/photos/herval/2050815997

please upgrade now...your smartphone is obsolete,

2 year old, state-of-the-art

iPhone

um...

http://www.flickr.com/photos/aaronpk/5328338679

are not "higher priorities"...for most folks these



http://www.flickr.com/photos/slemmon/3971197662

the real world...welcome to



http://www.flickr.com/photos/kalleboo/3536493996

adapt as required...where we learn to

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

http://www.flickr.com/photos/bosstweed/152159981

craftivism

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

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

http://www.flickr.com/photos/kdnewton/2691125617

to pick up those clippers...and which led @grigs

iPhone

but...

to expect more from their devices...the iPhone inspired everyone

http://www.flickr.com/photos/tom_ruaat/5540148158

those undesirable devices?""...yeah, but people don't actually use

http://www.flickr.com/photos/misterian/4084280385

iPhone

yup

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



most certainly have...a few companies

0.facebook

twitter indonesia

http://www.flickr.com/photos/nseika/5848996146

OperaMini

small



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?



on similar principles...the web was actually built

http://www.flickr.com/photos/tanaka/3212373419



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





http://www.flickr.com/photos/blakespot/2343395804

mental models started back here...unfortunately, our current



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



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



http://www.flickr.com/photos/y_i/2330044065

<diversion>

and servers...a tale of clients

http://www.flickr.com/photos/richardberg/2135409739

short



http://www.flickr.com/photos/_ppo/2393063853

to a server...a client makes a requestpastrami on rye...




similar requests...other unique clients make

brisket...

corned beef...

turkeygrilled cheese

Rueben...chilli dog...

yet not identical



http://www.flickr.com/photos/mrgarin/3476714113

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

Rueben...

chilli dog...




is received...as each client request

corned beef...

turkey

grilled cheeseRueben...

Rueben...

brisket...chilli dog...

Rueben...pastrami on rye...

no pickle...extra pickle...



tracking (ticketing, bills, etc)analytics (what works, what doesn't)preparation (vs just-in-time)tacit knowledge


320, hold the pickle...

150, pastrami...

to each client...the server tailors each request

210 to go...one more 320...



http://www.flickr.com/photos/the_junes/2134127618

what they need...ensuring they get exactly



http://www.flickr.com/photos/86624586@N00/10176570

might not want...rather than everything they



http://www.flickr.com/photos/alper/3257406961

<diversion/>

http://www.flickr.com/photos/mikeycordedda/5328343979

have to do with mobile?...but what does this



http://www.flickr.com/photos/maladjusted/2341398753

working client and server can...accomplish great things together



client

client

http://domain.org

a request to a server...a client makes

yet unknown

server

http://domain.org

serverhttp://domain.org

clouds are hip these days...

for it's profile cookie...server then asks the client

server

...profile please?

http://domain.org

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

let's start with the 'default' profile...

that covers the very basic experience...begin with a baseline profile

or default*


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")

...oh yes, user-agent please?


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

hey DeviceAtlas, wanna check this UA for me?



a device database such as DeviceAtlas...query the user agent string against

...or WURFL


DeviceAtlas profile

{ width:480, height:480, color-‐depth:8, touch:true, cookie:true, ...}

http://deviceatlas.com

...found it, here it comes!


default profile


DeviceAtlas profile


any tacit knowledge you have collected...now query the user agent string against

...hmm, I think I've seen this before?

may

{"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


default profile


DeviceAtlas profile


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


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}


which will be returned to the client...write the profile cookie to the doc header

response

cookie

document

Client profile


and can continue...

for this client


responseprofile

Client profile


server now has a usable profile


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


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.


response

structures also require adaptation<video>, <table> and other DOM





adapt large tables asrequired, link to data

serve appropriate video format, codec and size

adapt DOM components including scripts and styles

may


response





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

{"/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


response

or even dynamically generated...these resources can be static, cached

images

datavideo

which would make them even more responsive


response

performed on the server...all content adaptation is

before the page is downloaded

are then bundled as references...


response

alternate resources that may later be required on the client


response

is also included in the response to the client...an additional profile <script>

feature detection

{}

{}


client

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}

the script fires again... on an orientation change

or screen resize

are downloaded...and if needed, additional resources

images

Client profile


updated

based on the pre-bundled references

http://domain.org/fava-beans/chianti

a new request to a server...a client makesknown

for it's profile cookie...server then asks the client

server

...profile please?

http://domain.org


represents the requesting client...which now accurately

...ah, wonderful you've filled in the rest!

Client profile



profile properties for later dB integration...server captures the client-tested

tacit data


responselet me get that for you...

based on the client profile...server then begins to filter content

and adapt

then bundled as references...any resources required are

on the client


response

{}


client

...ta da!

required...and repeat as

http://www.flickr.com/photos/digitalsextant/3624030270

zombie apocalypse...all in preparation for the coming

@scottjenson zombie frog



http://www.flickr.com/photos/sarahreido/3120877348

approach...benefits of this



http://www.flickr.com/photos/jane_garratt/5377694159

ceçi n'est plus un iphone

not the device...focus on the features,

known

OperaMini



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



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



http://twitter.com/#!/stephanierieger/status/113604185857069056

much easier...which makes edge cases

handling



http://www.flickr.com/photos/mackarus/4289960218

on the server...all heavy lifting occurs



http://www.flickr.com/photos/mackarus/3022623866

can be unreliable...where client-side-only approachessupports a broader range of devices

folks and their



http://www.flickr.com/photos/jgoforth/87176920

"unknown unknowns"...embrace the future of



http://www.flickr.com/photos/slemmon/3971195778

for tomorrow...a few thoughts



http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element

was an after thought

the <img> tag...



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

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

http://en.wikipedia.org/wiki/Content_negotiation

content negotiation...

rethinking (and extending)



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



http://www.flickr.com/photos/theowl84/3045227001

as the water moulds itself to the pitcher.""The wise adapt themselves to circumstances,

Chinese Proverb



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

[email protected]

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



mailto:[email protected]

mailto:[email protected]

Date post:	08-Sep-2014
Category:	Technology
Upload:	yiibu
View:	61 times
Download:	2 times

Adaptation: Why responsive design actually begins on the server

Technology