Table of Contents
Preface ix
1 Embracing Uncertainty 1
Embrace Uncertainty 2
From Microsoft's Monoculture to Today's Healthy Chaos 4
Where We Are Right Now 6
Browsers 6
The Open Web Platform 13
Connection Speeds and Quality 20
The Human-Computer Interface 21
Screen Resolution and Orientation 22
Pixel Density 23
What's 2% Anyway? 26
This Is What We Wanted 28
2 Navigating the Uncertain Web 29
Don't Blame the Web for Being the Web 30
Identify and Embrace Your Audience 30
Test and Pray for the Best 34
Focus on Optimal, Not Absolute Solutions 38
Embrace Accessibility 40
Provide Text Alternatives for All Non-Text Content 41
Ensure Information and Structure Can Be Separated from Presentation 45
Make All Functionality Operable via a Keyboard Interface 45
Content Can Be Paused by the User Unless the Timing or Movement Is Part of an Activity Where Timing or Movement Is Essential 46
Provide Mechanisms to Help Users Find Content, Orient Themselves Within It, and Navigate Through It 47
Help Users Avoid Mistakes and Make It Easy to Correct Mistakes 48
Support Compatibility with Current and Future User Agents (Including Assistive Technologies) 49
Don't Stop There 49
Lose Your Technology Biases 49
The iPhone Is the Only Mobile Experience 50
Closed. Won't Fix. Can't Reproduce. 51
Contrary to Popular Opinion, Internet Explorer Does Exist 51
Embrace Empathy 53
Lose Your Stack Biases 53
jQuery 54
MVWhatever 55
Keep at Least One Eye on the Cutting Edge 56
Spread Your Wings (and Question Your Assumptions) 58
3 Lay a Foundation for the Future with Feature Detection and Polyfills 59
Feature Detection 60
Looking at a More Complicated Feature Detection 61
Using Modernizr 62
Old IE: The One Thing Modernizr Does Modernize 63
Using (and Not Using) Modernizr 63
Feature Detection with Modernizr 65
Customizing Modernizr 68
Using Modernizes Tests 69
Cross Browser Polyfills 72
Additional Modernizr Methods 73
Managing the Undetectables 75
Common Feature Tests and Associated Polyfills 77
"Frontend Development Done Right" 80
4 Selecting Responsive Design or Another Mobile Experience 81
Boston Globes RWD Redesign 82
Really? RWD for Every Site? 83
Mobile First, RESS, and the Rest of the Mobile Development Universe 86
Dedicated Mobile Experience 86
Mobile First 87
Progressive Enhancement 87
RESS 87
Choosing a Development Path 87
The Size and Skills of Your Team 88
The Requirements of Your Site or Application 88
Your Demographics 88
Your Budget 89
Benefits of RWD 89
Downsides of RWD 90
Benefits of a Dedicated Mobile Experience 91
Downsides of a Dedicated Mobile Experience 91
If Facebook Jumped Off a Bridge, Would You Jump Off a Bridge, Too? Or: What Do the Biggest Sites in the United States Do? 93
Choose the Architecture That Makes Sense for Your Project 94
Redirects Should Resolve Logically 96
Redirect Options 98
Simple Redirection 98
Options for More Complicated Queries 101
Always Offer an Escape from the Mobile Version 102
Be Fluid and Design for Your Design 104
Feel Free to Abuse Minor Breakpoints 107
On Relative Units 109
"Accepting the Ebb and Flow of Things" 110
5 Working with User Input 111
The State of User Input on the Web 112
The Conceptual Problem with "Touch" Detection 114
The Technical Problem with "Touch" Detection 114
What It Means to Get It Wrong 116
You Can Fail Completely 117
You Can Fail Just a Little 118
Design for a Spectrum of Potential User Inputs 120
Lean Toward Finger-Friendly Interfaces for All Interfaces 120
Don't Rely on Hover 120
Embrace Clarity 121
Working with the Full User Input Spectrum 121
The Current State of Touch and Mouse Event Handling 121
Assume Nothing and Accommodate Everyone 136
6 The Surprisingly Complex World of Images on the Web 137
While We Weren't Paying Attention, Images Got Complicated 139
We Want to Serve the Smallest Possible File Size 141
We Need to Take Advantage of the Browser Preloader 141
We Want to Serve Correctly Sized Images to Multiple Resolutions 141
We Need to Serve the Correct Image for Multiple Pixel Ratio Devices 141
We Want to Choose Different Sizes/Images at Different Breakpoints 141
We Want to Use Design Breakpoints 142
Serving the Correct Format 142
Images Are Easy, and They Should Stay Easy 142
Optimizing Images for the Web 142
JPEG 143
Choosing the Right File Format 145
Look for a CDN Solution 146
Responsive Images 147
The Option of Doing Nothing (or Nothing New, at Least) 147
srcset 148
picture 151
Picturefill, the picture Polytill 156
Embrace SVG 157
On the Server Side 160
A Practical Developers Guide to All of This Complexity 161
Identify How Important Images Are to Your Site 161
Get the Basics Right 162
Use the Simplest Possible Solution 162
Learn to Love SVG 162
Test! 162
Conclusion 163
7 The Horribly Complex World of Web Video 165
The Core Technology 166
The HTML video Element 166
The Flash Fallback 169
Containers and Codecs 170
Video.js 172
Mime Types and Adaptive Bitrate Streaming 175
Letting the Pros Handle It 176
YouTube 177
Vimeo 180
Make the Best of a Complicated Situation 184
8 The Web We Want 187
Things Can Get Better (But They Do Occasionally Get Worse) 188
Firefox Announced Support for h.264 188
Picture Comes Back from the Dead 189
Pointer Events Might Be Dead 189
I Knew Something Like This Would Happen 190
Let's Push Things Forward 190
A Web Built By Developers, Browser Vendors, and Standards Bodies 190
A Web That Is Fast, Widely Available, and Reliable 191
A Web Where There's Nothing to Win 193
The Web We Want Starts with Us 194
Index 195
