Scott Jehl - Responsible Responsive Design

HTML5 for Web Designers

Jeremy Keith

CSS3 for Web Designers

Dan Cederholm

The Elements of Content Strategy

Erin Kissane

Responsive Web Design

Ethan Marcotte

Designing for Emotion

Aarron Walter

Mobile First

Luke Wroblewski

Design Is a Job

Mike Monteiro

Content Strategy for Mobile

Karen McGrane

Just Enough Research

Erika Hall

Sass for Web Designers

Dan Cederholm

On Web Typography

Jason Santa Maria

Youre My Favorite Client

Mike Monteiro

Copyright 2014 Scott Jehl

All rights reserved

Publisher: Jeffrey Zeldman

Designer: Jason Santa Maria

Managing Director: Katel LeD

Editor: Tina Lee

Technical Editor: Ethan Marcotte

Copyeditors: Caren Litherland, Rachel Kaufman

Proofreader: Caren Litherland

Compositor: Rob Weychert

Ebook Production: India Amos

ISBN: 978-1-9375571-7-1

A Book Apart

New York, New York

http://abookapart.com

10 9 8 7 6 5 4 3 2 1

CHAPTER 1
Responsible Design

CHAPTER 2
Sustainable Detection

CHAPTER 3
Planning for Performance

CHAPTER 4
Delivering Responsibly

THE WEB IS A SUCKER for a good metaphor. In its early days, it was our printing press; as it got older, it was our playground, then our marketplace; now, its our photo albums, our diaries, our travelogues, our shared moments and videos and GIFs and and, and, and. Whats more, thanks to the explosive popularity of handheld, web-ready devices, the web is accessed more broadly today than at any point in its short lifespan. I think its fair to say the web is more than the sum of its underpinnings, evolving from a tangle of wires flinging packets over HTTP to a place where we publish, we sell, we connect, we work, and we play.

But heres the thing: the web is far more fragile than we might like to admit. Its fraught with uncertaintya connection could be dropped, or a networks latency could be too highwhich means entire elements of our designs might never reach our users. Of course, its tempting to see this as a temporary problem, one thatll gradually resolve itself as devices get better, or as networks get stronger. But between the aging infrastructure of developed economies and the popularity of cheaper, low-powered mobile devices in younger, emerging markets, it feels like were watching a new normal emerge for the weba medium thats accessed across the planet, but is also much, much slower than we previously thought.

This might sound scary. But thats not how this story ends.

When mobile first happened, we were given an opportunity: instead of defaulting to device-specific sites, we realized we could use flexible layouts and media queries to make responsive designs, layouts that could adapt to a nearly infinite array of differently sized screens.

So now, too, we have another opportunity: to ensure our layouts arent just responsive, but sustainablefit to deliver compelling content and rich interfaces not only to the latest devices or the widest networks, but to every glowing screen, everywhere.

Thankfully, Scott Jehl is here to show us the way.

Ive had the pleasure of working with Scott on a number of responsive redesigns, and Ive never encountered a designer who possesses such a keen awareness ofand respect forthe webs fragility. And in this little book, Scott will share that expertise with you, dear reader, teaching you how to build nimble, lightweight interfaces that are ready for the webs volatility.

In the past few years of designing responsively, weve been learning to let go of our need to control the width and height of our layouts. Now, Scott Jehl shows us the next step: to build responsive designs in a responsible way, to ensure theyre ready not just for differently sized screens, but for the changing shape of a universal, device-agnostic web.

Lets go.

Ethan Marcotte

IN EARLY 2012, my wife and I rented an apartment in Siem Reap, Cambodia. She was volunteering at a childrens hospital; I was clocking in remotely to build websites with my Filament Group colleagues back in the United States. I worked this way for months as we traveled the region, passing through some of the most resource-strapped places in the developing worldLaos, Indonesia, Sri Lanka, and Nepal. Each stop offered an opportunity to use the web under the same, often constrained conditions that people who live there do. It tested my assumptions as a designer and my patience as a user.

Youve likely read that mobile services are the primary means of internet access for many in developing parts of the world, and my casual observations confirmed that. Glass cases displaying mobile devices Id never seen before filled street market stalls (and helped stock my backpack with test devices). But while seemingly everyone had an internet-capable phone, I was surprised at how frequently people used cell networks to connect other devices to the web. A prepaid SIM card and a USB dongle was the usual means to get a laptop online. So it was for me too.

Using the web this way was an exercise in patience. I wasted hours toggling between partially loaded browser tabs and hitting refresh to watch another web apps loading message spin atop a blank white page, eating away at the limited data I was allotted within my prepaid SIM card. As an advocate of best practices like progressive enhancement and responsive design, I would sometimes indulge in the thought that if only these sites had been built the right way, these problems wouldnt exist. But if I was honest, Id concede that many such best practices werent working as well as they could. Sadly, it appeared that the basic promise of access on the web is one we have yet to fulfill.

Im not the first to notice. A 2014 Wired article described several Facebook executives experience using their own service during a visit to Nigeria, where over 30% of internet users are on Facebook (http://bkaprt.com/rrd/0-01/):

We fired it up, and we wait and we wait It took a really long time. Even simple things like uploading a photothings most Facebook users dojust werent working. That was a pretty harsh experience for us. Wed been building an app for users like us. But we were the exception, not the rule.

We web developers tend to be an exceptional bunch. Our work demands fast, reliable networks to stream enormous amounts of data, and we have access to the latest, most capable devices. But while many of us work in relatively ideal conditions, we cant just build for users like us; we cant forget that for most of the world, the web doesnt function like this.

You may think, But thats not my audience. And you may be right, but consider that more of the worlds web traffic this year will come from cheaper, under-featured devices in emerging markets (http://bkaprt.com/rrd/0-02/). Even in some of the most developed regions, mobile connections are often slow, intermittent, and unreliable, as data plans become more expensive and limited. A quick Twitter search confirms that Londons notoriously bad cell service persists, and heck, I rarely get better than an ancient EDGE connection where I live in FloridaEDGE!

Accessing the web reliably and efficiently isnt a given for many of our neighbors, our users, our customers. As web designers, were well poised to improve this situation. I mention customers to emphasize that pushing for better access is not only an appeal for empathy, but also an opportunity to expand the reach of our services, making them more resilient for everyone.