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