Chapter 1: the anywheRe, eveRywheRe weB 1
Where we went wrong . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
The devices are coming, the devices are coming . . . . . . . . . . . . . . . . . . . . . . . . . 4
Display size ....................................................................... 6
Network speeds ................................................................... 6
Standards support ................................................................. 7
Input method ..................................................................... 7
Context .......................................................................... 8
Separate sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Divergence ......................................................................10
Becoming responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Progressive enhancement .........................................................14
Why another book on responsive design? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
What’s covered? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Who is this book for? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Code examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
The companion site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Chapter 2: fluID layouts 21
Layout options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Fixed-width .....................................................................23
Fluid layouts .....................................................................25
Elastic layouts ...................................................................26
Hybrid layouts ...................................................................26
Which approach is the most responsive? ...........................................27
Sizing fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Pixels ...........................................................................28
Ems .............................................................................29
Percentages ......................................................................31
Bonus round: rems ...............................................................32
Which approach is the most responsive? ...........................................33
Converting from pixels ...........................................................34
x ImplemenTIng ResponsIve DesIgnGrid layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Content-out .....................................................................37
Setting the grid ..................................................................38
Mixing fixed and fluid widths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Table layouts—the right way ......................................................44
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Chapter 3: meDIa QueRIes 53
Viewports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
A pixel is a pixel, unless it isn’t .....................................................58
Viewport tag and properties ......................................................59
Media query structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Media types .....................................................................65
Media expressions ...............................................................67
Logical keywords ................................................................67
Rules ............................................................................72
Embedded versus external . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Media query order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Desktop down ...................................................................74
Mobile up .......................................................................75
Create your core experience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Determining breakpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Follow the content ...............................................................79
Enhancing for larger screens ......................................................83
Using ems for more flexible media queries .........................................85
Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Toggling .........................................................................88
Supporting Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Chapter 4: ResponsIve meDIa 95
What’s the problem? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Performance .....................................................................97
Selectively serving images to mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
JavaScript ......................................................................100
conTenTs xiIntroducing matchMedia ........................................................104
Responsive image strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Fighting the browser ............................................................105
Resignation .....................................................................106
Going to the server ..............................................................106
Responsive image options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Sencha.io Src ...................................................................106
Adaptive Images ................................................................107
Wait, what’s the answer here? ....................................................111
Background images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
While we’re at it .................................................................113
High-resolution displays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
SVG ...........................................................................116
Other fixed-width assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Video ..........................................................................118
Advertising .....................................................................122
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Chapter 5: plannIng 127
Choosing to be responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Performance ....................................................................129
Context ........................................................................130
Content negotiation .............................................................130
Time investment ................................................................130
Support ........................................................................131
Advertising .....................................................................132
Conclusion .....................................................................132
Consider your analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Skewed site analytics ............................................................134
Which stats matter ..............................................................135
Skewed market share statistics ...................................................139
Consider your content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Content audit ...................................................................140
Page tables .....................................................................143
xii ImplemenTIng ResponsIve DesIgnConsider where you’re going . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Optimized for some, accessible to many ..........................................144
Consider the cross-device experience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Prepare your test bed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Actual devices ..................................................................148
Emulators ......................................................................150
Third-party services .............................................................152
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Chapter 6: DesIgn woRkflow 153
Your mileage may vary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
An interactive medium ..........................................................155
Collaboration ...................................................................155
Thinking in systems .............................................................160
Thinking mobile first . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Mobile is exploding .............................................................161
Mobile forces you to focus .......................................................162
Mobile extends your capabilities .................................................164
The tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Wireframes .....................................................................165
Mock-ups ......................................................................168
Style guides ....................................................................173
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Chapter 7: ResponsIve content 179
Starting with the content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Content types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Purpose ........................................................................182
Creation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182
Structure .......................................................................182
What content to display, and when . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Removing content ..............................................................184
Enhancing content .............................................................186
When should content order change? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Structure, again .................................................................192
conTenTs xiiiWhere we need to go . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Code soup ......................................................................194
Baby steps ......................................................................195
Building an API .................................................................196
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Chapter 8: Ress 199
User agent detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Anatomy of a user agent string ...................................................202
What can you do with user agent detection? ......................................203
Feature detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Modernizr ......................................................................204
Going to the server ..............................................................205
Combining user agent detection and feature detection . . . . . . . . . . . . . . . . . 207
RESS: The best of both worlds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Troubled waters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Installing WURFL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Configuration ..................................................................214
Detecting capabilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Making calls ....................................................................221
Optimizing for touch ............................................................223
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Chapter 9: ResponsIve expeRIences 227
A system of sensors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
What can we do? ................................................................231
Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Classifying context ..............................................................236
Observe and research ...........................................................237
Capabilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
HTML5 input types ............................................................238
APIs ...........................................................................241
Wrapping it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
xiv ImplemenTIng ResponsIve DesIgnChapter 10: lookIng foRwaRD 255
Photo Credits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
About the Technical Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271