177%
increase in tablet
ownership since last year
In the US...
http://bit.ly/YFW4Ai
Slide 8
Slide 8 text
80%
of consumers multi-task
with other devices while
watching TV
In the US...
http://bit.ly/YFW4Ai
Slide 9
Slide 9 text
26%
of consumers own a
laptop, tablet &
smartphone
http://bit.ly/YFW4Ai
In the US...
Slide 10
Slide 10 text
The web is not fixed width.
Slide 11
Slide 11 text
The penetration of desktop
& laptop ownership is the
same today as it was in
2007.
http://bit.ly/zE1zgp
In the US...
Slide 12
Slide 12 text
Mobile vs Desktop Browsing
0
500
1000
1500
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
Mobile Users Desktop Users
http://bit.ly/L5cqiO
Slide 13
Slide 13 text
0
500
1000
1500
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
Mobile Users Desktop Users
http://bit.ly/L5cqiO
Not that far away…
Slide 14
Slide 14 text
Q1 2013
conversions on tablets
surpassed conversions on
traditional desktops
http://bit.ly/sNpLte
In the US...
Slide 15
Slide 15 text
Flexibility is the new norm.
Slide 16
Slide 16 text
People are trying to
browse your sites on these
devices, today.
Slide 17
Slide 17 text
Responsive web design
Slide 18
Slide 18 text
Ethan Marcotte
!
Article on ALA
(http://bit.ly/Wi0xvw)
!
Book via ABA
(http://bit.ly/f6TPB7)
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
RWD 101
‣ Three Core Techniques
- A Fluid Foundation
- Flexible Content
- Media Queries
Slide 21
Slide 21 text
A Fluid Foundation
Honor the proportions of
the design by creating
percentage-based layout
instead of fixed-width,
pixel-based layout.
Slide 22
Slide 22 text
1000px
400px
600px
A Fluid Foundation
Slide 23
Slide 23 text
1000px
600px
A Fluid Foundation
Slide 24
Slide 24 text
100%
40%
60%
A Fluid Foundation
Slide 25
Slide 25 text
100%
40%
60%
A Fluid Foundation
Slide 26
Slide 26 text
Flexible Content
Once we have a layout
which is based on
proportions, the content
must also respond.
Slide 27
Slide 27 text
We the People of the United States, in
Order to form a more perfect Union,
establish Justice, insure domestic
Tranquility, provide for the common
defense, promote the general Welfare,
and secure the Blessings of Liberty to
ourselves and our Posterity, do ordain
and establish this Constitution for the
United States of America.
Flexible Content
Slide 28
Slide 28 text
We the People of
the United States, in
Order to form a
more perfect Union,
establish Justice,
insure domestic
Tranquility, provide
for the common
defense, promote
the general Welfare,
and secure the
Blessings of Liberty
to ourselves and our
Posterity, do ordain
Flexible Content
Slide 29
Slide 29 text
We the People of the United States, in
Order to form a more perfect Union,
establish Justice, insure domestic
Tranquility, provide for the common
(Image)
600px
Flexible Content
Slide 30
Slide 30 text
We the People of
the United States, in
Order to form a
more perfect Union,
(Image)
600px
Flexible Content
Slide 31
Slide 31 text
Flexible Content
http://bit.ly/ZdC8pH
We the People of
the United States, in
Order to form a
more perfect Union,
(Image)
600px
Slide 32
Slide 32 text
We the People of
the United States, in
Order to form a
more perfect Union,
establish Justice,
insure domestic
Tranquility, provide
for the common
defense, promote
(Image)
100%
Flexible Content
Slide 33
Slide 33 text
Media Queries
When our content and our
design are no longer
working in harmony, we
need to make a larger shift
in layout.
Slide 34
Slide 34 text
Media Queries
100%
40%
60%
Slide 35
Slide 35 text
A
100%
C
100%
B
100%
C
40%
B
60%
A
100%
Media Queries
Slide 36
Slide 36 text
Media Queries
A
100%
C
100%
B
100%
C
40%
B
60%
A
100%
LAUNCH
DESIGN
FRONT
END
BACK
END
CONTENT
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
CONTENT UX
FRONT-END
DESIGN
BACK-END
Slide 56
Slide 56 text
LAUNCH
DESIGN
FRONT
END
BACK
END
CONTENT
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
CONTENT UX
FRONT-END
DESIGN
BACK-END
UX
FRONT-END
DESIGN
LAUNCH
DESIGN
FRONT
END
BACK
END
CONTENT
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
FRONT-END
DESIGN
ND
!
Design in the
“1 deliverable”
workflow
Slide 67
Slide 67 text
Dissecting Design
PRODUCTIVITY
TIME
Slide 68
Slide 68 text
Dissecting Design
PRODUCTIVITY
TIME
Slide 69
Slide 69 text
Establish the Aesthetic
DISSECTING DESIGN
Slide 70
Slide 70 text
Solve the Problem
DISSECTING DESIGN
Slide 71
Slide 71 text
“I’ve been amazed at how often those
outside the discipline of design
assume that what designers do is
decoration. Good design is problem
solving.”
!
@veen
Style Comparisons
ESTABLISH THE AESTHETIC
“I could create an illustration or a 3D
rendering of what I want my new office to
look like, but that doesn’t take advantage
of his great ideas. It’s dictation, not
collaboration. Instead, I show him a
Pinterest board my wife and I created.”
!
@danielmall
http://danielmall.com/articles/the-post-psd-era/
Slide 77
Slide 77 text
Style Comparisons
ESTABLISH THE AESTHETIC
Light vs Dark
Slide 78
Slide 78 text
Style Comparisons
ESTABLISH THE AESTHETIC
Flat vs Textured
Slide 79
Slide 79 text
Style Comparisons
ESTABLISH THE AESTHETIC
Illustration vs Photography
Slide 80
Slide 80 text
Style Tiles
ESTABLISH THE AESTHETIC
Slide 81
Slide 81 text
Style Tiles
ESTABLISH THE AESTHETIC
Slide 82
Slide 82 text
Style Tiles
ESTABLISH THE AESTHETIC
Slide 83
Slide 83 text
Style Prototypes
ESTABLISH THE AESTHETIC
Slide 84
Slide 84 text
USE TOOLS YOU ARE
COMFORTABLE WITH
TO ESTABLISH THE
AESTHETIC
HOW TO DECIDE
Slide 85
Slide 85 text
Cool, so what
happens next?
Slide 86
Slide 86 text
Solve the Problem
DISSECTING DESIGN
Slide 87
Slide 87 text
DISSECTING DESIGN
‣ Static Design Tools
‣ Responsive Design Tools
‣ HTML/CSS
Solve the Problem
Slide 88
Slide 88 text
Static Design Tools
SOLVE THE PROBLEM
Slide 89
Slide 89 text
Static Design Tools
SOLVE THE PROBLEM
Slide 90
Slide 90 text
Static Design Tools
SOLVE THE PROBLEM
Slide 91
Slide 91 text
Responsive Design Tools
SOLVE THE PROBLEM
Slide 92
Slide 92 text
SOLVE THE PROBLEM
Responsive Design Tools
Slide 93
Slide 93 text
SOLVE THE PROBLEM
Responsive Design Tools
Slide 94
Slide 94 text
SOLVE THE PROBLEM
Responsive Design Tools
Slide 95
Slide 95 text
HTML/CSS
SOLVE THE PROBLEM
Slide 96
Slide 96 text
HTML/CSS
SOLVE THE PROBLEM
Slide 97
Slide 97 text
HTML/CSS
SOLVE THE PROBLEM
Slide 98
Slide 98 text
Layout vs Modules
SOLVE THE PROBLEM
Slide 99
Slide 99 text
Layout vs Modules
SOLVE THE PROBLEM
Slide 100
Slide 100 text
SOLVE THE PROBLEM
Atomic Design
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
YOU BEST SOLVE
PROBLEMS USING
TOOLS YOU ARE
FLUENT WITH
HOW TO DECIDE
DISSECTING DESIGN
Don’t Use Static Design
Tools to Refine
LAUNCH
DESIGN
FRONT
END
BACK
END
CONTENT
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
Slide 107
Slide 107 text
Don’t Use Static Design Tools
REFINE THE SOLUTION
Slide 108
Slide 108 text
Instead of static design
hand-offs, consider
design pairing
REFINE THE SOLUTION
Slide 109
Slide 109 text
REFINE THE SOLUTION
Design Pairing
Slide 110
Slide 110 text
REFINE THE SOLUTION
Design Pairing
Slide 111
Slide 111 text
Design Pairing
REFINE THE SOLUTION
Slide 112
Slide 112 text
Design Pairing
REFINE THE SOLUTION
Slide 113
Slide 113 text
You don’t want to do the long
tail more than once
REFINE THE SOLUTION
Slide 114
Slide 114 text
The Switching Point
REFINE THE SOLUTION
Slide 115
Slide 115 text
EFFICIENCY IS KEY
WHEN REFINING A
DESIGN SOLUTION
HOW TO DECIDE
Group improvisation is a challenge.
Aside from the weighty technical
problem of collective coherent
thinking, there is the very human,
even social need for sympathy from
all members to bend for the common
result.
Bill Evans
Slide 119
Slide 119 text
Group improvisation is a challenge.
Aside from the weighty technical
problem of collective coherent
thinking, there is the very human,
even social need for sympathy from
all members to bend for the common
result.
Bill Evans
The Problem of the Team
Slide 120
Slide 120 text
Group improvisation is a challenge.
Aside from the weighty technical
problem of collective coherent
thinking, there is the very human,
even social need for sympathy from
all members to bend for the common
result.
Bill Evans
The Problem of the Individual
Slide 121
Slide 121 text
Group Improvisation
Slide 122
Slide 122 text
Individuals
Slide 123
Slide 123 text
Group improvisation requires
individuals on a team to...
!
be fluent
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
SOLVE THE PROBLEM
Slide 126
Slide 126 text
Unconscious
Incompetence
SOLVE THE PROBLEM
Slide 127
Slide 127 text
Unconscious
Incompetence
Conscious
Incompetence
SOLVE THE PROBLEM
Slide 128
Slide 128 text
Unconscious
Incompetence
Conscious
Incompetence Conscious
Competence
SOLVE THE PROBLEM
Slide 129
Slide 129 text
Unconscious
Incompetence
Conscious
Incompetence Conscious
Competence
Unconscious
Competence
SOLVE THE PROBLEM
Slide 130
Slide 130 text
Fluency
SOLVE THE PROBLEM
Slide 131
Slide 131 text
Group improvisation requires
individuals on a team to...
!
be humble
Slide 132
Slide 132 text
Group improvisation requires
individuals on a team to...
!
be empathetic
Slide 133
Slide 133 text
Fluency
Humility
Empathy
Slide 134
Slide 134 text
Teams
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
Create guidelines instead
of rigid process
Slide 142
Slide 142 text
The amount of process
required is inversely
proportionate to the
skill and experience of
your team.
Slide 143
Slide 143 text
Create the perfect, fully-documented,
all-encompassing web design and
development process.
!
Or...
Slide 144
Slide 144 text
Chill out and develop our people.
Slide 145
Slide 145 text
Invest in people
over process
Slide 146
Slide 146 text
CODE AND PROJECT STRUCTURE
SERVING
RWD STYLES
Slide 147
Slide 147 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Slide 148
Slide 148 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
CSS PREPROCESSING FTW!
Slide 149
Slide 149 text
Before any of this stuff will
work, you need to do this:
Slide 150
Slide 150 text
And, you should
also do this:
!
/* CSS */"
@-webkit-viewport { width:device-width; }"
@-moz-viewport { width:device-width; }"
@-ms-viewport { width:device-width; }"
@-o-viewport { width:device-width; }"
@viewport { width:device-width; }"
Slide 151
Slide 151 text
30%
50%
100%
The Example
Slide 152
Slide 152 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Slide 153
Slide 153 text
Single CSS File
HTML
CSS
!
Start with styles
applied to all
!
Styles scoped to
a media query
!
Styles scoped to
another media query
Single CSS File
/* styles.css */"
!
aside { color: #333; width: 100%; }"
!
/* if the viewport width is 40em or greater */"
Slide 156
Slide 156 text
PAUSE:
MEDIA QUERIES
Slide 157
Slide 157 text
Media Queries
"
!
Slide 158
Slide 158 text
Media Types
"
!
Slide 159
Slide 159 text
Media Types
all
braille, embossed, speech
handheld, projection, screen, tv
print
tty
http://www.w3.org/TR/CSS21/media.html#media-types
Slide 160
Slide 160 text
Media Features
"
!
Slide 161
Slide 161 text
Media Features
width, height
device-width, device-height
orientation
aspect-ratio, device-aspect-ratio
color, color-index, monochrome
resolution, scan, grid
http://www.w3.org/TR/css3-mediaqueries
Slide 162
Slide 162 text
Single CSS File
HTML
CSS
!
Start with styles
applied to all
!
Styles scoped to a
media query
!
Styles scoped to
another media query
Slide 163
Slide 163 text
Small Viewport Width First
HTML
CSS
!
Smallest styles
!
Wider styles (mq)
!
Even wider styles (mq)
!
Super wide styles (mq)
Slide 164
Slide 164 text
Large Viewport Width First
HTML
CSS
!
Widest styles
!
Wide styles (mq)
!
Narrow styles (mq)
!
Very narrow styles (mq)
Slide 165
Slide 165 text
Single CSS File
/* styles.css */"
!
aside { color: #333; width: 100%; }"
!
/* if the viewport width is 40em or greater */"
Slide 166
Slide 166 text
Single CSS File
/* styles.css */"
!
aside { color: #333; width: 100%; }"
!
/* if the viewport width is 40em or greater */"
@media (min-width: 40em) {"
aside { width: 50%; }"
}"
Slide 167
Slide 167 text
Single CSS File
/* styles.css */"
!
aside { color: #333; width: 100%; }"
!
/* if the viewport width is 40em or greater */"
@media (min-width: 40em) {"
aside { width: 50%; }"
}"
Slide 168
Slide 168 text
Single CSS File
/* styles.css */"
!
aside { color: #333; width: 100%; }"
!
/* if the viewport width is 40em or greater */"
@media (min-width: 40em) {"
aside { width: 50%; }"
}"
!
/* if the viewport width is 60em or greater */"
@media (min-width: 60em) {"
aside { width: 30%; }"
}
Slide 169
Slide 169 text
Single CSS File
Small Viewport
Width First
/* styles.css */"
!
aside { color: #333; width: 100%; }"
!
/* if the viewport width is 40em or greater */"
@media (min-width: 40em) {"
aside { width: 50%; }"
}"
!
/* if the viewport width is 60em or greater */"
@media (min-width: 60em) {"
aside { width: 30%; }"
}
Slide 170
Slide 170 text
Single CSS File
Large Viewport
Width First
/* styles.css */"
!
aside { color: #333; width: 30%; }"
!
/* if the viewport width is 60em or less */"
@media (max-width: 60em) {"
aside { width: 50%; }"
}"
!
/* if the viewport width is 40em or less */"
@media (max-width: 40em) {"
aside { width: 100%; }"
}
Slide 171
Slide 171 text
SERVING RWD STYLES
Single CSS File
‣ Simple to implement
‣ Single request
‣ Doesn’t require a preprocessor
‣ Requires JS to serve large layout to
old IE if starting with small layouts
‣ Large sites can be difficult to maintain
because of the size of
the single file
Slide 172
Slide 172 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Slide 173
Slide 173 text
Multiple CSS Files
HTML
!
If this browser is less than IE9...
and it’s not IE Mobile...
and viewport width is at least
40em...
!
global.css
!
all styles
linear layout
layout.css
!
only styles for layout
http://adactio.com/journal/4494/
SERVING RWD STYLES
Multiple CSS Files
‣ Doesn’t require a preprocessor
‣ At least two requests
‣ Requires you to separate layout from
other styles
‣ Allows you to start with small layouts
and serve a single large layout to old IE
without JS
- Requests go up if you use multiple MQs
Slide 182
Slide 182 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Slide 183
Slide 183 text
Breakpoint Based Partials
HTML
!
If this browser is less than IE9...
and it’s not IE Mobile...
!
base.css
!
all styles/MQ blocks
no-mq.css
!
MQ styles from base
without the MQs
http://nicolasgallagher.com/mobile-first-css-sass-and-ie/
Mixins
‣ SASS and Stylus both support
basic programming like loops, if/
else, etc. in mixins.
‣ LESS only offers “guarded mixins.”
- I hear this is better with the *new*
version...
Compass & Bourbon
‣ Compass and Bourbon are mixin
libraries for SASS
‣ Takes care of vendor prefixes with
mixins
‣ Compass has an ecosystem of
plugins built on top of Compass
‣ With config.rb, Compass lets you
check the preprocessor config into
source control
Slide 211
Slide 211 text
Compass & Bourbon
Slide 212
Slide 212 text
Importing
‣ Allows you to break up your styles
across files
- variables, mixins, reset, all separated
‣ Better than a standard css import
Slide 213
Slide 213 text
Importing
this file will
compile to
base.css
/* base.scss */"
!
@import "compass";"
@import "variables";"
@import "reset";"
@import "mixins";"
@import "header";"
@import "hero";"
@import "whatever";
SERVING RWD STYLES
Breakpoint Based Partials
‣ Allows you to start with small
layouts and serve large layout to
old IE without JS
‣ Only 1 or 2 requests
‣ Requires preprocessor
‣ Maintenance can be complex
Slide 221
Slide 221 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Slide 222
Slide 222 text
HTML
If < IE9 and not IE Mobile
!
If >= IE9 or IE Mobile or not IE
Module Based Partials
no-mq.css
!
All styles with no MQs
!
!
mq.css
!
All styles with MQs
http://seesparkbox.com/foundry/
structuring_and_serving_styles_for_older_browsers
SERVING RWD STYLES
Module Based Partials
‣ Single Request
‣ Easy Maintenance
‣ Allows you to start with small
layouts and serve large layout to old
IE without JS
‣ Requires Preprocessor
Slide 247
Slide 247 text
This is so much
more natural.
Slide 248
Slide 248 text
THERE IS NO
BREAKPOINT
Slide 249
Slide 249 text
There is no Breakpoint
aside {"
// general styles"
!
// major shift at 40em"
// major shift at 60em"
..."
}
aside {"
// general styles"
!
// major shift at 40em"
// minor tweak at 42em"
// minor tweak at 53.5em"
// minor tweak at 56em"
// major shift at 60em"
// minor tweak at 72.2em"
// minor tweak at 74em"
..."
}
Slide 250
Slide 250 text
There is no Breakpoint
aside {"
// general styles"
!
// major shift at 40em"
// major shift at 60em"
..."
}
aside {"
// general styles"
!
// major shift at 40em"
// minor tweak at 42em"
// minor tweak at 53.5em"
// minor tweak at 56em"
// major shift at 60em"
// minor tweak at 72.2em"
// minor tweak at 74em"
..."
}
Slide 251
Slide 251 text
There is no Breakpoint
Media Query
Bookmarklet
(by @robtarr)
Slide 252
Slide 252 text
There is no Breakpoint
Slide 253
Slide 253 text
Relax.
Slide 254
Slide 254 text
Think more modularly.
!
Try something like SMACSS
(from @snookca).
Slide 255
Slide 255 text
Element Queries
http://www.xanthir.com/b4PR0
Slide 256
Slide 256 text
Responsive Elements
https://github.com/kumailht/responsive-elements
Slide 257
Slide 257 text
http://seesparkbox.com/foundry/there_is_no_breakpoint
There is no Breakpoint
http://www.markboulton.co.uk/journal/theinbetween
The In-Between
http://www.jordanm.co.uk/post/43147197731/the-in-between
The In-Between (2)
Slide 258
Slide 258 text
Discussion
‣ How are you serving RWD
styles today?
‣ How do you “support” older IE?
Slide 259
Slide 259 text
MAKING EVERYTHING FLUID
CREATING
FLEXIBILITY
Slide 260
Slide 260 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Slide 261
Slide 261 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Slide 262
Slide 262 text
It starts with the grid
Slide 263
Slide 263 text
It starts with the grid
body {"
width: 100%;"
}"
!
div.main {"
width: 70%;"
}"
!
aside {"
width: 28%;"
}
body {"
width: 1000px;"
}"
!
div.main {"
width: 700px;"
}"
!
aside {"
width: 280px;"
}
Slide 264
Slide 264 text
It starts with the grid
body {"
width: 100%;"
}"
!
div.main {"
width: 70%;"
}
target / context = %
700 / 1000 = .7
.7 = 70%
body {"
width: 1000px;"
}"
!
div.main {"
width: 700px;"
}
Slide 265
Slide 265 text
It starts with the grid
body {"
width: 100%;"
}"
!
aside {"
width: 28%;"
}
target / context = %
280 / 1000 = .28
.28 = 28%
body {"
width: 1000px;"
}"
!
aside {"
width: 280px;"
}
Slide 266
Slide 266 text
Responsive grid systems
Slide 267
Slide 267 text
CREATING FLEXIBILITY
RWD Grid Systems
‣ Foundation
‣ Bootstrap
‣ Skeleton
‣ Responsive.gs
‣ Columnal
‣ ...this list goes on, and on, and on
Slide 268
Slide 268 text
CREATING FLEXIBILITY
Semantic RWD Grid Systems
‣ Semantic.gs
‣ Susy
‣ Zen Grids
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Slide 295
Slide 295 text
Type flexes by default
Slide 296
Slide 296 text
We need to
consider readability
Slide 297
Slide 297 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
‣ Viewport-based type sizing
Slide 298
Slide 298 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
‣ Viewport-based type sizing
Slide 299
Slide 299 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
‣ Viewport-based type sizing
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
‣ Viewport-based type sizing
Slide 302
Slide 302 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
‣ Viewport-based type sizing
Slide 303
Slide 303 text
vw & vh CSS Units
Slide 304
Slide 304 text
JS Alternatives
Slide 305
Slide 305 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Slide 306
Slide 306 text
Flexible Images
img {"
max-width: 100%;"
}
Slide 307
Slide 307 text
The image problem(s)
Slide 308
Slide 308 text
CREATING FLEXIBILITY
The image problem(s)
‣ Content
‣ Bandwidth
‣ Pixel density
Slide 309
Slide 309 text
CREATING FLEXIBILITY
Image: Content
Slide 310
Slide 310 text
CREATING FLEXIBILITY
Image: Content
Slide 311
Slide 311 text
CREATING FLEXIBILITY
Image: Content
Slide 312
Slide 312 text
CREATING FLEXIBILITY
Image: Content
Slide 313
Slide 313 text
CREATING FLEXIBILITY
Image: Bandwidth
As of March of 2012, 86% of the sites on
mediaqueri.es demonstrated the same
weight and load time at resolutions from
300ish to 1200ish.
!
via @guypod
http://www.guypo.com/mobile/performance-implications-of-responsive-
design-book-contribution/
CREATING FLEXIBILITY
Image: Pixel Density
Most new mobile devices have high
pixel density displays:
!
Apple iPhone 4+: 326 PPI
Amazon Kindle Fire HD 8.9: 254 PPI
Nokia Lumia 920: 332 PPI
BlackBerry Z10: 356 PPI
Samsung Galaxy Note: 285 PPI
Slide 316
Slide 316 text
CREATING FLEXIBILITY
The image problem(s)
‣ Content
‣ Bandwidth
‣ Pixel density
Slide 317
Slide 317 text
CREATING FLEXIBILITY
The image solution(s)
‣ SVG
‣ Icon fonts
‣ Pixel-density media queries
‣ Compressive
‣ Polyfill new markup patterns
‣ User preference
Slide 318
Slide 318 text
SVG (Scalable Vector
Graphics)
‣ Allows the image to be resolution
independent.
‣ Support isn’t very good for older
browsers.
‣ We can use Modernizr to detect if
the browser supports SVG and
provide a .png fallback for those
that do not.
Slide 319
Slide 319 text
@dbushell wrote a great primer for SVG
Slide 320
Slide 320 text
Icon Fonts
‣ Fonts by default are resolution
independent, Icon fonts are no
different.
‣ http://icomoon.io/app/ allows you
to create your own icon fonts
‣ They do require a bit more
markup, and JS for IE 7 and lower.
“Compressive” Images
‣ http://bit.ly/Sygdey
‣ Increase the image dimensions
‣ Add massive compression
‣ Scale the image in the browser
Slide 323
Slide 323 text
Pixel Density MQs
‣ Detect the pixel ratio of the device
and serve a second, higher-res
image.
‣ Retina devices now have to make
an additional request for the retina
asset.
Slide 324
Slide 324 text
Pixel Density MQs
Also need other
browser prefixes
/*.scss*/"
@media only all and
(-webkit-min-device-pixel-ratio: 1.5) {"
.logo {"
background-image: url(/i/logo-2x.png);"
background-size: 100%;"
}"
}
Discussion
‣ What content types have we not
addressed?
‣ What specific challenges are you
facing in creating flexibility?
Slide 341
Slide 341 text
UNIQUE CONSIDERATIONS AND CHALLENGES
RWD NAVIGATION
Slide 342
Slide 342 text
The Maze
Slide 343
Slide 343 text
amazon.com
Slide 344
Slide 344 text
amazon.com
Slide 345
Slide 345 text
amazon.com
Slide 346
Slide 346 text
amazon.com
Slide 347
Slide 347 text
amazon.com
Slide 348
Slide 348 text
amazon.com
Slide 349
Slide 349 text
Congratulations!
In celebration of all your hard work
and discipline, as a reward for all the
risk you’ve taken to reach this point,
we’re quite pleased to present you
with…YOUR CONTENT!
!
Keep up the good work!
!
~ The Management
Trigger Indicators
‣ Words
‣ menu, main menu
‣ nav, navigation
‣ sections, site sections,
topics, products
‣ products, see products
‣ Icons
‣ plus
‣ hamburger
‣ arrows
Slide 353
Slide 353 text
TRIGGER INDICATORS
Words
Slide 354
Slide 354 text
TRIGGER INDICATORS
Icons
Plus Hamburger Down Arrow
Slide 355
Slide 355 text
TRIGGER INDICATORS
Other & Combinations
Slide 356
Slide 356 text
Trigger Indicators
‣ Words
‣ menu, main menu
‣ nav, navigation
‣ sections, site sections,
topics, products
‣ products, see products
‣ Icons
‣ plus
‣ hamburger
‣ arrows
Slide 357
Slide 357 text
Trigger Patterns
Slide 358
Slide 358 text
Trigger Patterns
‣ Always Available
‣ Anchor to Footer
‣ Select Element
‣ Make Room
‣ Cover Up
‣ Off Canvas
‣ Priority +
‣ Full Screen Takeover
Slide 359
Slide 359 text
TRIGGER PATTERNS: ALWAYS AVAILABLE
Slide 360
Slide 360 text
TRIGGER PATTERNS: ANCHOR TO FOOTER
Slide 361
Slide 361 text
TRIGGER PATTERNS: SELECT ELEMENT
Slide 362
Slide 362 text
iOS 7
TRIGGER PATTERNS: SELECT ELEMENT
Slide 363
Slide 363 text
TRIGGER PATTERNS: SELECT ELEMENT
Chrome on OS X
Slide 364
Slide 364 text
TRIGGER PATTERNS: MAKE ROOM
Slide 365
Slide 365 text
TRIGGER PATTERNS: COVER UP
Slide 366
Slide 366 text
TRIGGER PATTERNS: OFF CANVAS
Slide 367
Slide 367 text
TRIGGER PATTERNS: PRIORITY +
Slide 368
Slide 368 text
TRIGGER PATTERNS: FULL SCREEN TAKEOVER
Slide 369
Slide 369 text
Trigger Patterns
‣ Always Available
‣ Anchor to Footer
‣ Select Element
‣ Make Room
‣ Cover Up
‣ Off Canvas
‣ Priority +
‣ Full Screen Takeover
Slide 370
Slide 370 text
Interaction Indicators
Slide 371
Slide 371 text
INTERACTION INDICATORS
Icons
Slide 372
Slide 372 text
Interaction Indicators
‣ Icons
‣ plus
‣ dash
‣ “x”
‣ various arrows
LESSONS LEARNED
Performance
‣ Optimize or cut out images
‣ Decrease the number of requests
‣ Gzip if you can
‣ Concat and minify CSS/JS
‣ Load CSS at the top
‣ Load JS at the bottom
‣ Follow @souders on Twitter
Slide 406
Slide 406 text
Barriers
Slide 407
Slide 407 text
LESSONS LEARNED
Barriers
‣ Organization barriers block
collaboration
‣ Must have buy in from upper
management
‣ Must have buy in from those doing
the work
‣ It’s not easy, we’re still
figuring it out
Slide 408
Slide 408 text
What’s Next
Slide 409
Slide 409 text
Fluency
SOLVE THE PROBLEM
Slide 410
Slide 410 text
Jakob Nielsen Says...
‣ Build a separate mobile site
‣ Cut features
‣ Cut content
http://www.nngroup.com/articles/mobile-site-vs-full-site/
Slide 411
Slide 411 text
Jakob Nielsen Says...
‣ Build a separate mobile site
‣ Cut features
‣ Cut content
http://www.nngroup.com/articles/mobile-site-vs-full-site/
PLEASE, NO.
Slide 412
Slide 412 text
The Responsive Dip
!
http://bit.ly/MasqBk
Slide 413
Slide 413 text
The Responsive Mindset
!
“The truly responsive design web
designer wasn’t born until after the
launch of the iPhone. We haven’t seen his
or her work yet.”
!
Andy Clarke
!
http://the-pastry-box-project.net/andy-clarke/2012-april-8/
Slide 414
Slide 414 text
!
There are many
problems left to solve.
!
We’ll solve them much faster if we
solve them together.