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

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

the iPhoneoriginal

iPhone 3G

iPhone

iPhone 3GS

2007 2009

3GiPhone

20082007 2009

3GiPhone

iPhone 4

2008 2009

3GiPhone

iPhone 5...2010

side effect n.

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

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

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

htcg-five

samsungweb os

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

2008 2009

3GiPhone

iPhone 5...

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

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

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

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

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

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

and servers...a tale of clients

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

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

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

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?

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

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-‐feature@240.png", "320-‐655":"/resources/images/home-‐feature@320.png", "655-‐9999":"/resources/images/home-‐feature.png" }, "img-‐smartphones":{ "0-‐320":"/resources/images/smartphones@320.png", "320-‐640":"/resources/images/smartphones.png", "640-‐9999":"/resources/images/smartphones.png" }, "img-‐mobilephones":{ "0-‐320":"/resources/images/mobilephones@320.png", "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-‐s60@240.png", "320-‐640":"resources/images/smartphones/choose-‐s60@320.png", "640-‐9999":"resources/images/smartphones/choose-‐s60.png" }, "img-‐choose-‐meego":{ "0-‐320":"resources/images/smartphones/choose-‐meego@240.png", "320-‐640":"resources/images/smartphones/choose-‐meego@320.png", "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/swipe@240.jpg", "320-‐640":"resources/images/meego/swipe@320.jpg", "640-‐9999":"resources/images/meego/swipe.jpg" }, "pinch-‐zoom":{ "0-‐320":"resources/images/meego/pinch-‐zoom@240.png", "320-‐720":"resources/images/meego/pinch-‐zoom@320.png", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing":{ "0-‐320":"resources/images/meego/typing@240.png", "320-‐720":"resources/images/meego/typing@320.png", "720-‐9999":"resources/images/meego/typing.png" }, "stay-‐safe":{ "0-‐320":"resources/images/meego/stay-‐safe@240.png", "320-‐720":"resources/images/meego/stay-‐safe@320.png", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "location":{ "0-‐320":"resources/images/meego/location@240.jpg", "320-‐640":"resources/images/meego/location@320.jpg", "640-‐9999":"resources/images/meego/location.png" }, "surf-‐more":{ "0-‐320":"resources/images/meego/surf-‐more@240.png", "320-‐640":"resources/images/meego/surf-‐more@320.png", "640-‐9999":"resources/images/meego/surf-‐more.png" }, "technologies":{ "0-‐320":"resources/images/meego/technologies@240.jpg", "320-‐640":"resources/images/meego/technologies@320.jpg", "640-‐9999":"resources/images/meego/technologies.png" }, "top-‐sites":{ "0-‐320":"resources/images/meego/top-‐sites@240.png", "320-‐720":"resources/images/meego/top-‐sites@320.png", "720-‐9999":"resources/images/meego/top-‐sites.png" }, "download":{ "0-‐320":"resources/images/meego/download@240.png", "320-‐720":"resources/images/meego/download@320.png", "720-‐9999":"resources/images/meego/download.png" }, "update":{ "0-‐320":"resources/images/meego/update@240.png", "320-‐720":"resources/images/meego/update@320.png", "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/swipe@240.jpg", "320-‐640":"resources/images/meego/swipe@320.jpg", "640-‐9999":"resources/images/meego/swipe.jpg" }, "pinch-‐zoom":{ "0-‐320":"resources/images/meego/pinch-‐zoom@240.png", "320-‐720":"resources/images/meego/pinch-‐zoom@320.png", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing":{ "0-‐320":"resources/images/meego/typing@240.png", "320-‐720":"resources/images/meego/typing@320.png", "720-‐9999":"resources/images/meego/typing.png" }, "stay-‐safe":{ "0-‐320":"resources/images/meego/stay-‐safe@240.png", "320-‐720":"resources/images/meego/stay-‐safe@320.png", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "location":{ "0-‐320":"resources/images/meego/location@240.jpg", "320-‐640":"resources/images/meego/location@320.jpg", "640-‐9999":"resources/images/meego/location.png" }, "surf-‐more":{ "0-‐320":"resources/images/meego/surf-‐more@240.png", "320-‐640":"resources/images/meego/surf-‐more@320.png", "640-‐9999":"resources/images/meego/surf-‐more.png" }, "technologies":{ "0-‐320":"resources/images/meego/technologies@240.jpg", "320-‐640":"resources/images/meego/technologies@320.jpg", "640-‐9999":"resources/images/meego/technologies.png" }, "top-‐sites":{ "0-‐320":"resources/images/meego/top-‐sites@240.png", "320-‐720":"resources/images/meego/top-‐sites@320.png", "720-‐9999":"resources/images/meego/top-‐sites.png" }, "download":{ "0-‐320":"resources/images/meego/download@240.png", "320-‐720":"resources/images/meego/download@320.png", "720-‐9999":"resources/images/meego/download.png" }, "update":{ "0-‐320":"resources/images/meego/update@240.png", "320-‐720":"resources/images/meego/update@320.png", "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/swipe@240.jpg", "320-‐640":"resources/images/meego/swipe@320.jpg", "640-‐9999":"resources/images/meego/swipe.jpg" }, "pinch-‐zoom":{ "0-‐320":"resources/images/meego/pinch-‐zoom@240.png", "320-‐720":"resources/images/meego/pinch-‐zoom@320.png", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing":{ "0-‐320":"resources/images/meego/typing@240.png", "320-‐720":"resources/images/meego/typing@320.png", "720-‐9999":"resources/images/meego/typing.png" }, "stay-‐safe":{ "0-‐320":"resources/images/meego/stay-‐safe@240.png", "320-‐720":"resources/images/meego/stay-‐safe@320.png", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "swipe-‐more":{ "0-‐320":"resources/images/meego/swipe@240.jpg", "320-‐640":"resources/images/meego/swipe@320.jpg", "640-‐9999":"resources/images/meego/swipe.jpg" }, "pinch-‐zoom-‐more":{ "0-‐320":"resources/images/meego/pinch-‐zoom@240.png", "320-‐720":"resources/images/meego/pinch-‐zoom@320.png", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing-‐more":{ "0-‐320":"resources/images/meego/typing@240.png", "320-‐720":"resources/images/meego/typing@320.png", "720-‐9999":"resources/images/meego/typing.png" }, "stay-‐safe-‐more":{ "0-‐320":"resources/images/meego/stay-‐safe@240.png", "320-‐720":"resources/images/meego/stay-‐safe@320.png", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "location":{ "0-‐320":"resources/images/meego/location@240.jpg", "320-‐640":"resources/images/meego/location@320.jpg", "640-‐9999":"resources/images/meego/location.png" }, "location2":{ "0-‐320":"resources/images/meego/location@240.jpg", "320-‐640":"resources/images/meego/location@320.jpg", "640-‐9999":"resources/images/meego/location.png" }, "technologies":{ "0-‐320":"resources/images/meego/technologies@240.jpg", "320-‐640":"resources/images/meego/technologies@320.jpg", "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/swipe@240.jpg", "320-‐640":"resources/images/meego/swipe@320.jpg", "640-‐9999":"resources/images/meego/swipe.jpg" }, "pinch-‐zoom":{ "0-‐320":"resources/images/meego/pinch-‐zoom@240.png", "320-‐720":"resources/images/meego/pinch-‐zoom@320.png", "720-‐9999":"resources/images/meego/pinch-‐zoom.png" }, "typing":{ "0-‐320":"resources/images/meego/typing@240.png", "320-‐720":"resources/images/meego/typing@320.png", "720-‐9999":"resources/images/meego/typing.png" }, "stay-‐safe":{ "0-‐320":"resources/images/meego/stay-‐safe@240.png", "320-‐720":"resources/images/meego/stay-‐safe@320.png", "720-‐9999":"resources/images/meego/stay-‐safe.png" }, "location":{ "0-‐320":"resources/images/meego/location@240.jpg", "320-‐640":"resources/images/meego/location@320.jpg", "640-‐9999":"resources/images/meego/location.png" }, "surf-‐more":{ "0-‐320":"resources/images/meego/surf-‐more@240.png", "320-‐640":"resources/images/meego/surf-‐more@320.png", "640-‐9999":"resources/images/meego/surf-‐more.png" }, "surf-‐more2":{ "0-‐320":"resources/images/meego/surf-‐more@240.png", "320-‐640":"resources/images/meego/surf-‐more@320.png", "640-‐9999":"resources/images/meego/surf-‐more.png" }, "technologies2":{ "0-‐320":"resources/images/meego/technologies@240.jpg", "320-‐640":"resources/images/meego/technologies@320.jpg", "640-‐9999":"resources/images/meego/technologies.png" }, "top-‐sites2":{ "0-‐320":"resources/images/meego/top-‐sites@240.png", "320-‐720":"resources/images/meego/top-‐sites@320.png", "720-‐9999":"resources/images/meego/top-‐sites.png" }, "download2":{ "0-‐320":"resources/images/meego/download@240.png", "320-‐720":"resources/images/meego/download@320.png", "720-‐9999":"resources/images/meego/download.png" }, "update2":{ "0-‐320":"resources/images/meego/update@240.png", "320-‐720":"resources/images/meego/update@320.png", "720-‐9999":"resources/images/meego/update.png" }, "technologies":{ "0-‐320":"resources/images/meego/technologies@240.jpg", "320-‐640":"resources/images/meego/technologies@320.jpg", "640-‐9999":"resources/images/meego/technologies.png" }, "top-‐sites":{ "0-‐320":"resources/images/meego/top-‐sites@240.png", "320-‐720":"resources/images/meego/top-‐sites@320.png", "720-‐9999":"resources/images/meego/top-‐sites.png" }, "download":{ "0-‐320":"resources/images/meego/download@240.png", "320-‐720":"resources/images/meego/download@320.png", "720-‐9999":"resources/images/meego/download.png" }, "update":{ "0-‐320":"resources/images/meego/update@240.png", "320-‐720":"resources/images/meego/update@320.png", "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/tap@240.jpg", "320-‐640":"resources/images/symbian/tap@320.jpg", "640-‐9999":"resources/images/symbian/tap.png" }, "img-‐pinch-‐zoom":{ "0-‐320":"resources/images/symbian/pinch-‐zoom@240.png", "320-‐720":"resources/images/symbian/pinch-‐zoom@320.png", "720-‐9999":"resources/images/symbian/pinch-‐zoom.png" }, "img-‐type":{ "0-‐320":"resources/images/symbian/type@240.png", "320-‐720":"resources/images/symbian/type@320.png", "720-‐9999":"resources/images/symbian/type.png" }, "img-‐multitask":{ "0-‐320":"resources/images/symbian/multitask@240.png", "320-‐720":"resources/images/symbian/multitask@320.png", "720-‐9999":"resources/images/symbian/multitask.png" }, "img-‐technology":{ "0-‐320":"resources/images/symbian/technology@240.jpg", "320-‐640":"resources/images/symbian/technology@320.jpg", "640-‐9999":"resources/images/symbian/technology.png" }, "img-‐full-‐screen":{ "0-‐320":"resources/images/symbian/full-‐screen@240.jpg", "320-‐640":"resources/images/symbian/full-‐screen@320.jpg", "640-‐9999":"resources/images/symbian/full-‐screen.png" }, "img-‐safety":{ "0-‐320":"resources/images/symbian/safety@240.png", "320-‐720":"resources/images/symbian/safety@320.png", "720-‐9999":"resources/images/symbian/safety.png" }, "img-‐keyboard":{ "0-‐320":"resources/images/symbian/keyboard@240.png", "320-‐720":"resources/images/symbian/keyboard@320.png", "720-‐9999":"resources/images/symbian/keyboard.png" }, "img-‐update":{ "0-‐320":"resources/images/symbian/update@240.png", "320-‐720":"resources/images/symbian/update@320.png", "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-‐web@240.jpg", "320-‐640":"resources/images/s40/surf-‐the-‐web@320.jpg", "640-‐9999":"resources/images/s40/surf-‐the-‐web.jpg" }, "img-‐quick-‐access":{ "0-‐320":"resources/images/s40/quick-‐access@240.png", "320-‐720":"resources/images/s40/quick-‐access@320.png", "720-‐9999":"resources/images/s40/quick-‐access.png" }, "img-‐always-‐in-‐control":{ "0-‐320":"resources/images/s40/always-‐in-‐control@240.png", "320-‐720":"resources/images/s40/always-‐in-‐control@320.png", "720-‐9999":"resources/images/s40/always-‐in-‐control.png" }, "img-‐popular-‐sites":{ "0-‐320":"resources/images/s40/popular-‐sites@240.png", "320-‐720":"resources/images/s40/popular-‐sites@320.png", "720-‐9999":"resources/images/s40/popular-‐sites.png" }, "img-‐world-‐of-‐apps":{ "0-‐320":"resources/images/s40/world-‐of-‐apps@240.jpg", "320-‐640":"resources/images/s40/world-‐of-‐apps@320.jpg", "640-‐9999":"resources/images/s40/world-‐of-‐apps.jpg" }, "img-‐easy-‐to-‐use":{ "0-‐320":"resources/images/s40/easy-‐to-‐use@240.jpg", "320-‐640":"resources/images/s40/easy-‐to-‐use@320.jpg", "640-‐9999":"resources/images/s40/easy-‐to-‐use.png" }, "img-‐any-‐device":{ "0-‐320":"resources/images/s40/any-‐device@240.png", "320-‐640":"resources/images/s40/any-‐device@320.png", "640-‐9999":"resources/images/s40/any-‐device.png" }, "img-‐your-‐view":{ "0-‐320":"resources/images/s40/your-‐view@240.png", "320-‐720":"resources/images/s40/your-‐view@320.png", "720-‐9999":"resources/images/s40/your-‐view.png" }, "img-‐auto-‐update":{ "0-‐320":"resources/images/s40/auto-‐update@240.png", "320-‐720":"resources/images/s40/auto-‐update@320.png", "720-‐9999":"resources/images/s40/auto-‐update.png" }, "img-‐do-‐more":{ "0-‐320":"resources/images/s40/do-‐more@240.png", "320-‐720":"resources/images/s40/do-‐more@320.png", "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,

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>

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

hello@yiibu.com

thank you

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

adaptation: why responsive design actually begins on the server

turkey chilli

client prole

components

alternative

bleeding edge

corned beef

supportedremove

0 mobile safari530

Technology

responsive elearning - iitd.ie...

about...

booting and configuring a xen host...booting and configuring...

lmatech2014 - responsive websites: the 3 w’s of going...

responsive content, responsive documents, responsive pdf -...

content authoring for responsive design - madcap...

really responsive regulation · robert baldwin and julia...

responsive & responsible: implementing responsive design at...

soltech - responsive design and responsive content

st. lawrence the martyr catholic church · course from...

eproc.punjab.gov.pk · 20 service manual with soft copy....

· web viewdjag is responsive and high performing djag is...

responsive elearning design and...

techniques for flexible responsive visualization design ·...

system 2007 · you'll also learn how to quickly, and easily...

warfighter-focused, globally responsive, fiscally...

the future of eastercon · being responsive to the changes...

about the author · 1 the leasing process begins, and...

table of contents - texas comptroller of public accounts...

responsive flexbox inspiration (responsive day out)