@hearsparkbox @brworkshop
@bencallahan @jeremyloyd @drewtclemens
Tuesday, May 28, 13
Slide 3
Slide 3 text
#artifactconf
#brworkshop
Tuesday, May 28, 13
Slide 4
Slide 4 text
internets
Tuesday, May 28, 13
Slide 5
Slide 5 text
Please, turn off Dropbox sync.
Tuesday, May 28, 13
Slide 6
Slide 6 text
And, stop streaming BSG.
Tuesday, May 28, 13
Slide 7
Slide 7 text
Tuesday, May 28, 13
Slide 8
Slide 8 text
About Us
Tuesday, May 28, 13
Slide 9
Slide 9 text
About You
Tuesday, May 28, 13
Slide 10
Slide 10 text
AN INTRODUCTION TO RESPONSIVE WEB DESIGN
RWD 101
Tuesday, May 28, 13
Slide 11
Slide 11 text
September 9, 2007
6:30am
Tuesday, May 28, 13
Slide 12
Slide 12 text
52%
of laptop owners
also own a smartphone
http://bit.ly/zE1zgp
In the US...
Tuesday, May 28, 13
Slide 13
Slide 13 text
31%
of smartphone owners
also own a tablet
http://bit.ly/zE1zgp
In the US...
Tuesday, May 28, 13
Slide 14
Slide 14 text
23%
of laptop owners
also own a tablet
http://bit.ly/zE1zgp
In the US...
Tuesday, May 28, 13
Slide 15
Slide 15 text
13%
own a laptop,
tablet & smartphone
http://bit.ly/zE1zgp
In the US...
Tuesday, May 28, 13
Slide 16
Slide 16 text
The web is not fixed width
Tuesday, May 28, 13
Slide 17
Slide 17 text
The penetration of
desktop & laptop
ownership is the same
today as it was in 2007.
http://bit.ly/zE1zgp
In the US...
Tuesday, May 28, 13
Slide 18
Slide 18 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
Tuesday, May 28, 13
Slide 19
Slide 19 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
Tuesday, May 28, 13
Slide 20
Slide 20 text
Flexibility is the new norm
Tuesday, May 28, 13
Slide 21
Slide 21 text
People are trying to
browse your sites on these
devices, today
Tuesday, May 28, 13
Slide 22
Slide 22 text
Responsive web design
Tuesday, May 28, 13
Slide 23
Slide 23 text
Ethan Marcotte
Article on ALA
(http://bit.ly/Wi0xvw)
Book via ABA
(http://bit.ly/f6TPB7)
Tuesday, May 28, 13
Slide 24
Slide 24 text
RWD 101
‣ Three Core Techniques
- A Fluid Foundation
- Flexible Content
- Media Queries
Tuesday, May 28, 13
Slide 25
Slide 25 text
A Fluid Foundation
Honor the proportions of
the design by creating
percentage-based layout
instead of fixed-width,
pixel-based layout.
Tuesday, May 28, 13
Slide 26
Slide 26 text
A Fluid Foundation
http://bostonglobe.com
Tuesday, May 28, 13
Slide 27
Slide 27 text
Flexible Content
Once we have a layout
which is based on
proportions, the content
must also respond.
Tuesday, May 28, 13
Slide 28
Slide 28 text
Flexible Content
http://microsoft.com
Tuesday, May 28, 13
Slide 29
Slide 29 text
Media Queries
When our content and our
design are no longer
working in harmony, we
need to make a larger shift
in layout.
Tuesday, May 28, 13
Slide 30
Slide 30 text
Media Queries
http://skinnyties.com
Tuesday, May 28, 13
Slide 31
Slide 31 text
RWD 101
‣ Three Core Techniques
- A Fluid Foundation
- Flexible Content
- Media Queries
Tuesday, May 28, 13
Slide 32
Slide 32 text
WEB DESIGN PROCESS IN A RESPONSIVE WORLD
RWD WORKFLOW
Tuesday, May 28, 13
Slide 33
Slide 33 text
A SHIFT IN
MINDSET
Tuesday, May 28, 13
Slide 34
Slide 34 text
Where we’ve been
Tuesday, May 28, 13
Slide 35
Slide 35 text
A SHIFT IN MINDSET
Traditional Linear Workflow
DESIGN FRONT-END BACK-END LAUNCH!
Tuesday, May 28, 13
Slide 36
Slide 36 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
Tuesday, May 28, 13
Slide 37
Slide 37 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
Tuesday, May 28, 13
Slide 38
Slide 38 text
A SHIFT IN MINDSET
Slightly Better Linear Workflow
CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
Tuesday, May 28, 13
Slide 39
Slide 39 text
What happens when you
throw RWD into this
process?
Tuesday, May 28, 13
Slide 40
Slide 40 text
A SHIFT IN MINDSET
Linear Workflow
CONTENT UX DESIGN FRONT-END BACK-END LAUNCH
Now with
RWD!
Tuesday, May 28, 13
Slide 41
Slide 41 text
Now with
RWD!
A SHIFT IN MINDSET
Linear Workflow
CONTENT UX DESIGN FRONT-END BACK-END LAUNCH
Me too!
Ditto!
Tuesday, May 28, 13
Slide 42
Slide 42 text
This doesn’t work.
Tuesday, May 28, 13
Slide 43
Slide 43 text
(example: seesparkbox.com)
Tuesday, May 28, 13
Slide 44
Slide 44 text
Jakob Nielsen Says...
‣ Build a separate mobile site
‣ Cut features
‣ Cut content
http://www.nngroup.com/articles/mobile-site-vs-full-site/
Tuesday, May 28, 13
Slide 45
Slide 45 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.
Tuesday, May 28, 13
Slide 46
Slide 46 text
We need to invite others
into the process
Tuesday, May 28, 13
Slide 47
Slide 47 text
A SHIFT IN MINDSET
A Responsive Workflow
Tuesday, May 28, 13
Slide 48
Slide 48 text
Disciplines
BACK-END
FRONT-END
DESIGN
C
O
NTENT UX
Tuesday, May 28, 13
Slide 49
Slide 49 text
Collaborative Timeline
Tuesday, May 28, 13
Slide 50
Slide 50 text
Cycle
BACK-END
FRONT-END
DESIGN
C
O
NTENT UX
Tuesday, May 28, 13
Slide 51
Slide 51 text
Differing Cycle
BACK-END
FRONT-END
DESIGN
C
O
NTENT UX
Tuesday, May 28, 13
Slide 52
Slide 52 text
Life Cycle
BACK-END
FRONT-END
DESIGN
C
O
NTENT UX
Tuesday, May 28, 13
Slide 53
Slide 53 text
Phased Release
BACK-END
FRONT-END
DESIGN
C
O
NTENT UX
DELIVERABLE
DELIVERABLE
DELIVERABLE
DELIVERABLE
DELIVERABLE
DELIVERABLE
RELEASE
RELEASE
Tuesday, May 28, 13
Slide 54
Slide 54 text
A SHIFT IN MINDSET
A Responsive Workflow
‣ Pros
- Natural Decisions
- Encourages Collaboration
- Encourages Iteration
- Better Results
Tuesday, May 28, 13
Slide 55
Slide 55 text
A SHIFT IN MINDSET
A Responsive Workflow
‣ Cons
- Requires Change
- May Conflict with Organizational
Structure
- Dependent on Team Make-up
Tuesday, May 28, 13
Slide 56
Slide 56 text
What happens when you
invite others into the
process?
Tuesday, May 28, 13
Slide 57
Slide 57 text
The quality as a whole
improves
Tuesday, May 28, 13
Slide 58
Slide 58 text
(example: nd.edu)
Tuesday, May 28, 13
Slide 59
Slide 59 text
So, how do we actually
do this?
Tuesday, May 28, 13
Slide 60
Slide 60 text
A SHIFT IN
PROCESS
Tuesday, May 28, 13
Slide 61
Slide 61 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.
Tuesday, May 28, 13
Slide 62
Slide 62 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.)
Tuesday, May 28, 13
Slide 63
Slide 63 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.)
Tuesday, May 28, 13
Slide 64
Slide 64 text
A SHIFT IN PROCESS
Our Deliverables
‣ Research Deliverables
‣ Content Deliverables
‣ Priority Deliverables
‣ Style Deliverables
‣ Functional Deliverables
Tuesday, May 28, 13
Slide 65
Slide 65 text
A SHIFT IN PROCESS
Let’s Focus On...
‣ Research Deliverables
‣ Content Deliverables
‣ Priority Deliverables
‣ Style Deliverables
‣ Functional Deliverables
Tuesday, May 28, 13
Slide 66
Slide 66 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.
Tuesday, May 28, 13
Slide 67
Slide 67 text
A SHIFT IN PROCESS
Priority Deliverables
‣ Content Priority Examples
- Non HTML examples
• Smashing Article: Design Process In The
Responsive Age
- HTML example
• building.seesparkbox.com
Tuesday, May 28, 13
Slide 68
Slide 68 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.
Tuesday, May 28, 13
Slide 69
Slide 69 text
A SHIFT IN PROCESS
Style Deliverables
‣ Style Prototype Examples
- building.seesparkbox.com
• new Sparkbox web style prototype
- dressresponsively.com
• dress responsively style prototype
Tuesday, May 28, 13
Slide 70
Slide 70 text
SECTION HEADER
Other Style Deliverables
‣ Element Collages (Dan Mall)
‣ Style Tiles (Samantha Warren)
‣ Photoshop Comps (Everyone)
Tuesday, May 28, 13
Slide 71
Slide 71 text
A SHIFT IN PROCESS
Use What The Project Needs
‣ Research Deliverables
‣ Content Deliverables
‣ Priority Deliverables
‣ Style Deliverables
‣ Functional Deliverables
Tuesday, May 28, 13
Slide 72
Slide 72 text
Discussion
‣ What happens next in this
process?
‣ How are you doing RWD design
deliverables now?
‣ What are you struggling with?
Tuesday, May 28, 13
Slide 73
Slide 73 text
CODE AND PROJECT STRUCTURE
SERVING
RWD STYLES
Tuesday, May 28, 13
Slide 74
Slide 74 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Tuesday, May 28, 13
Slide 75
Slide 75 text
Before any of this stuff will
work, you need to do this:
Tuesday, May 28, 13
Slide 76
Slide 76 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; }
Tuesday, May 28, 13
Slide 77
Slide 77 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Tuesday, May 28, 13
Slide 78
Slide 78 text
Single CSS File
HTML
CSS
Start with styles applied
to all
Styles scoped to a
media query
Styles scoped to another
media query
Tuesday, May 28, 13
Slide 79
Slide 79 text
/* styles.css */
aside { color: #333; width: 100%; }
Single CSS File
Tuesday, May 28, 13
Slide 80
Slide 80 text
/* styles.css */
aside { color: #333; width: 100%; }
/* if the viewport width is 40em or greater */
Single CSS File
Tuesday, May 28, 13
Slide 81
Slide 81 text
PAUSE:
MEDIA QUERIES
Tuesday, May 28, 13
Slide 82
Slide 82 text
Slide 83
Slide 83 text
Slide 84
Slide 84 text
Media Types
all
braille, embossed, speech
handheld, projection, screen, tv
print
tty
http://www.w3.org/TR/CSS21/media.html#media-types
Tuesday, May 28, 13
Slide 85
Slide 85 text
Slide 86
Slide 86 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
Tuesday, May 28, 13
Slide 87
Slide 87 text
Single CSS File
HTML
CSS
Start with styles applied
to all
Styles scoped to a
media query
Styles scoped to another
media query
Tuesday, May 28, 13
Slide 88
Slide 88 text
Small Viewport Width First
HTML
CSS
Smallest styles
Wider styles (mq)
Even wider styles (mq)
Super wide styles (mq)
Tuesday, May 28, 13
Slide 89
Slide 89 text
Large Viewport Width First
HTML
CSS
Widest styles
Wide styles (mq)
Narrow styles (mq)
Very narrow styles (mq)
Tuesday, May 28, 13
Slide 90
Slide 90 text
/* styles.css */
aside { color: #333; width: 100%; }
/* if the viewport width is 40em or greater */
Single CSS File
Tuesday, May 28, 13
Slide 91
Slide 91 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
Tuesday, May 28, 13
Slide 92
Slide 92 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
Tuesday, May 28, 13
Slide 93
Slide 93 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
Tuesday, May 28, 13
Slide 94
Slide 94 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
Tuesday, May 28, 13
Slide 95
Slide 95 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
Tuesday, May 28, 13
Slide 96
Slide 96 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
Tuesday, May 28, 13
Slide 97
Slide 97 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Tuesday, May 28, 13
Slide 98
Slide 98 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/
Tuesday, May 28, 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
Tuesday, May 28, 13
Slide 107
Slide 107 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Tuesday, May 28, 13
Slide 108
Slide 108 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/
Tuesday, May 28, 13
Slide 109
Slide 109 text
Breakpoint Based Partials
index.html
Tuesday, May 28, 13
The Big Three:
LESS, SASS, and Stylus
Tuesday, May 28, 13
Slide 120
Slide 120 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
Tuesday, May 28, 13
Slide 121
Slide 121 text
LESS
‣ Runs on Node.js
‣ Very similar syntax to SASS
‣ http://lesscss.org/
Tuesday, May 28, 13
Slide 122
Slide 122 text
Variables are
specified with @
symbol
/* .less */
@top-variable: 20px;
! #header-shadow {
! position: absolute;
! ! top: @top-variable;
! }
LESS syntax
Tuesday, May 28, 13
Slide 123
Slide 123 text
Stylus
‣ Runs on Node.js
‣ Has a flexible syntax
- You can omit semi-colons, colons,
and braces
‣ http://learnboost.github.com/
stylus/
Tuesday, May 28, 13
Slide 124
Slide 124 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
Tuesday, May 28, 13
Slide 125
Slide 125 text
SASS
‣ Runs on Ruby
‣ Has two syntax flavors
- .scss & .sass
‣ http://sass-lang.com/
Tuesday, May 28, 13
Mixins
‣ SASS and Stylus both support
basic programming like loops, if/
else, etc. in mixins.
‣ LESS only offers “guarded
mixins.”
Tuesday, May 28, 13
Slide 134
Slide 134 text
Sparkbox REM Mixin
Tuesday, May 28, 13
Slide 135
Slide 135 text
/*.scss*/
@include rem(padding, 0.5, 1, 4, 3);
@include rem(font-size, 1.2, large);
Sparkbox REM Mixin
Tuesday, May 28, 13
Slide 136
Slide 136 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.
Tuesday, May 28, 13
Slide 137
Slide 137 text
Compass & Bourbon
Tuesday, May 28, 13
Slide 138
Slide 138 text
Importing
‣ Allows you to break up your
styles across files.
- variables, mixins, reset, all
separated.
‣ Better than a standard css import
Tuesday, May 28, 13
Slide 139
Slide 139 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
Tuesday, May 28, 13
Slide 140
Slide 140 text
Extends
‣ Extends allow you to reuse styles
between various selectors.
‣ DRY Principle applied to CSS
Tuesday, May 28, 13
Google Chrome Developer
Tools & SASS
Tuesday, May 28, 13
Slide 144
Slide 144 text
Source Maps
‣ Using pre-processors does
present some new challenges.
‣ Line-numbers are no longer
representative of where the code
is.
Tuesday, May 28, 13
Slide 145
Slide 145 text
Source Maps
‣ Source maps let Chrome know the
source of the generated CSS.
Tuesday, May 28, 13
Slide 146
Slide 146 text
Setup Chrome for SASS
Source Maps Support
‣ head over to chrome://flags
- Enable Developer Tools
Experiments
Tuesday, May 28, 13
Slide 147
Slide 147 text
Setup Chrome for SASS
Source Maps Support
‣ Enable Support for SASS in the
Dev Tools options
Tuesday, May 28, 13
Slide 148
Slide 148 text
Setup Chrome for SASS
Source Maps Support
‣ Enable support for Source maps
Tuesday, May 28, 13
Slide 149
Slide 149 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
Tuesday, May 28, 13
Slide 150
Slide 150 text
CSS PREPROCESSORS
Resources
Codekit
http://incident57.com/codekit/
Tuesday, May 28, 13
Slide 151
Slide 151 text
CSS PREPROCESSORS
Resources
Scout
http://mhs.github.com/scout-app/
Tuesday, May 28, 13
Slide 152
Slide 152 text
CSS PREPROCESSORS
Resources
Compass
http://compass-style.org/
Tuesday, May 28, 13
Slide 153
Slide 153 text
CSS PREPROCESSORS
Resources
SASS Primer
http://thesassway.com/beginner/getting-
started-with-sass-and-compass
Tuesday, May 28, 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
Tuesday, May 28, 13
Slide 157
Slide 157 text
SERVING RWD STYLES
Major Approaches
‣ Single CSS File
‣ Multiple CSS Files
‣ Breakpoint Based Partials
‣ Module Based Partials
Tuesday, May 28, 13
Slide 158
Slide 158 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
Tuesday, May 28, 13
Slide 159
Slide 159 text
Module Based Partials
index.html
Tuesday, May 28, 13
Slide 160
Slide 160 text
Module Based Partials
index.html
Tuesday, May 28, 13
Slide 161
Slide 161 text
Module Based Partials
index.html
Tuesday, May 28, 13
Slide 162
Slide 162 text
Module Based Partials
index.html
Tuesday, May 28, 13
Slide 163
Slide 163 text
Module Based Partials
index.html
Tuesday, May 28, 13
Slide 164
Slide 164 text
Module Based Partials
index.html
Tuesday, May 28, 13
https://github.com/sparkbox/SB-Media
Tuesday, May 28, 13
Slide 181
Slide 181 text
https://github.com/Team-Sass/
breakpoint
Tuesday, May 28, 13
Slide 182
Slide 182 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
Tuesday, May 28, 13
Slide 183
Slide 183 text
We recommend
module based partials
Tuesday, May 28, 13
Slide 184
Slide 184 text
(but it depends on your
specific project)
Tuesday, May 28, 13
Slide 185
Slide 185 text
THERE IS NO
BREAKPOINT
Tuesday, May 28, 13
Slide 186
Slide 186 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
...
}
Tuesday, May 28, 13
Slide 187
Slide 187 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
...
}
Tuesday, May 28, 13
Slide 188
Slide 188 text
There is no Breakpoint
Media Query
Bookmarklet
(by @robtarr)
Tuesday, May 28, 13
Slide 189
Slide 189 text
There is no Breakpoint
Tuesday, May 28, 13
Slide 190
Slide 190 text
Relax.
Tuesday, May 28, 13
Slide 191
Slide 191 text
Think more modularly.
Try something like
SMACSS (from @snookca).
Tuesday, May 28, 13
Slide 192
Slide 192 text
Element Queries
http://www.xanthir.com/b4PR0
Tuesday, May 28, 13
Slide 193
Slide 193 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)
Tuesday, May 28, 13
Slide 194
Slide 194 text
Discussion
‣ How are you serving RWD styles
today?
‣ How do you “support” older IE?
Tuesday, May 28, 13
Slide 195
Slide 195 text
MAKING EVERYTHING FLUID
CREATING
FLEXIBILITY
Tuesday, May 28, 13
Slide 196
Slide 196 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Tuesday, May 28, 13
Slide 197
Slide 197 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Tuesday, May 28, 13
Slide 198
Slide 198 text
It starts with the grid
Tuesday, May 28, 13
Slide 199
Slide 199 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%;
}
Tuesday, May 28, 13
Slide 200
Slide 200 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%
Tuesday, May 28, 13
Slide 201
Slide 201 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%
Tuesday, May 28, 13
Slide 202
Slide 202 text
Responsive grid systems
Tuesday, May 28, 13
Slide 203
Slide 203 text
CREATING FLEXIBILITY
RWD Grid Systems
‣ Foundation
‣ Bootstrap
‣ Skeleton
‣ Responsive.gs
‣ Columnal
‣ ...this list goes on, and on, and on
Tuesday, May 28, 13
Slide 204
Slide 204 text
CREATING FLEXIBILITY
Semantic RWD Grid Systems
‣ Semantic.gs
‣ Susy
‣ Zen Grids
Tuesday, May 28, 13
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Tuesday, May 28, 13
Slide 212
Slide 212 text
CREATING FLEXIBILITY
Responsive Layout Patterns
‣ Source order stacking
‣ Content choreography
‣ Off canvas
Tuesday, May 28, 13
Slide 213
Slide 213 text
CREATING FLEXIBILITY
Responsive Layout Patterns
‣ Source order stacking
‣ Content choreography
‣ Off canvas
Tuesday, May 28, 13
Slide 214
Slide 214 text
Tuesday, May 28, 13
Slide 215
Slide 215 text
CREATING FLEXIBILITY
Responsive Layout Patterns
‣ Source order stacking
‣ Content choreography
‣ Off canvas
Tuesday, May 28, 13
Slide 216
Slide 216 text
Tuesday, May 28, 13
Slide 217
Slide 217 text
Tuesday, May 28, 13
Slide 218
Slide 218 text
CREATING FLEXIBILITY
Responsive Layout Patterns
‣ Source order stacking
‣ Content choreography
‣ Off canvas
Tuesday, May 28, 13
Slide 219
Slide 219 text
Tuesday, May 28, 13
Slide 220
Slide 220 text
Tuesday, May 28, 13
Slide 221
Slide 221 text
Easiest to show
a few examples:
http://jasonweaver.name/lab/offcanvas/
http://mashable.com/
Tuesday, May 28, 13
Slide 222
Slide 222 text
There are many, many
combinations of these
basic ideas
http://bit.ly/U4N5qH
(http://bradfrost.github.com/this-is-responsive/patterns.html)
Tuesday, May 28, 13
Slide 223
Slide 223 text
There are some really cool
new layout modules
coming...
Tuesday, May 28, 13
Slide 224
Slide 224 text
http://www.netmagazine.com/tutorials/
master-new-css-layout-properties
Tuesday, May 28, 13
Slide 225
Slide 225 text
http://www.fivesimplesteps.com/
products/css3-layout-modules
Tuesday, May 28, 13
Slide 226
Slide 226 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Tuesday, May 28, 13
Slide 227
Slide 227 text
Type flexes by default
Tuesday, May 28, 13
Slide 228
Slide 228 text
We need to
consider readability
Tuesday, May 28, 13
Slide 229
Slide 229 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
Tuesday, May 28, 13
Slide 230
Slide 230 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
Tuesday, May 28, 13
Slide 231
Slide 231 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
Tuesday, May 28, 13
Slide 232
Slide 232 text
@snookca
http://snook.ca/technical/colour_contrast/
colour.html
@leaverou
http://leaverou.github.com/contrast-ratio/
Tuesday, May 28, 13
Slide 233
Slide 233 text
CREATING FLEXIBILITY
Responsive Typography
‣ Small screen != small font-size
‣ Consider contrast
‣ If text has links, give adequate
room to touch them
Tuesday, May 28, 13
Slide 234
Slide 234 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Tuesday, May 28, 13
http://bit.ly/12TbTX4
(http://codepen.io/bencallahan/pen/CtLDb)
Tuesday, May 28, 13
Slide 237
Slide 237 text
The image problem(s)
Tuesday, May 28, 13
Slide 238
Slide 238 text
CREATING FLEXIBILITY
The image problem(s)
‣ Content
‣ Bandwidth
‣ Pixel density
Tuesday, May 28, 13
Slide 239
Slide 239 text
CREATING FLEXIBILITY
Image: Content
Tuesday, May 28, 13
Slide 240
Slide 240 text
CREATING FLEXIBILITY
Image: Content
Tuesday, May 28, 13
Slide 241
Slide 241 text
CREATING FLEXIBILITY
Image: Content
Tuesday, May 28, 13
Slide 242
Slide 242 text
CREATING FLEXIBILITY
Image: Content
Tuesday, May 28, 13
Slide 243
Slide 243 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/
Tuesday, May 28, 13
Slide 244
Slide 244 text
CREATING FLEXIBILITY
Image: Bandwidth
Responsive & Responsible
via @scotjehl
https://speakerdeck.com/scottjehl/responsive-responsible
http://www.lukew.com/ff/entry.asp?1565
Tuesday, May 28, 13
Slide 245
Slide 245 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
Tuesday, May 28, 13
Slide 246
Slide 246 text
CREATING FLEXIBILITY
The image problem(s)
‣ Content
‣ Bandwidth
‣ Pixel density
Tuesday, May 28, 13
Slide 247
Slide 247 text
CREATING FLEXIBILITY
The image solution(s)
‣ SVG
‣ Icon fonts
‣ Pixel-density media queries
‣ Compressive
‣ Picturefill
‣ User preference
Tuesday, May 28, 13
Slide 248
Slide 248 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.
Tuesday, May 28, 13
Slide 249
Slide 249 text
@dbushell wrote a great primer for SVG
Tuesday, May 28, 13
Slide 250
Slide 250 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.
Tuesday, May 28, 13
Slide 251
Slide 251 text
Search
Icon Font Markup
/*.scss*/
[data-icon]:before {
content: attr(data-icon);
font-family: 'icon-font-family';
speak: none;
}
Tuesday, May 28, 13
Slide 252
Slide 252 text
“Compressive” Images
‣ http://bit.ly/Sygdey
‣ Increase the image dimensions
‣ Add massive compression
‣ Scale the image in the browser
Tuesday, May 28, 13
Slide 253
Slide 253 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.
Tuesday, May 28, 13
Slide 254
Slide 254 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
Also need other
browser prefixes
Tuesday, May 28, 13
Slide 255
Slide 255 text
Picturefill
‣ https://github.com/scottjehl/
picturefill
‣ Polyfill for the new
element
Tuesday, May 28, 13
Slide 256
Slide 256 text
Picturefill
Tuesday, May 28, 13
Slide 257
Slide 257 text
User Preference
‣ Allow the user to choose what
experience they would like to
have on their device: “HD” or
“SD”.
Tuesday, May 28, 13
Slide 258
Slide 258 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Tuesday, May 28, 13
Slide 259
Slide 259 text
CREATING FLEXIBILITY
Tables
http://codepen.io/bencallahan/pen/xvmCe
Tuesday, May 28, 13
Slide 260
Slide 260 text
CREATING FLEXIBILITY
What Needs to Flex
‣ Grids
‣ Layout
‣ Typography
‣ Images
‣ Tables
‣ Video
Tuesday, May 28, 13
Slide 261
Slide 261 text
CREATING FLEXIBILITY
Video
Tuesday, May 28, 13
Slide 262
Slide 262 text
CREATING FLEXIBILITY
Intrinsic Ratios
http://codepen.io/bencallahan/pen/KICkl
Tuesday, May 28, 13
Slide 263
Slide 263 text
CREATING FLEXIBILITY
Video
Tuesday, May 28, 13
Slide 264
Slide 264 text
Creating
flexibility requires
experimentation
Tuesday, May 28, 13
Slide 265
Slide 265 text
Creating
flexibility requires
Tuesday, May 28, 13
Slide 266
Slide 266 text
Discussion
‣ What content types have we not
addressed?
‣ What specific challenges are you
facing in creating flexibility?
Tuesday, May 28, 13
Slide 267
Slide 267 text
UNIQUE CONSIDERATIONS AND CHALLENGES
NAVIGATION
AND RWD
Tuesday, May 28, 13
Slide 268
Slide 268 text
NAVIGATION AND RWD
Major Issues
‣ Site Depth and Breadth
‣ Screen Real Estate
‣ Cross-width Consistency
‣ Interaction Patterns
Tuesday, May 28, 13
Slide 269
Slide 269 text
NAVIGATION AND RWD
Major Issues
‣ Site Depth and Breadth
‣ Screen Real Estate
‣ Cross-width Consistency
‣ Interaction Patterns
Tuesday, May 28, 13
Slide 270
Slide 270 text
Small sites often allow
simpler solutions.
Tuesday, May 28, 13
Slide 271
Slide 271 text
Simple Nav Examples
‣ Simple Row
‣ Jump to Content
‣ Jump to Footer
‣ Top Stacked Off Canvas
Tuesday, May 28, 13
Slide 272
Slide 272 text
Simple Nav Examples
‣ Simple Row
‣ Jump to Content
‣ Jump to Footer
‣ Top Stacked
Off Canvas
http://seesparkbox.com
Tuesday, May 28, 13
Slide 273
Slide 273 text
Simple Nav Examples
‣ Simple Row
‣ Jump to Content
‣ Jump to Footer
‣ Top Stacked
Off Canvas
http://forgeideas.com
Tuesday, May 28, 13
Slide 274
Slide 274 text
Simple Nav Examples
‣ Simple Row
‣ Jump to Content
‣ Jump to Footer
‣ Top Stacked
Off Canvas
http://contentsmagazine.com
Tuesday, May 28, 13
Slide 275
Slide 275 text
Simple Nav Examples
‣ Simple Row
‣ Jump to Content
‣ Jump to Footer
‣ Top Stacked
Off Canvas
http://2012.dconstruct.org/
Tuesday, May 28, 13
Slide 276
Slide 276 text
Most sites have to
work a bit harder to
accommodate their
content.
Tuesday, May 28, 13
Slide 277
Slide 277 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
Tuesday, May 28, 13
Slide 278
Slide 278 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.
Tuesday, May 28, 13
Slide 279
Slide 279 text
Before accommodating all
the things, it’s not a cop-
out to question the things.
Tuesday, May 28, 13
Slide 280
Slide 280 text
Attack the right nav.
Tuesday, May 28, 13
Slide 281
Slide 281 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
Tuesday, May 28, 13
Slide 282
Slide 282 text
NAVIGATION AND RWD
Major Issues
‣ Site Depth and Breadth
‣ Screen Real Estate
‣ Cross-width Consistency
‣ Interaction Patterns
Tuesday, May 28, 13
Slide 283
Slide 283 text
Small screens aren’t just
horizontally small.
Tuesday, May 28, 13
Don’t make small screens
smaller by eating up
vertical space with nav.
Tuesday, May 28, 13
Slide 287
Slide 287 text
http://www.tuj.ac.jp/
Tuesday, May 28, 13
Slide 288
Slide 288 text
http://
seesparkbox.com/
foundry
Tuesday, May 28, 13
Slide 289
Slide 289 text
Take ALL the navigation
into account.
Tuesday, May 28, 13
Slide 290
Slide 290 text
http://skinnyties.com/
color/blue/
Tuesday, May 28, 13
Slide 291
Slide 291 text
NAVIGATION AND RWD
Major Issues
‣ Site Depth and Breadth
‣ Screen Real Estate
‣ Cross-width Consistency
‣ Interaction Patterns
Tuesday, May 28, 13
Slide 292
Slide 292 text
“Users don’t resize their
browser. That’s a
developer behavior.”
Tuesday, May 28, 13
Slide 293
Slide 293 text
Our users are viewing our
sites at multiple
resolutions.
Tuesday, May 28, 13
Slide 294
Slide 294 text
Familiarity breeds
usability.
Tuesday, May 28, 13
Slide 295
Slide 295 text
Are our off-canvas and
other RWD-inspired
patterns doing more harm
than good?
Tuesday, May 28, 13
Slide 296
Slide 296 text
Pros & Cons
from
http://
thenextweb.com/
Tuesday, May 28, 13
Slide 297
Slide 297 text
Do we need to change the
user’s pattern at all?
Tuesday, May 28, 13
Slide 298
Slide 298 text
http://
www.polygon.com/
Tuesday, May 28, 13
Slide 299
Slide 299 text
NAVIGATION AND RWD
Major Issues
‣ Site Depth and Breadth
‣ Screen Real Estate
‣ Cross-width Consistency
‣ Interaction Patterns
Tuesday, May 28, 13
Slide 300
Slide 300 text
There is no right answer.
Tuesday, May 28, 13
Slide 301
Slide 301 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
http://bradfrost.github.com/this-is-responsive/patterns.html
Tuesday, May 28, 13
Slide 302
Slide 302 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 303
Slide 303 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 304
Slide 304 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 305
Slide 305 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 306
Slide 306 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 307
Slide 307 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 308
Slide 308 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 309
Slide 309 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 310
Slide 310 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 311
Slide 311 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 312
Slide 312 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 313
Slide 313 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 314
Slide 314 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 315
Slide 315 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 316
Slide 316 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 317
Slide 317 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 318
Slide 318 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 319
Slide 319 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 320
Slide 320 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 321
Slide 321 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 322
Slide 322 text
Patterns Galore
‣ Toggle
‣ Footer Anchor
‣ Select Menu
‣ Multi-Toggle
‣ Off Canvas
‣ Breadcrumbs
‣ More...
Tuesday, May 28, 13
Slide 323
Slide 323 text
Be open to combining
patterns.
Tuesday, May 28, 13
Slide 324
Slide 324 text
Only try completely
unique/novel patterns if
you plan to fully test them.
Tuesday, May 28, 13
Slide 325
Slide 325 text
Discussion
‣ How are you handling navigation
in your RWD projects?
‣ Have you been able to push back
on IA?
Tuesday, May 28, 13
Slide 326
Slide 326 text
LEARN FROM OUR MISTAKES
LESSONS
LEARNED
Tuesday, May 28, 13
Slide 327
Slide 327 text
Testing
Tuesday, May 28, 13
Slide 328
Slide 328 text
LESSONS LEARNED
Testing
‣ You must test on real devices
‣ Do your development in a webkit
browser
‣ Bulid libraries of your patterns
Tuesday, May 28, 13
Slide 329
Slide 329 text
Pricing
Tuesday, May 28, 13
Slide 330
Slide 330 text
LESSONS LEARNED
Pricing
‣ As much as 100% more, initially
‣ Likely to be 50% more, soon after
‣ Probably never less than 25% more
Tuesday, May 28, 13
Slide 331
Slide 331 text
LESSONS LEARNED
Pricing
‣ As much as 100% more, initially
‣ Likely to be 50% more, soon after
‣ Probably never less than 25% more
COMPARED TO
WHAT?
Tuesday, May 28, 13
LESSONS LEARNED
Prioritization
Tuesday, May 28, 13
Slide 335
Slide 335 text
LESSONS LEARNED
Prioritization
Tuesday, May 28, 13
Slide 336
Slide 336 text
LESSONS LEARNED
Prioritization
Tuesday, May 28, 13
Slide 337
Slide 337 text
LESSONS LEARNED
Prioritization
Tuesday, May 28, 13
Slide 338
Slide 338 text
LESSONS LEARNED
Prioritization
Tuesday, May 28, 13
Slide 339
Slide 339 text
Performance
Tuesday, May 28, 13
Slide 340
Slide 340 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
Tuesday, May 28, 13
Slide 341
Slide 341 text
Barriers
Tuesday, May 28, 13
Slide 342
Slide 342 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
Tuesday, May 28, 13
Slide 343
Slide 343 text
SOME THOUGHTS ON WHAT’S NEXT IN RWD
WHERE
WE’RE GOING
Tuesday, May 28, 13
Slide 344
Slide 344 text
Tuesday, May 28, 13
Slide 345
Slide 345 text
Tuesday, May 28, 13
Slide 346
Slide 346 text
Unconscious
Incompetence
Tuesday, May 28, 13
Slide 347
Slide 347 text
Unconscious
Incompetence
Conscious
Incompetence
Tuesday, May 28, 13
Slide 348
Slide 348 text
Unconscious
Incompetence
Conscious
Incompetence
Conscious
Competence
Tuesday, May 28, 13
The Responsive Dip
http://bit.ly/MasqBk
Tuesday, May 28, 13
Slide 351
Slide 351 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/
Tuesday, May 28, 13
Slide 352
Slide 352 text
There are many
problems left to solve.
We’ll solve them much faster if we
solve them together.
Tuesday, May 28, 13
Slide 353
Slide 353 text
There are many
problems left to solve.
We’ll solve them much faster if we
Tuesday, May 28, 13
Slide 354
Slide 354 text
THANKS!
@bencallahan
@jeremyloyd
@drewtclemens
Tuesday, May 28, 13