Developing for the anywhere, everywhere web

developing for
the anywhere,
everywhere web
TIM KADLEC
Rich Web Experience, December 2011
@tkadlec timkadlec.com

View Slide

The maturation
of the medium

View Slide

TOM BARRETT
Chaos in the world brings uneasiness, but
it also allows the opportunity for creativity
and growth.

View Slide

Control is an illusion

View Slide

MARSHALL MCLUHAN
We see the world through a rear-view
mirror. We march backwards into the
future.

View Slide

The web
removes constraints

View Slide

ANDY HUME
http://blog.andyhume.net/responsive-by-default
The web is responsive on its own—by
default. It’s us that’s been breaking it all
these years by placing content in fixed-
width containers.

View Slide

The silo model
will not hold up

View Slide

http://www.w3.org/QA/2011/10/web_applications_discovering_a.html

View Slide

http://chrisharrison.net/projects/omnitouch/full/IMG_0262.jpg

View Slide

Constellation of
experiences

View Slide

Embrace ﬂexibility

View Slide

JOHN ALLSOPP
http://www.alistapart.com/articles/dao/
The web’s greatest strength, I believe, is
often seen as a limitation, as a defect. It is
the nature of the web to be flexible, and it
should be our role as designers and
developers to embrace this flexibility, and
produce pages which, by being flexible, are
accessible to all.

View Slide

http://www.alistapart.com/articles/responsive-web-design/

View Slide

View Slide

Laying the
groundwork

View Slide

Disclaimer:
Not a silver bullet

View Slide

Everything on the web
is a shade of grey

View Slide

Know thy analytics

View Slide

Get out of
Photoshop

View Slide

http://ﬂic.kr/p/6QdXVA

View Slide

Get into the
browser

View Slide

Iterate

View Slide

Structured content

View Slide

JEFFREY ZELDMAN
https://twitter.com/#!/zeldman/status/804159148
Content precedes design. Design in the
absence of content is not design, it's
decoration.

View Slide

W.Y.S.I.W.T.F

View Slide

KAREN MCGRANE
http://5by5.tv/contenttalks/10
This is not about having something that
looks like Microsoft Word. This is about
you creating content that might appear
formatted in different ways, structured in
different ways, on lots of different
platforms. You have to be able to start
thinking in systems…

View Slide

http://blog.programmableweb.com/2009/11/11/content-portability-building-an-api-is-not-enough/

View Slide

http://ﬂic.kr/p/6e7uqr

View Slide

This is awesome

View Slide

API First

View Slide

http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/

View Slide

View Slide

Don’t use view
desktop as a cop out

View Slide

TRENT WALTON
http://trentwalton.com/2011/05/10/ﬁt-to-scale/
Responsive web design isn’t about fitting
content (like repacking a moving van), but
about tailoring content to fit the user (like
arranging furniture).

View Slide

http://24ways.org/2011/conditional-loading-for-responsive-designs

View Slide

var searchNews = function(searchterm) {
var elem = document.createElement('script');
elem.src = 'http://ajax.googleapis.com/ajax/services/
search/news?v=1.0&q='
+ searchterm + '&callback=displayNews';
document.getElementsByTagName('head')[0].appendChild(elem);
};
if (document.documentElement.clientWidth > 640) {
searchNews('cats');
}

View Slide

Fluid layouts

View Slide

http://twitter.com/#!/Malarkey/status/126032916496138240

View Slide

target % context = result

View Slide

960px
60px
20px

View Slide

100%
6.25%
(60/960)
(20/960) 2.0833333%

View Slide

The interconnectedness of all things
I'm very glad you asked me that, Mrs Rawlinson. The term `holistic' refers to my
conviction that what we are concerned with here is the fundamental
interconnectedness of all things. I do not concern myself with such petty things as
fingerprint powder, telltale pieces of pocket fluff and inane footprints. I see the
solution to each problem as being detectable in the pattern and web of the whole. The
connections between causes and effects are often much more subtle and complex than
we with our rough and ready understanding of the physical world might naturally
suppose, Mrs Rawlinson.
Let me give you an example. If you go to an acupuncturist with toothache he sticks a
needle instead into your thigh. Do you know why he does that, Mrs Rawlinson?
No, neither do I, Mrs Rawlinson, but we intend to find out. A pleasure talking to you,
Mrs Rawlinson. Goodbye.
16px
36px

View Slide

body {
font-size: 100%; /* 16px */
font-family: Georgia;
}
h1 {
font-size: 2.25em; /* 36px/16px = 2.25em */
font-family: Georgia;
}

View Slide

The interconnectedness of all things
I'm very glad you asked me that, Mrs Rawlinson. The term `holistic' refers to my
conviction that what we are concerned with here is the fundamental
interconnectedness of all things. I do not concern myself with such petty things as
fingerprint powder, telltale pieces of pocket fluff and inane footprints. I see the
solution to each problem as being detectable in the pattern and web of the whole. The
connections between causes and effects are often much more subtle and complex than
we with our rough and ready understanding of the physical world might naturally
suppose, Mrs Rawlinson.
Let me give you an example. If you go to an acupuncturist with toothache he sticks a
needle instead into your thigh. Do you know why he does that, Mrs Rawlinson?
No, neither do I, Mrs Rawlinson, but we intend to find out. A pleasure talking to you,
Mrs Rawlinson. Goodbye.
100%
2.25em

View Slide

Media queries

View Slide

visual viewport
(device-width)
layout viewport

View Slide

View Slide

height
user-scalable
initial-scale
maximum-scale
minimum-scale

View Slide

@media [not|only] type [and] (expression)
{
...
}

View Slide

@media screen and (min-width:320px)
and (max-width:480px)
{
...
}
type test

View Slide

Determine your
baseline experience

View Slide

BRYAN RIEGER
Read this deck: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
The absence of support for @media queries
is in fact the first @media query.

View Slide

/* base experience */
@media screen and (min-width: 320px) {....}

View Slide

Embedded or
external

View Slide

href="/mobile.css" media="only screen and (min-
width: 320px)">

View Slide

href="/mobile.css" media="only screen and (min-
width: 320px)">
@media screen and (min-width:480px)
{
...
}

View Slide

http://ﬂic.kr/p/9dAWZW

View Slide

https://github.com/scottjehl/Respond
http://www.lukew.com/ff/entry.asp?1392

View Slide


View Slide

Experiment with
more than width

View Slide


View Slide

media="screen and (min-height: 720px) and (min-width: 1000px)"
href="/sites/all/themes/edf/css/tallWideScreen.css”
/>

View Slide

Beware the
rabbit hole

View Slide

Responsive assets

View Slide

img { width: 50%; }

View Slide

figure {
width: 40%;
}
img {
max-width: 100%;
}

View Slide

Don’t just scale
Resize

View Slide

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

View Slide

Resizing those images and optimizing them
reduces the total file size for all six images
to 45K. That’s a 78% reduction in file size
and download time.

View Slide

Performance
matters

View Slide

71% of mobile users expect websites to load
as quickly, almost as quickly or faster on
their mobile phone, compared to the
computer they use at home

View Slide

60% expect a mobile website to load in 3
seconds or less
http://www.bizreport.com/2011/07/mobile-web-users-need-for-speed-not-being-satisﬁed.html

View Slide

25%
50%
75%
100%
2009 2011
Category Title
20%
74%
% of people who will bounce
after 5 seconds
Source: http://bit.ly/viowVq

View Slide

http://www.sencha.com/learn/how-to-use-src-sencha-io/

View Slide


src='http://src.sencha.io/http://mysite.com/
myimage.png'
alt='My image'
/>

src='http://src.sencha.io/x50/http://mysite.com/
myimage.png'
alt='My image'
/>

src='http://src.sencha.io/data/http://mysite.com/
myimage.png'
alt='My image'
/>

View Slide

https://github.com/ﬁlamentgroup/Responsive-Images

View Slide


View Slide

Don’t stop
with images

View Slide

//by width
if (screen.width >= 320) {
// bring the hotness
}
//by some combination
if (localStorage.supported && screen.width >= 320) {
//bring the hotness
}

View Slide

Be careful
with width

View Slide

http://tripleodeon.com/2011/12/ﬁrst-understand-your-screen/

View Slide

View Slide

//by media query
if (matchMedia('only screen and (max-width:
480px)').matches)
{
// bring the hotness
}
https://github.com/paulirish/matchMedia.js/

View Slide

Client-side is
not enough

View Slide

http://www.cloudfour.com/responsive-imgs/

View Slide

First page load

View Slide

Race conditions

View Slide

Content Delivery
Networks

View Slide

Images shouldn’t be
so #@&!! hard

View Slide

http://old.nabble.com/add-html-attribute-for-%22responsive-images%22-td32324865.html
media-xs="(min-device-width:320px and max-device-
width:640px)"
media-src-xs="http://cdn.url.com/img/
myimage_xs.jpg"
media-m="(min-device-width:640px and max-device-width:
1024px)"
media-src-m="http://cdn.url.com/img/myimage_m.jpg"
media-xl="(min-device-width:1024px)"
media-src-xl="http://cdn.url.com/img/
myimage_xsl.jpg"
/>

View Slide

http://robertnyman.com/2011/05/30/discussing-alternatives-for-various-sizes-of-the-same-image-introducing-src-property-in-css-as-an-option/
Text
src="default.jpg"
srclist="alternativeSizes"
alt="Picture of Unicorn"
/>

src="big.jpg"
media="min-width: 600px"
width="600"
height="400"
/>
src="small.jpg"
media="max-width: 600px"
width="320"
height="320"
/>

View Slide

http://ikelewis.com/the-future/
Text

src="smaller.jpg"
/>
src="tiny.jpg"
/>

View Slide

Server-side
detection

View Slide

UA Strings don’t
have to be evil

View Slide

Don’t exclude
Enhance

View Slide

http://www.lukew.com/ff/entry.asp?1392

View Slide


{{>header}}
[...document content...]
{{>footer}}

header.html
mobile_header.html
footer.html
mobile_footer.html

View Slide

https://github.com/jiolasa/Simple-RESS

View Slide

// If user shows up and doesn't have a cookie set
if(!isset($_COOKIE['resolution'])) {
?>
 // Set cookie based on screen size document.cookie='resolution='+ Math.max(screen.width,screen.height)+'; path=/'; location.reload(true); 
// If user doesn't have JavaScript, they'll just
// keep moving past here like nothing happened.
}
?>

View Slide

$res = !empty($_COOKIE['resolution']) ?
$_COOKIE['resolution'] : 500;
// Arbitrary mobile resolution.
?>

if($res > 800) {
//large screen component
} else {
//small screen component
}
?>

View Slide

Read these.
http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server
and
http://www.slideshare.net/yiibu/pragmatic-responsive-design

View Slide

Read this deck: http://www.slideshare.net/yiibu/pragmatic-responsive-design

View Slide

Device database
+
Tacit data
Great power

View Slide

http://www.modernizr.com/download/

View Slide

detect:{
width:function(){
return (window.innerWidth>0)?window.innerWidth:screen.width;
},
height:function(){
return (window.innerHeight>0)?window.innerHeight:screen.height;
},
touch:function(){
try{document.createEvent("TouchEvent");return true;}
catch(e){return false;}
},
json:function(){
return !!window.JSON;
},
}
http://browser.nokia.com/resources/scripts/
proﬁle.js

View Slide

Responding to
the user

View Slide

Context is
complicated

View Slide

Four elements
of context
http://ﬂic.kr/p/aRo4z

View Slide

Context
of use

View Slide

Context
of device

View Slide

Context
of task

View Slide

Context
of environment

View Slide

http://ﬂic.kr/p/7c8Nkq

View Slide

Mobile is a
loaded term

View Slide

Don’t assume
too much

View Slide

Context matters

View Slide

Context is the key
to a web that
responds to people

View Slide

JAMES PEARCE
http://jeﬀcroft.com/blog/2011/may/16/serious-excercise/#c166865
I’m fascinated to explore how the web can evolve
over the next 10 years. I believe that
understanding context is at the heart of it – like
the speed of light was to turn-of-the-century
physicists – and that we should continue to
explore the boundaries so as to change the
expectations of both creators and users.
Or, like those same physicists 120 years ago, do
we really think we’ve got it all figured out?

View Slide

Question everything

View Slide

LEWIS CARROLL
"Have you guessed the riddle yet?" the
Hatter said, turning to Alice again.
"No, I give it up," Alice replied: "what's the
answer?'
"I haven't the slightest idea," said the
Hatter.

View Slide

We’ve only
scratched the surface

View Slide

FUTUREFRIEND.LY
Our existing standards, workflows, and
infrastructure won't hold up. Today's
onslaught of devices is already pushing
them to the breaking point. They can't
withstand what's ahead.

View Slide

Create the future

View Slide

thank you!
TIM KADLEC
Rich Web Experience, December 2011
@tkadlec timkadlec.com responsiveenhancement.com

View Slide

Developing for the anywhere, everywhere web

Developing for the anywhere, everywhere web

Tim Kadlec

More Decks by Tim Kadlec

Other Decks in Programming

Featured

Transcript