Implementing Responsive Design Building sites for an anywhere, everywhere web

by Kadlec, Tim

• ISBN13: 9780321821683
• ISBN10: 0321821688
• Edition: 1st
• Format: Paperback
• Copyright: 2012-07-31
• Publisher: New Riders

Summary

New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced with this volatile landscape we can either struggle for control or we can embrace the inherent flexibility of the web. Responsive design is not just another techniqueit is the beginning of the maturation of a medium and a fundamental shift in the way we think about the web. Implementing Responsive Designis a practical examination of how this fundamental shift affects the way we design and build our sites. Readers will learn how to: Build responsive sites using a combination of fluid layouts, media queries, and fluid media Adopt a responsive workflow from the very start of a project Enhance content for different devices Use feature-detection and server-side enhancement to provide a richer experience

Author Biography

Tim Kadlec is a web developer living in northern Wisconsin. He carefully applies web technologies to meet the needs of clients of all sizes working across diverse industries such as publishing, manufacturing and the financial sector. He is the co-founder of Breaking Development, one of the first conferences dedicated to design and development for mobile devices using web technologies. He also writes about a variety of topics at timkadlec.com.

Table of Contents

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