Slide 1
Slide 1 text
developing for
the anywhere,
everywhere web
TIM KADLEC
Rich Web Experience, December 2011
@tkadlec timkadlec.com
Slide 2
Slide 2 text
The maturation
of the medium
Slide 3
Slide 3 text
TOM BARRETT
Chaos in the world brings uneasiness, but
it also allows the opportunity for creativity
and growth.
Slide 4
Slide 4 text
Control is an illusion
Slide 5
Slide 5 text
MARSHALL MCLUHAN
We see the world through a rear-view
mirror. We march backwards into the
future.
Slide 6
Slide 6 text
The web
removes constraints
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
The silo model
will not hold up
Slide 9
Slide 9 text
http://www.w3.org/QA/2011/10/web_applications_discovering_a.html
Slide 10
Slide 10 text
http://chrisharrison.net/projects/omnitouch/full/IMG_0262.jpg
Slide 11
Slide 11 text
Constellation of
experiences
Slide 12
Slide 12 text
Embrace flexibility
Slide 13
Slide 13 text
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.
Slide 14
Slide 14 text
http://www.alistapart.com/articles/responsive-web-design/
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Laying the
groundwork
Slide 17
Slide 17 text
Disclaimer:
Not a silver bullet
Slide 18
Slide 18 text
Everything on the web
is a shade of grey
Slide 19
Slide 19 text
Know thy analytics
Slide 20
Slide 20 text
Get out of
Photoshop
Slide 21
Slide 21 text
http://flic.kr/p/6QdXVA
Slide 22
Slide 22 text
Get into the
browser
Slide 23
Slide 23 text
Iterate
Slide 24
Slide 24 text
Structured content
Slide 25
Slide 25 text
JEFFREY ZELDMAN
https://twitter.com/#!/zeldman/status/804159148
Content precedes design. Design in the
absence of content is not design, it's
decoration.
Slide 26
Slide 26 text
W.Y.S.I.W.T.F
Slide 27
Slide 27 text
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…
Slide 28
Slide 28 text
http://blog.programmableweb.com/2009/11/11/content-portability-building-an-api-is-not-enough/
Slide 29
Slide 29 text
http://flic.kr/p/6e7uqr
Slide 30
Slide 30 text
http://flic.kr/p/6e7uqr
Slide 31
Slide 31 text
This is awesome
Slide 32
Slide 32 text
API First
Slide 33
Slide 33 text
http://flic.kr/p/6e7uqr
http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Don’t use view
desktop as a cop out
Slide 36
Slide 36 text
TRENT WALTON
http://trentwalton.com/2011/05/10/fit-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).
Slide 37
Slide 37 text
http://flic.kr/p/6e7uqr
http://24ways.org/2011/conditional-loading-for-responsive-designs
Slide 38
Slide 38 text
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');
}
Slide 39
Slide 39 text
Fluid layouts
Slide 40
Slide 40 text
http://twitter.com/#!/Malarkey/status/126032916496138240
Slide 41
Slide 41 text
target % context = result
Slide 42
Slide 42 text
960px
60px
20px
Slide 43
Slide 43 text
100%
6.25%
(60/960)
(20/960) 2.0833333%
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
body {
font-size: 100%; /* 16px */
font-family: Georgia;
}
h1 {
font-size: 2.25em; /* 36px/16px = 2.25em */
font-family: Georgia;
}
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
Media queries
Slide 48
Slide 48 text
visual viewport
(device-width)
layout viewport
Slide 49
Slide 49 text
Slide 50
Slide 50 text
Slide 51
Slide 51 text
Slide 52
Slide 52 text
height
user-scalable
initial-scale
maximum-scale
minimum-scale
Slide 53
Slide 53 text
@media [not|only] type [and] (expression)
{
...
}
Slide 54
Slide 54 text
@media screen and (min-width:320px)
and (max-width:480px)
{
...
}
type test
Slide 55
Slide 55 text
Determine your
baseline experience
Slide 56
Slide 56 text
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.
Slide 57
Slide 57 text
/* base experience */
@media screen and (min-width: 320px) {....}
@media screen and (min-width: 600px) {....}
@media screen and (min-width: 1300px) {....}
Slide 58
Slide 58 text
Embedded or
external
Slide 59
Slide 59 text
Slide 60
Slide 60 text
@media screen and (min-width:480px)
{
...
}
Slide 61
Slide 61 text
http://flic.kr/p/9dAWZW
Slide 62
Slide 62 text
https://github.com/scottjehl/Respond
http://flic.kr/p/6e7uqr
http://www.lukew.com/ff/entry.asp?1392
Slide 63
Slide 63 text
http://flic.kr/p/6e7uqr
Slide 64
Slide 64 text
Experiment with
more than width
Slide 65
Slide 65 text
http://flic.kr/p/6e7uqr
Slide 66
Slide 66 text
http://flic.kr/p/6e7uqr
Slide 67
Slide 67 text
Beware the
rabbit hole
Slide 68
Slide 68 text
Responsive assets
Slide 69
Slide 69 text
img { width: 50%; }
Slide 70
Slide 70 text
figure {
width: 40%;
}
img {
max-width: 100%;
}
Slide 71
Slide 71 text
Don’t just scale
Resize
Slide 72
Slide 72 text
http://flic.kr/p/6e7uqr
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
Slide 73
Slide 73 text
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.
Slide 74
Slide 74 text
Performance
matters
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
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-satisfied.html
Slide 77
Slide 77 text
25%
50%
75%
100%
2009 2011
Category Title
20%
74%
% of people who will bounce
after 5 seconds
Source: http://bit.ly/viowVq
Slide 78
Slide 78 text
http://www.sencha.com/learn/how-to-use-src-sencha-io/
Slide 79
Slide 79 text
http://flic.kr/p/6e7uqr
Slide 80
Slide 80 text
https://github.com/filamentgroup/Responsive-Images
Slide 81
Slide 81 text
http://flic.kr/p/6e7uqr
Slide 82
Slide 82 text
Don’t stop
with images
Slide 83
Slide 83 text
http://flic.kr/p/6e7uqr
//by width
if (screen.width >= 320) {
// bring the hotness
}
//by some combination
if (localStorage.supported && screen.width >= 320) {
//bring the hotness
}
Slide 84
Slide 84 text
Be careful
with width
Slide 85
Slide 85 text
http://tripleodeon.com/2011/12/first-understand-your-screen/
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
http://flic.kr/p/6e7uqr
//by media query
if (matchMedia('only screen and (max-width:
480px)').matches)
{
// bring the hotness
}
https://github.com/paulirish/matchMedia.js/
Slide 88
Slide 88 text
Client-side is
not enough
Slide 89
Slide 89 text
http://flic.kr/p/6e7uqr
http://www.cloudfour.com/responsive-imgs/
Slide 90
Slide 90 text
First page load
Slide 91
Slide 91 text
Race conditions
Slide 92
Slide 92 text
Content Delivery
Networks
Slide 93
Slide 93 text
Images shouldn’t be
so #@&!! hard
Slide 94
Slide 94 text
http://old.nabble.com/add-html-attribute-for-%22responsive-images%22-td32324865.html
Slide 95
Slide 95 text
http://robertnyman.com/2011/05/30/discussing-alternatives-for-various-sizes-of-the-same-image-introducing-src-property-in-css-as-an-option/
Text
Slide 96
Slide 96 text
http://ikelewis.com/the-future/
Text
Slide 97
Slide 97 text
Server-side
detection
Slide 98
Slide 98 text
UA Strings don’t
have to be evil
Slide 99
Slide 99 text
Don’t exclude
Enhance
Slide 100
Slide 100 text
http://www.lukew.com/ff/entry.asp?1392
Slide 101
Slide 101 text
http://flic.kr/p/6e7uqr
{{>header}}
[...document content...]
{{>footer}}
header.html
mobile_header.html
footer.html
mobile_footer.html
Slide 102
Slide 102 text
http://flic.kr/p/6e7uqr
https://github.com/jiolasa/Simple-RESS
Slide 103
Slide 103 text
// Set cookie based on screen size
document.cookie='resolution='+
Math.max(screen.width,screen.height)+'; path=/';
location.reload(true);
Slide 104
Slide 104 text
800) {
//large screen component
} else {
//small screen component
}
?>
Slide 105
Slide 105 text
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
Slide 106
Slide 106 text
Read this deck: http://www.slideshare.net/yiibu/pragmatic-responsive-design
Slide 107
Slide 107 text
Device database
+
Tacit data
Great power
Slide 108
Slide 108 text
http://flic.kr/p/6e7uqr
http://www.modernizr.com/download/
Slide 109
Slide 109 text
http://flic.kr/p/6e7uqr
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/
profile.js
Slide 110
Slide 110 text
Responding to
the user
Slide 111
Slide 111 text
Context is
complicated
Slide 112
Slide 112 text
Four elements
of context
http://flic.kr/p/aRo4z
Slide 113
Slide 113 text
Context
of use
Slide 114
Slide 114 text
Context
of device
Slide 115
Slide 115 text
Context
of task
Slide 116
Slide 116 text
Context
of environment
Slide 117
Slide 117 text
http://flic.kr/p/7c8Nkq
Slide 118
Slide 118 text
Mobile is a
loaded term
Slide 119
Slide 119 text
Don’t assume
too much
Slide 120
Slide 120 text
Context matters
Slide 121
Slide 121 text
Context is the key
to a web that
responds to people
Slide 122
Slide 122 text
JAMES PEARCE
http://jeffcroft.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?
Slide 123
Slide 123 text
Question everything
Slide 124
Slide 124 text
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.
Slide 125
Slide 125 text
We’ve only
scratched the surface
Slide 126
Slide 126 text
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.
Slide 127
Slide 127 text
Create the future
Slide 128
Slide 128 text
thank you!
TIM KADLEC
Rich Web Experience, December 2011
@tkadlec timkadlec.com responsiveenhancement.com