@hearsparkbox @brworkshop
@bencallahan @robertharr
@robtarr @ethanmuller
Saturday, April 27, 13
Slide 3
Slide 3 text
#convergese
#brworkshop
Saturday, April 27, 13
Slide 4
Slide 4 text
Please, turn off Dropbox sync.
Saturday, April 27, 13
Slide 5
Slide 5 text
And, stop streaming BSG.
Saturday, April 27, 13
Slide 6
Slide 6 text
Saturday, April 27, 13
Slide 7
Slide 7 text
AN INTRODUCTION TO RESPONSIVE WEB DESIGN
RWD 101
Saturday, April 27, 13
Slide 8
Slide 8 text
September 9, 2007
6:30am
Saturday, April 27, 13
Slide 9
Slide 9 text
52%
of laptop owners
also own a smartphone
http://bit.ly/zE1zgp
In the US...
Saturday, April 27, 13
Slide 10
Slide 10 text
31%
of smartphone owners
also own a tablet
http://bit.ly/zE1zgp
In the US...
Saturday, April 27, 13
Slide 11
Slide 11 text
23%
of laptop owners
also own a tablet
http://bit.ly/zE1zgp
In the US...
Saturday, April 27, 13
Slide 12
Slide 12 text
13%
own a laptop,
tablet & smartphone
http://bit.ly/zE1zgp
In the US...
Saturday, April 27, 13
Slide 13
Slide 13 text
The web is not fixed width
Saturday, April 27, 13
Slide 14
Slide 14 text
The penetration of
desktop & laptop
ownership is the same
today as it was in 2007.
http://bit.ly/zE1zgp
In the US...
Saturday, April 27, 13
Slide 15
Slide 15 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
Saturday, April 27, 13
Slide 16
Slide 16 text
Not that far away
0
500
1000
1500
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
Mobile Users Desktop Users
http://bit.ly/L5cqiO
Saturday, April 27, 13
Slide 17
Slide 17 text
Flexibility is the new norm
Saturday, April 27, 13
Slide 18
Slide 18 text
People are trying to
browse your sites on these
devices, today
Saturday, April 27, 13
Slide 19
Slide 19 text
Responsive web design
Saturday, April 27, 13
Slide 20
Slide 20 text
Ethan Marcotte
Article on ALA
(http://bit.ly/Wi0xvw)
Book via ABA
(http://bit.ly/f6TPB7)
Saturday, April 27, 13
Slide 21
Slide 21 text
RWD 101
‣ Three Core Techniques
- A Fluid Foundation
- Flexible Content
- Media Queries
Saturday, April 27, 13
Slide 22
Slide 22 text
A Fluid Foundation
Honor the proportions of
the design by creating
percentage-based layout
instead of fixed-width,
pixel-based layout.
Saturday, April 27, 13
Slide 23
Slide 23 text
A Fluid Foundation
http://bostonglobe.com
Saturday, April 27, 13
Slide 24
Slide 24 text
Flexible Content
Once we have a layout
which is based on
proportions, the content
must also respond.
Saturday, April 27, 13
Slide 25
Slide 25 text
Flexible Content
http://microsoft.com
Saturday, April 27, 13
Slide 26
Slide 26 text
Media Queries
When our content and our
design are no longer
working in harmony, we
need to make a larger shift
in layout.
Saturday, April 27, 13
Slide 27
Slide 27 text
Media Queries
http://skinnyties.com
Saturday, April 27, 13
Slide 28
Slide 28 text
RWD 101
‣ Three Core Techniques
- A Fluid Foundation
- Flexible Content
- Media Queries
Saturday, April 27, 13
Slide 29
Slide 29 text
WEB DESIGN PROCESS IN A RESPONSIVE WORLD
RWD WORKFLOW
Saturday, April 27, 13
Slide 30
Slide 30 text
A SHIFT IN
MINDSET
Saturday, April 27, 13
Slide 31
Slide 31 text
Where we’ve been
Saturday, April 27, 13
Slide 32
Slide 32 text
A SHIFT IN MINDSET
Traditional Linear Workflow
DESIGN FRONT-END BACK-END LAUNCH!
Saturday, April 27, 13
Slide 33
Slide 33 text
A SHIFT IN MINDSET
Traditional Linear Workflow
DESIGN FRONT-END BACK-END LAUNCH!
TH
IN
K
A
B
O
U
T
U
SER
S
Saturday, April 27, 13
Slide 34
Slide 34 text
A SHIFT IN MINDSET
Traditional Linear Workflow
DESIGN FRONT-END BACK-END LAUNCH!
TH
IN
K
A
B
O
U
T
U
SER
S
TH
R
O
W
IN
C
O
N
TEN
T
Saturday, April 27, 13
Slide 35
Slide 35 text
A SHIFT IN MINDSET
Slightly Better Linear Workflow
CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
Saturday, April 27, 13
Slide 36
Slide 36 text
What happens when you
throw RWD into this
process?
Saturday, April 27, 13
Slide 37
Slide 37 text
A SHIFT IN MINDSET
Linear Workflow
CONTENT UX DESIGN FRONT-END BACK-END LAUNCH
Now with
RWD!
Saturday, April 27, 13
Slide 38
Slide 38 text
Now with
RWD!
A SHIFT IN MINDSET
Linear Workflow
CONTENT UX DESIGN FRONT-END BACK-END LAUNCH
Me too!
Ditto!
Saturday, April 27, 13
Slide 39
Slide 39 text
This doesn’t work.
Saturday, April 27, 13
Slide 40
Slide 40 text
(example: seesparkbox.com)
Saturday, April 27, 13
Slide 41
Slide 41 text
Jakob Nielsen Says...
‣ Build a separate mobile site
‣ Cut features
‣ Cut content
http://www.nngroup.com/articles/mobile-site-vs-full-site/
Saturday, April 27, 13
Slide 42
Slide 42 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.
Saturday, April 27, 13
Slide 43
Slide 43 text
We need to invite others
into the process
Saturday, April 27, 13
Slide 44
Slide 44 text
A SHIFT IN MINDSET
A Responsive Workflow
Saturday, April 27, 13
Slide 45
Slide 45 text
Disciplines
BACK-END
FRONT-END
DESIGN
C
O
NTENT UX
Saturday, April 27, 13
Slide 46
Slide 46 text
Collaborative Timeline
Saturday, April 27, 13
Slide 47
Slide 47 text
Cycle
BACK-END
FRONT-END
DESIGN
C
O
NTENT UX
Saturday, April 27, 13
Slide 48
Slide 48 text
Differing Cycle
BACK-END
FRONT-END
DESIGN
C
O
NTENT UX
Saturday, April 27, 13
Slide 49
Slide 49 text
Life Cycle
BACK-END
FRONT-END
DESIGN
C
O
NTENT UX
Saturday, April 27, 13
Slide 50
Slide 50 text
Phased Release
BACK-END
FRONT-END
DESIGN
C
O
NTENT UX
DELIVERABLE
DELIVERABLE
DELIVERABLE
DELIVERABLE
DELIVERABLE
DELIVERABLE
RELEASE
RELEASE
Saturday, April 27, 13
Slide 51
Slide 51 text
A SHIFT IN MINDSET
A Responsive Workflow
‣ Pros
- Natural Decisions
- Encourages Collaboration
- Encourages Iteration
- Better Results
Saturday, April 27, 13
Slide 52
Slide 52 text
A SHIFT IN MINDSET
A Responsive Workflow
‣ Cons
- Requires Change
- May Conflict with Organizational
Structure
- Dependent on Team Make-up
Saturday, April 27, 13
Slide 53
Slide 53 text
What happens when you
invite others into the
process?
Saturday, April 27, 13
Slide 54
Slide 54 text
The quality as a whole
improves
Saturday, April 27, 13
Slide 55
Slide 55 text
(example: m.people.com)
Saturday, April 27, 13
Slide 56
Slide 56 text
So, how do we actually
do this?
Saturday, April 27, 13
Slide 57
Slide 57 text
A SHIFT IN
PROCESS
Saturday, April 27, 13
Slide 58
Slide 58 text
A SHIFT IN PROCESS
A Process Myth
Each client deliverable needs to
look more like a final, beautiful
end-product than the previous
one.
Saturday, April 27, 13
Slide 59
Slide 59 text
A SHIFT IN PROCESS
Which Results In
Pushing toward nearly-designed
wireframes quickly and completely
designed comps soon after.
(This sets up all sorts of
unrealistic client expectations.)
Saturday, April 27, 13
Slide 60
Slide 60 text
A SHIFT IN PROCESS
A Better Approach
Deliverables that best serve the
organization and prioritization of
content and function across
multiple resolutions.
(Not deliverables made just to
impress clients.)
Saturday, April 27, 13
Slide 61
Slide 61 text
A SHIFT IN PROCESS
Our Deliverables
‣ Research Deliverables
‣ Content Deliverables
‣ Priority Deliverables
‣ Style Deliverables
‣ Functional Deliverables
Saturday, April 27, 13
Slide 62
Slide 62 text
A SHIFT IN PROCESS
Let’s Focus On...
‣ Research Deliverables
‣ Content Deliverables
‣ Priority Deliverables
‣ Style Deliverables
‣ Functional Deliverables
Saturday, April 27, 13
Slide 63
Slide 63 text
A SHIFT IN PROCESS
Priority Deliverables
‣ Content Priority Prototypes
- Takes the place of a traditional
wireframe.
- As much real content as you can.
- Linear in nature, priority implied.
- Possibly created in HTML, viewed
in a browser.
- Generated by content/UX people.
Saturday, April 27, 13
Slide 64
Slide 64 text
A SHIFT IN PROCESS
Priority Deliverables
‣ Content Priority Examples
- Non HTML examples
• Smashing Article: Design Process In The
Responsive Age
• New Sparkbox site early efforts
- HTML example
• building.seesparkbox.com
Saturday, April 27, 13
Slide 65
Slide 65 text
A SHIFT IN PROCESS
Style Deliverables
‣ Style Prototype
- Like Style Tiles, but in the browser
(styletil.es).
- Very fast to build.
- Accurate web typography.
- Easy to show web interaction.
- Client reviews in their browser of
preference.
Saturday, April 27, 13
Slide 66
Slide 66 text
A SHIFT IN PROCESS
Style Deliverables
‣ Style Prototype Examples
- building.seesparkbox.com
• new Sparkbox web style prototype
- dressresponsively.com
• dress responsively style prototype
Saturday, April 27, 13
Slide 67
Slide 67 text
A SHIFT IN PROCESS
Use What The Project Needs
‣ Research Deliverables
‣ Content Deliverables
‣ Priority Deliverables
‣ Style Deliverables
‣ Functional Deliverables
Saturday, April 27, 13
Slide 68
Slide 68 text
CODE AND PROJECT STRUCTURE
SERVING
RWD STYLES
Saturday, April 27, 13
Slide 69
Slide 69 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Saturday, April 27, 13
Slide 70
Slide 70 text
Before any of this stuff will
work, you need to do this:
Saturday, April 27, 13
Slide 71
Slide 71 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; }
Saturday, April 27, 13
Slide 72
Slide 72 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Saturday, April 27, 13
Slide 73
Slide 73 text
Single CSS File
HTML
CSS
Start with styles applied
to all
Styles scoped to a
media query
Styles scoped to another
media query
Saturday, April 27, 13
Slide 74
Slide 74 text
/* styles.css */
aside { color: #333; width: 100%; }
Single CSS File
Saturday, April 27, 13
Slide 75
Slide 75 text
/* styles.css */
aside { color: #333; width: 100%; }
/* if the viewport width is 40em or greater */
Single CSS File
Saturday, April 27, 13
Slide 76
Slide 76 text
PAUSE:
MEDIA QUERIES
Saturday, April 27, 13
Slide 77
Slide 77 text
Slide 78
Slide 78 text
Slide 79
Slide 79 text
Media Types
all
braille, embossed, speech
handheld, projection, screen, tv
print
tty
http://www.w3.org/TR/CSS21/media.html#media-types
Saturday, April 27, 13
Slide 80
Slide 80 text
Slide 81
Slide 81 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
Saturday, April 27, 13
Slide 82
Slide 82 text
Single CSS File
HTML
CSS
Start with styles applied
to all
Styles scoped to a
media query
Styles scoped to another
media query
Saturday, April 27, 13
Slide 83
Slide 83 text
Small Viewport Width First
HTML
CSS
Smallest styles
Wider styles (mq)
Even wider styles (mq)
Super wide styles (mq)
Saturday, April 27, 13
Slide 84
Slide 84 text
Large Viewport Width First
HTML
CSS
Widest styles
Wide styles (mq)
Narrow styles (mq)
Very narrow styles (mq)
Saturday, April 27, 13
Slide 85
Slide 85 text
/* styles.css */
aside { color: #333; width: 100%; }
/* if the viewport width is 40em or greater */
Single CSS File
Saturday, April 27, 13
Slide 86
Slide 86 text
/* styles.css */
aside { color: #333; width: 100%; }
/* if the viewport width is 40em or greater */
@media (min-width: 40em) {
aside { width: 50%; }
}
Single CSS File
Saturday, April 27, 13
Slide 87
Slide 87 text
/* styles.css */
aside { color: #333; width: 100%; }
/* if the viewport width is 40em or greater */
@media (min-width: 40em) {
aside { width: 50%; }
}
Single CSS File
Saturday, April 27, 13
Slide 88
Slide 88 text
/* 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%; }
}
Single CSS File
Saturday, April 27, 13
Slide 89
Slide 89 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%; }
}
Small Viewport
Width First
Saturday, April 27, 13
Slide 90
Slide 90 text
/* 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 (min-width: 40em) {
aside { width: 100%; }
}
Single CSS File
Large Viewport
Width First
Saturday, April 27, 13
Slide 91
Slide 91 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
Saturday, April 27, 13
Slide 92
Slide 92 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Saturday, April 27, 13
Slide 93
Slide 93 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/
Saturday, April 27, 13
Slide 94
Slide 94 text
Multiple CSS Files
index.html
Saturday, April 27, 13
Slide 95
Slide 95 text
Multiple CSS Files
index.html
Saturday, April 27, 13
Slide 96
Slide 96 text
Multiple CSS Files
index.html
Saturday, April 27, 13
Slide 97
Slide 97 text
Multiple CSS Files
index.html
Saturday, April 27, 13
Slide 98
Slide 98 text
Multiple CSS Files
index.html
Saturday, April 27, 13
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
Saturday, April 27, 13
Slide 102
Slide 102 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Saturday, April 27, 13
Slide 103
Slide 103 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/
Saturday, April 27, 13
Slide 104
Slide 104 text
Breakpoint Based Partials
index.html
Saturday, April 27, 13
The Big Three:
LESS, SASS, and Stylus
Saturday, April 27, 13
Slide 115
Slide 115 text
Similarities
‣ All accept CSS syntax, plus their
own specific syntax.
‣ All improve CSS by adding
variables, importing, mixins, and
nesting
‣ All three seek to make CSS
authoring a better and more
efficient process
Saturday, April 27, 13
Slide 116
Slide 116 text
LESS
‣ Runs on Node.js
‣ Very similar syntax to SASS
‣ http://lesscss.org/
Saturday, April 27, 13
Slide 117
Slide 117 text
Variables are
specified with @
symbol
/* .less */
@top-variable: 20px;
! #header-shadow {
! position: absolute;
! ! top: @top-variable;
! }
LESS syntax
Saturday, April 27, 13
Slide 118
Slide 118 text
Stylus
‣ Runs on Node.js
‣ Has a flexible syntax
- You can omit semi-colons, colons,
and braces
‣ http://learnboost.github.com/
stylus/
Saturday, April 27, 13
Slide 119
Slide 119 text
/* .styl */
top-variable = 20px
!
#main-header
! position absolute
! ! top top-variable
#footer {
! background: blue
! ! border 1px solid #00f;
}
Notice the terse,
forgiving syntax.
Stylus Syntax
Saturday, April 27, 13
Slide 120
Slide 120 text
SASS
‣ Runs on Ruby
‣ Has two syntax flavors
- .scss & .sass
‣ http://sass-lang.com/
Saturday, April 27, 13
Mixins
‣ SASS and Stylus both support
basic programming like loops, if/
else, etc. in mixins.
‣ LESS only offers “guarded
mixins.”
Saturday, April 27, 13
Slide 129
Slide 129 text
Sparkbox REM Mixin
Saturday, April 27, 13
Slide 130
Slide 130 text
/*.scss*/
@include rem(padding, 0.5, 1, 4, 3);
@include rem(font-size, 1.2, large);
Sparkbox REM Mixin
Saturday, April 27, 13
Slide 131
Slide 131 text
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.
Saturday, April 27, 13
Slide 132
Slide 132 text
Compass & Bourbon
Saturday, April 27, 13
Slide 133
Slide 133 text
Importing
‣ Allows you to break up your
styles across files.
- variables, mixins, reset, all
separated.
‣ Better than a standard css import
Saturday, April 27, 13
Slide 134
Slide 134 text
this file will
compile to
base.css
/* base.scss */
@import "compass";
@import "variables";
@import "reset";
@import "mixins";
@import "header";
@import "hero";
@import "whatever";
Importing
Saturday, April 27, 13
Slide 135
Slide 135 text
Extends
‣ Extends allow you to reuse styles
between various selectors.
‣ DRY Principle applied to CSS
Saturday, April 27, 13
Google Chrome Developer
Tools & SASS
Saturday, April 27, 13
Slide 139
Slide 139 text
Source Maps
‣ Using pre-processors does
present some new challenges.
‣ Line-numbers are no longer
representative of where the code
is.
Saturday, April 27, 13
Slide 140
Slide 140 text
Source Maps
‣ Source maps let Chrome know the
source of the generated CSS.
Saturday, April 27, 13
Slide 141
Slide 141 text
Setup Chrome for SASS
Source Maps Support
‣ head over to chrome://flags
- Enable Developer Tools
Experiments
Saturday, April 27, 13
Slide 142
Slide 142 text
Setup Chrome for SASS
Source Maps Support
‣ Enable Support for SASS in the
Dev Tools options
Saturday, April 27, 13
Slide 143
Slide 143 text
Setup Chrome for SASS
Source Maps Support
‣ Enable support for Source maps
Saturday, April 27, 13
Slide 144
Slide 144 text
The last step is to
turn on debug
info in our CSS
/* config.rb */
sass_options = { :debug_info => true }
or
/* command line */
sass --watch -g scss/:css/
Setup Chrome for SASS
Source Maps Support
Saturday, April 27, 13
Slide 145
Slide 145 text
CSS PREPROCESSORS
Resources
Codekit
http://incident57.com/codekit/
Saturday, April 27, 13
Slide 146
Slide 146 text
CSS PREPROCESSORS
Resources
Scout
http://mhs.github.com/scout-app/
Saturday, April 27, 13
Slide 147
Slide 147 text
CSS PREPROCESSORS
Resources
Compass
http://compass-style.org/
Saturday, April 27, 13
Slide 148
Slide 148 text
CSS PREPROCESSORS
Resources
SASS Primer
http://thesassway.com/beginner/getting-
started-with-sass-and-compass
Saturday, April 27, 13
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
Saturday, April 27, 13
Slide 152
Slide 152 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Saturday, April 27, 13
Slide 153
Slide 153 text
HTML
If < IE9 and not IE Mobile
If >= IE9 or IE Mobile
Module Based Partials
no-mq.css
All styles with no MQs
mq.css
All styles with MQs
http://seesparkbox.com/foundry/there_is_no_breakpoint
Saturday, April 27, 13
Slide 154
Slide 154 text
Module Based Partials
index.html
Saturday, April 27, 13
Slide 155
Slide 155 text
Module Based Partials
index.html
Saturday, April 27, 13
Slide 156
Slide 156 text
Module Based Partials
index.html
Saturday, April 27, 13
Slide 157
Slide 157 text
Module Based Partials
index.html
Saturday, April 27, 13
Slide 158
Slide 158 text
Module Based Partials
index.html
Saturday, April 27, 13
Slide 159
Slide 159 text
Module Based Partials
index.html
Saturday, April 27, 13
https://github.com/sparkbox/SB-Media
Saturday, April 27, 13
Slide 176
Slide 176 text
https://github.com/Team-Sass/
breakpoint
Saturday, April 27, 13
Slide 177
Slide 177 text
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
‣ Single request for all
‣ Requires Preprocessor
Saturday, April 27, 13
Slide 178
Slide 178 text
We recommend
module based partials
Saturday, April 27, 13
Slide 179
Slide 179 text
(but it depends on your
specific project)
Saturday, April 27, 13
Slide 180
Slide 180 text
THERE IS NO
BREAKPOINT
Saturday, April 27, 13
Slide 181
Slide 181 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
...
}
Saturday, April 27, 13
Slide 182
Slide 182 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
...
}
Saturday, April 27, 13
Slide 183
Slide 183 text
Fractal
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
...
}
Saturday, April 27, 13
Slide 184
Slide 184 text
There is no Breakpoint
Media Query
Bookmarklet
(by @robtarr)
Saturday, April 27, 13
Slide 185
Slide 185 text
There is no Breakpoint
Saturday, April 27, 13
Slide 186
Slide 186 text
Relax.
Saturday, April 27, 13
Slide 187
Slide 187 text
Think more modularly.
Try something like
SMACSS (from @snookca).
Saturday, April 27, 13
Slide 188
Slide 188 text
Element Queries
http://www.xanthir.com/b4PR0
Saturday, April 27, 13
Slide 189
Slide 189 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)
Saturday, April 27, 13
Slide 190
Slide 190 text
MAKING EVERYTHING FLUID
CREATING
FLEXIBILITY
Saturday, April 27, 13
Slide 191
Slide 191 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Saturday, April 27, 13
Slide 192
Slide 192 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Saturday, April 27, 13
Slide 193
Slide 193 text
It starts with the grid
Saturday, April 27, 13
Slide 194
Slide 194 text
body {
width: 1000px;
}
div.main {
width: 700px;
}
aside {
width: 280px;
}
It starts with the grid
body {
width: 100%;
}
div.main {
width: 70%;
}
aside {
width: 28%;
}
Saturday, April 27, 13
Slide 195
Slide 195 text
body {
width: 1000px;
}
div.main {
width: 700px;
}
It starts with the grid
body {
width: 100%;
}
div.main {
width: 70%;
}
target / context = %
700 / 1000 = .7
.7 = 70%
Saturday, April 27, 13
Slide 196
Slide 196 text
body {
width: 1000px;
}
aside {
width: 280px;
}
It starts with the grid
body {
width: 100%;
}
aside {
width: 28%;
}
target / context = %
280 / 1000 = .28
.28 = 28%
Saturday, April 27, 13
Slide 197
Slide 197 text
Responsive grid systems
Saturday, April 27, 13
Slide 198
Slide 198 text
CREATING FLEXIBILITY
RWD Grid Systems
‣ Foundation
‣ Bootstrap
‣ Skeleton
‣ Responsive.gs
‣ Columnal
‣ ...this list goes on, and on, and on
Saturday, April 27, 13
Slide 199
Slide 199 text
CREATING FLEXIBILITY
Semantic RWD Grid Systems
‣ Semantic.gs
‣ Susy
‣ Zen Grids
Saturday, April 27, 13
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Saturday, April 27, 13
Slide 207
Slide 207 text
CREATING FLEXIBILITY
Responsive Layout Patterns
‣ Source order stacking
‣ Content choreography
‣ Off canvas
Saturday, April 27, 13
Slide 208
Slide 208 text
CREATING FLEXIBILITY
Responsive Layout Patterns
‣ Source order stacking
‣ Content choreography
‣ Off canvas
Saturday, April 27, 13
Slide 209
Slide 209 text
CREATING FLEXIBILITY
Responsive Layout Patterns
‣ Source order stacking
‣ Content choreography
‣ Off canvas
Saturday, April 27, 13
Slide 210
Slide 210 text
Saturday, April 27, 13
Slide 211
Slide 211 text
Saturday, April 27, 13
Slide 212
Slide 212 text
CREATING FLEXIBILITY
Responsive Layout Patterns
‣ Source order stacking
‣ Content choreography
‣ Off canvas
Saturday, April 27, 13
Slide 213
Slide 213 text
Saturday, April 27, 13
Slide 214
Slide 214 text
Saturday, April 27, 13
Slide 215
Slide 215 text
Easiest to show
a few examples:
http://jasonweaver.name/lab/offcanvas/
http://mashable.com/
Saturday, April 27, 13
Slide 216
Slide 216 text
There are many, many
combinations of these
basic ideas
http://bit.ly/U4N5qH
(http://bradfrost.github.com/this-is-responsive/patterns.html)
Saturday, April 27, 13
Slide 217
Slide 217 text
There are some really cool
new layout modules
coming...
Saturday, April 27, 13
Slide 218
Slide 218 text
http://www.netmagazine.com/tutorials/
master-new-css-layout-properties
Saturday, April 27, 13
Slide 219
Slide 219 text
http://www.fivesimplesteps.com/
products/css3-layout-modules
Saturday, April 27, 13
Slide 220
Slide 220 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Saturday, April 27, 13
Slide 221
Slide 221 text
Type flexes by default
Saturday, April 27, 13
Slide 222
Slide 222 text
We need to
consider readability
Saturday, April 27, 13
Slide 223
Slide 223 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
Saturday, April 27, 13
Slide 224
Slide 224 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
Saturday, April 27, 13
Slide 225
Slide 225 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
Saturday, April 27, 13
Slide 226
Slide 226 text
@snookca
http://snook.ca/technical/colour_contrast/
colour.html
@leaverou
http://leaverou.github.com/contrast-ratio/
Saturday, April 27, 13
Slide 227
Slide 227 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
Saturday, April 27, 13
Slide 228
Slide 228 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Saturday, April 27, 13
http://bit.ly/12TbTX4
(http://codepen.io/bencallahan/pen/CtLDb)
Saturday, April 27, 13
Slide 231
Slide 231 text
The image problem(s)
Saturday, April 27, 13
Slide 232
Slide 232 text
CREATING FLEXIBILITY
The image problem(s)
‣ Content
‣ Bandwidth
‣ Pixel density
Saturday, April 27, 13
Slide 233
Slide 233 text
CREATING FLEXIBILITY
Image: Content
Saturday, April 27, 13
Slide 234
Slide 234 text
CREATING FLEXIBILITY
Image: Content
Saturday, April 27, 13
Slide 235
Slide 235 text
CREATING FLEXIBILITY
Image: Content
Saturday, April 27, 13
Slide 236
Slide 236 text
CREATING FLEXIBILITY
Image: Content
Saturday, April 27, 13
Slide 237
Slide 237 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/
Saturday, April 27, 13
Slide 238
Slide 238 text
CREATING FLEXIBILITY
Image: Bandwidth
Responsive & Responsible
via @scotjehl
https://speakerdeck.com/scottjehl/responsive-responsible
http://www.lukew.com/ff/entry.asp?1565
Saturday, April 27, 13
Slide 239
Slide 239 text
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
Saturday, April 27, 13
Slide 240
Slide 240 text
CREATING FLEXIBILITY
The image problem(s)
‣ Content
‣ Bandwidth
‣ Pixel density
Saturday, April 27, 13
Slide 241
Slide 241 text
CREATING FLEXIBILITY
The image solution(s)
‣ SVG
‣ Icon fonts
‣ Pixel-density media queries
‣ Compressive
‣ Picturefill
‣ User preference
Saturday, April 27, 13
Slide 242
Slide 242 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.
Saturday, April 27, 13
Slide 243
Slide 243 text
@dbushell wrote a great primer for SVG
Saturday, April 27, 13
Slide 244
Slide 244 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.
Saturday, April 27, 13
Slide 245
Slide 245 text
Search
Icon Font Markup
/*.scss*/
[data-icon]:before {
content: attr(data-icon);
font-family: 'icon-font-family';
speak: none;
}
Saturday, April 27, 13
Slide 246
Slide 246 text
“Compressive” Images
‣ http://filamentgroup.com/lab/
rwd_img_compression/
‣ Increases the image dimensions
and adds maximum compression.
Saturday, April 27, 13
Slide 247
Slide 247 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.
Saturday, April 27, 13
Slide 248
Slide 248 text
/*.scss*/
@media only all and
(-webkit-min-device-pixel-ratio: 1.5) {
.logo {
background-image: url(/i/logo-2x.png);
background-size: 100%;
}
}
Pixel Density MQs
Saturday, April 27, 13
Slide 249
Slide 249 text
Picturefill
‣ https://github.com/scottjehl/
picturefill
‣ Polyfill for the new
element
Saturday, April 27, 13
Slide 250
Slide 250 text
Picturefill
Saturday, April 27, 13
Slide 251
Slide 251 text
User Preference
‣ Allow the user to choose what
experience they would like to
have on their device: “HD” or
“SD”.
Saturday, April 27, 13
Slide 252
Slide 252 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Saturday, April 27, 13
Slide 253
Slide 253 text
CREATING FLEXIBILITY
Tables
http://codepen.io/bencallahan/pen/xvmCe
Saturday, April 27, 13
Slide 254
Slide 254 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Saturday, April 27, 13
Slide 255
Slide 255 text
CREATING FLEXIBILITY
Video
Saturday, April 27, 13
Slide 256
Slide 256 text
CREATING FLEXIBILITY
Video
Saturday, April 27, 13
Slide 257
Slide 257 text
Creating
flexibility requires
experimentation
Saturday, April 27, 13
Slide 258
Slide 258 text
Creating
flexibility requires
Saturday, April 27, 13
Slide 259
Slide 259 text
UNIQUE CONSIDERATIONS AND CHALLENGES
NAVIGATION
AND RWD
Saturday, April 27, 13
Slide 260
Slide 260 text
NAVIGATION AND RWD
Major Issues
‣ Site Depth and Breadth
‣ Screen Real Estate
‣ Cross-width Consistency
‣ Interaction Patterns
Saturday, April 27, 13
Slide 261
Slide 261 text
NAVIGATION AND RWD
Major Issues
‣ Site Depth and Breadth
‣ Screen Real Estate
‣ Cross-width Consistency
‣ Interaction Patterns
Saturday, April 27, 13
Slide 262
Slide 262 text
Small sites often allow
simpler solutions.
Saturday, April 27, 13
Slide 263
Slide 263 text
Simple Nav Examples
‣ Simple Row
‣ Jump to Content
‣ Jump to Footer
‣ Top Stacked Off Canvas
Saturday, April 27, 13
Slide 264
Slide 264 text
Simple Nav Examples
‣ Simple Row
‣ Jump to Content
‣ Jump to Footer
‣ Top Stacked
Off Canvas
http://seesparkbox.com
Saturday, April 27, 13
Slide 265
Slide 265 text
Simple Nav Examples
‣ Simple Row
‣ Jump to Content
‣ Jump to Footer
‣ Top Stacked
Off Canvas
http://forgeideas.com
Saturday, April 27, 13
Slide 266
Slide 266 text
Simple Nav Examples
‣ Simple Row
‣ Jump to Content
‣ Jump to Footer
‣ Top Stacked
Off Canvas
http://contentsmagazine.com
Saturday, April 27, 13
Slide 267
Slide 267 text
Simple Nav Examples
‣ Simple Row
‣ Jump to Content
‣ Jump to Footer
‣ Top Stacked
Off Canvas
http://2012.dconstruct.org/
Saturday, April 27, 13
Slide 268
Slide 268 text
Most sites have to
work a bit harder to
accommodate their
content.
Saturday, April 27, 13
Slide 269
Slide 269 text
Complex Nav Causes
‣ Large volume of content
- Legacy content
- Dynamic content
‣ Broad architecture
- Lots of content types/categories
‣ Deep architecture
- Lots of children and nesting
Saturday, April 27, 13
Slide 270
Slide 270 text
Complex Nav Causes
‣ Large volume of content
- Legacy content
- Dynamic content
‣ Broad architecture
- Lots of content types/categories
‣ Deep architecture
- Lots of children and nesting
DON’T GIVE UP.
Saturday, April 27, 13
Slide 271
Slide 271 text
Before accommodating all
the things, it’s not a cop-
out to question the things.
Saturday, April 27, 13
Slide 272
Slide 272 text
Attack the right nav.
Saturday, April 27, 13
Slide 273
Slide 273 text
Complex Nav Causes
‣ Poor Information Architecture
- Unnecessarily broad or deep due
to inefficiency or poor planning
‣ Poor Content Strategy
- Unnecessarily large due to a lack of
governance, ownership, or
intentionality
POSSIBLE ROOT
Saturday, April 27, 13
Slide 274
Slide 274 text
NAVIGATION AND RWD
Major Issues
‣ Site Depth and Breadth
‣ Screen Real Estate
‣ Cross-width Consistency
‣ Interaction Patterns
Saturday, April 27, 13
Slide 275
Slide 275 text
Small screens aren’t just
horizontally small.
Saturday, April 27, 13
Slide 276
Slide 276 text
Blackberry Bold:
480 px high
Saturday, April 27, 13
Don’t make small screens
smaller by eating up
vertical space with nav.
Saturday, April 27, 13
Slide 279
Slide 279 text
http://www.tuj.ac.jp/
Saturday, April 27, 13
Slide 280
Slide 280 text
http://
seesparkbox.com/
foundry
Saturday, April 27, 13
Slide 281
Slide 281 text
Take ALL the navigation
into account.
Saturday, April 27, 13
Slide 282
Slide 282 text
http://skinnyties.com/
color/blue/
Saturday, April 27, 13
Slide 283
Slide 283 text
NAVIGATION AND RWD
Major Issues
‣ Site Depth and Breadth
‣ Screen Real Estate
‣ Cross-width Consistency
‣ Interaction Patterns
Saturday, April 27, 13
Slide 284
Slide 284 text
“Users don’t resize their
browser. That’s a
developer behavior.”
Saturday, April 27, 13
Slide 285
Slide 285 text
Our users are viewing our
sites at multiple
resolutions.
Saturday, April 27, 13
Slide 286
Slide 286 text
Familiarity breeds
usability.
Saturday, April 27, 13
Slide 287
Slide 287 text
Are our off-canvas and
other RWD-inspired
patterns doing more harm
than good?
Saturday, April 27, 13
Slide 288
Slide 288 text
Pros & Cons
from
http://
thenextweb.com/
Saturday, April 27, 13
Slide 289
Slide 289 text
Do we need to change the
user’s pattern at all?
Saturday, April 27, 13
Slide 290
Slide 290 text
http://
www.polygon.com/
Saturday, April 27, 13
Slide 291
Slide 291 text
NAVIGATION AND RWD
Major Issues
‣ Site Depth and Breadth
‣ Screen Real Estate
‣ Cross-width Consistency
‣ Interaction Patterns
Saturday, April 27, 13
Slide 292
Slide 292 text
There is no right answer.
Saturday, April 27, 13
Slide 293
Slide 293 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ More...
http://bradfrost.github.com/this-is-responsive/patterns.html
Saturday, April 27, 13
Slide 294
Slide 294 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ More...
Saturday, April 27, 13
Slide 295
Slide 295 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ More...
Saturday, April 27, 13
Slide 296
Slide 296 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ More...
Saturday, April 27, 13
Slide 297
Slide 297 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ More...
Saturday, April 27, 13
Slide 298
Slide 298 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ More...
Saturday, April 27, 13
Slide 299
Slide 299 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ More...
Saturday, April 27, 13
Slide 300
Slide 300 text
Be open to combining
patterns.
Saturday, April 27, 13
Slide 301
Slide 301 text
Only try completely
unique/novel patterns if
you plan to fully test them.
Saturday, April 27, 13
Slide 302
Slide 302 text
JAVASCRIPT ALL THE THINGS
WORKING EXAMPLE
Saturday, April 27, 13
Slide 303
Slide 303 text
@BENCALLAHAN
Retrofitting
RESPONSIVE RETROFITTING
This section was added due to demand on the day of the
workshop. Sorry for the variation in presentation style!
Saturday, April 27, 13
Slide 304
Slide 304 text
@BENCALLAHAN
What is a Retrofit?
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 305
Slide 305 text
@BENCALLAHAN
What is a Retrofit?
Finding the fastest and lowest-risk approach
to creating a better experience on an existing
site for users of any size screen.
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 306
Slide 306 text
@BENCALLAHAN
What is a Retrofit?
1. How to do it.
2. Managing your client.
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 307
Slide 307 text
@BENCALLAHAN
@klayon
...performance is important, but access is
more important. Mobile later is better than
mobile never.
From “Responsive images for mobile: don’t sweat it” (http://tiny.cc/vr24gw)
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 308
Slide 308 text
@BENCALLAHAN
Retrofitting Techniques
http://github.com/bencallahan/rwd-retrofitting
If you like, you can clone this repository:
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 309
Slide 309 text
@BENCALLAHAN
Retrofitting Techniques: From Fixed to Fluid
(demo of Twitter.com)
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 310
Slide 310 text
@BENCALLAHAN
Retrofitting Techniques: From Fixed to Fluid
➡ Demo of Twitter.com
http://www.alistapart.com/articles/fluidgrids/
target
/
context
=
result
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 311
Slide 311 text
@BENCALLAHAN
Retrofitting Techniques: From Fixed to Fluid
➡ Demo of Twitter.com
http://www.alistapart.com/articles/fluidgrids/
target
/
context
=
result
302
/
837
=
36.08%
522
/
837
=
62.37%
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 312
Slide 312 text
@BENCALLAHAN
Retrofitting Techniques: From Fixed to Fluid
➡ Demo of Twitter.com
http://paulirish.com/2012/box-sizing-border-box-ftw/
*
{
-‐moz-‐box-‐sizing:
border-‐box;
-‐webkit-‐box-‐sizing:
border-‐box;
box-‐sizing:
border-‐box;
}
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 313
Slide 313 text
@BENCALLAHAN
Retrofitting Techniques: From Fixed to Fluid
➡ Demo of Twitter.com
/*
some
css
*/
@media
(max-‐width:
500px)
{
/*
css
for
500px
and
lower
*/
}
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 314
Slide 314 text
@BENCALLAHAN
Retrofitting Techniques: Inline Image Styles
(demo of /Images)
http://github.com/bencallahan/rwd-retrofitting
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 315
Slide 315 text
@BENCALLAHAN
Retrofitting Techniques: Inline Image Styles
➡ Support
‣ FireFox 5+ Win/Mac
‣ IE7+ (exception: IE8 & min-width)
‣ Chrome 14+ Win/Mac
‣ Safari 4+ Win, 5+ Mac
‣ Opera 10+ Win, 11+ Mac
‣ Mobile Safari (iOS 5)
‣ Android Browser 2.3+
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 316
Slide 316 text
@BENCALLAHAN
Retrofitting Techniques: Background Images
Tim Kadlec on timkadlec.com
“Media Query & Asset Downloading Results”
‣ display: none on parent element
‣ specify all background images inside media queries
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 317
Slide 317 text
@BENCALLAHAN
Retrofitting Techniques: Tables
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 318
Slide 318 text
@BENCALLAHAN
Retrofitting Techniques: Tables
(demo of /Tables)
http://github.com/bencallahan/rwd-retrofitting
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 319
Slide 319 text
@BENCALLAHAN
Retrofitting Techniques: Tables
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 320
Slide 320 text
@BENCALLAHAN
Retrofitting Techniques: Media Queries
➡ Large Resolution First
➡ Small Resolution First, Capped
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 321
Slide 321 text
@BENCALLAHAN
Retrofitting Techniques: Media Queries
➡ Large Resolution First
/*
FILE:
main.css
*/
/*
all
your
original
styles
*/
@media
(max-‐width:
53em)
{
/*
styles
for
53em
and
lower
*/
}
@media
(max-‐width:
37em)
{
/*
styles
for
37em
and
lower
*/
}
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 322
Slide 322 text
@BENCALLAHAN
Retrofitting Techniques: Media Queries
➡ Small Resolution First, Capped
‣ Serve the original CSS to large viewports
‣ Serve mobile-first CSS to small viewports
‣ No changes to original CSS
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 323
Slide 323 text
@BENCALLAHAN
Retrofitting Techniques: Media Queries
➡ Small Resolution First, Capped
yepnope({
test
:
Modernizr.mq(‘(min-‐width:
0px)’),
yep
:
‘base.css’,
nope
:
‘original.css’
});
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 324
Slide 324 text
@BENCALLAHAN
Retrofitting Techniques: Media Queries
➡ Small Resolution First, Capped
@media (max-width: 979px) {
@import "small";
}
@media (min-width: 661px) and (max-width: 979px) {
@import "medium";
}
@media (min-width: 980px) {
@import "original";
}
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 325
Slide 325 text
@BENCALLAHAN
Other Considerations
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 326
Slide 326 text
@BENCALLAHAN
Retrofitting Techniques: Other Considerations
➡ Touch Target Area
➡ Hover States
➡ Contrast
➡ Prioritization
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 327
Slide 327 text
@BENCALLAHAN
Retrofitting Techniques: Other Considerations
➡ Touch Target Area
‣ Apple recommends minimum 44px X 44px
‣ This is based on non-retina displays
‣ Using padding instead of margin
‣ Consider increasing font-size at smaller resolutions
http://www.lukew.com/ff/entry.asp?1085
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/
DesigningNativeApp/DesigningNativeApp.html#//apple_ref/doc/uid/TP40006556-CH4-SW1
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 328
Slide 328 text
@BENCALLAHAN
Retrofitting Techniques: Other Considerations
➡ Hover States
‣ Consider using modernizr
a {
/* standard styles */
}
.no-touch a:hover {
/* :hover styles */
}
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 329
Slide 329 text
@BENCALLAHAN
Retrofitting Techniques: Other Considerations
➡ Contrast
‣ Try your site outside in the sun
‣ Try your site in bed when it’s dark
‣ Take it with you
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 330
Slide 330 text
@BENCALLAHAN
Client Interaction
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 331
Slide 331 text
@BENCALLAHAN
Client Interaction: Great Need
Big Companies
+ No Mobile Presence
+ Triple Digit Growth
= Anxious Clients
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 332
Slide 332 text
@BENCALLAHAN
Client Interaction: Great Need
Less than Half the Cost
+ Less than Half the Time
+ Increased Conversions
= Desperate Clients
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 333
Slide 333 text
@BENCALLAHAN
Client Interaction: When It’s Right
➡ Evaluate the Project
‣ Solid UX at higher widths?
‣ Semantic markup?
‣ Immediate need?
‣ Real benefit for the user?
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 334
Slide 334 text
@BENCALLAHAN
Client Interaction: Proceed Carefully
Retrofitting is a step in
the right direction.
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 335
Slide 335 text
@BENCALLAHAN
Client Interaction: Proceed Carefully
Make sure you’re
capturing analytics.
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 336
Slide 336 text
@BENCALLAHAN
Constantly remind them
of the user.
Client Interaction: Proceed Carefully
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 337
Slide 337 text
@BENCALLAHAN
When you’re done and
they ask for more...
Client Interaction: Proceed Carefully
...push for even better
experiences!
RESPONSIVE RETROFITTING
Saturday, April 27, 13
Slide 338
Slide 338 text
LEARN FROM OUR MISTAKES
LESSONS
LEARNED
Saturday, April 27, 13
Slide 339
Slide 339 text
Pricing
Saturday, April 27, 13
Slide 340
Slide 340 text
LESSONS LEARNED
Pricing
‣ As much as 100% more, initially
‣ Likely to be 50% more, soon after
‣ Probably never less than 25% more
Saturday, April 27, 13
LESSONS LEARNED
Prioritization
Saturday, April 27, 13
Slide 344
Slide 344 text
LESSONS LEARNED
Prioritization
Saturday, April 27, 13
Slide 345
Slide 345 text
LESSONS LEARNED
Prioritization
Saturday, April 27, 13
Slide 346
Slide 346 text
LESSONS LEARNED
Prioritization
Saturday, April 27, 13
Slide 347
Slide 347 text
LESSONS LEARNED
Prioritization
Saturday, April 27, 13
Slide 348
Slide 348 text
Testing
Saturday, April 27, 13
Slide 349
Slide 349 text
LESSONS LEARNED
Testing
‣ You must test on real devices
‣ Do your development in a webkit
browser
‣ Bulid libraries of your patterns
Saturday, April 27, 13
Slide 350
Slide 350 text
Barriers
Saturday, April 27, 13
Slide 351
Slide 351 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
Saturday, April 27, 13
Slide 352
Slide 352 text
Performance
Saturday, April 27, 13
Slide 353
Slide 353 text
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
Saturday, April 27, 13
Slide 354
Slide 354 text
SOME THOUGHTS ON WHAT’S NEXT IN RWD
WHERE
WE’RE GOING
Saturday, April 27, 13
Slide 355
Slide 355 text
Saturday, April 27, 13
Slide 356
Slide 356 text
Saturday, April 27, 13
Slide 357
Slide 357 text
Unconscious
Incompetence
Saturday, April 27, 13
Slide 358
Slide 358 text
Unconscious
Incompetence
Conscious
Incompetence
Saturday, April 27, 13
Slide 359
Slide 359 text
Unconscious
Incompetence
Conscious
Incompetence
Conscious
Competence
Saturday, April 27, 13
The Responsive Dip
http://bit.ly/MasqBk
Saturday, April 27, 13
Slide 362
Slide 362 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/
Saturday, April 27, 13
Slide 363
Slide 363 text
There are many
problems left to solve.
We’ll solve them much faster if we
solve them together.
Saturday, April 27, 13
Slide 364
Slide 364 text
There are many
problems left to solve.
We’ll solve them much faster if we
Saturday, April 27, 13
Slide 365
Slide 365 text
THANKS!
@bencallahan
@robertharr
@robtarr
@ethanmuller
Saturday, April 27, 13