Ethan Marcotte - Responsive Design: Patterns & Principles

ETHAN MARCOTTE DIDNT INVENT responsive web design. He did something much more important: he named it. He observed what was, at the time, a sprawling set of nascent tactics and identified among them an underlying strategy which, once named, became not just a way of doing web design, but the way of doing it. In the intervening years, the phrase responsive web design has become one of the few entries in the industry lexicon to find widespread adoption beyond the field, demonstrating not only the soundness of the methods but also the clarity and persuasiveness of the phrase. I was speaking to a carpenter recently when he confessedunbiddenthat it was important to him that his website be responsive.

Thats the power of a great name.

Here Marcotte turns to words again, but this time to slay one: the page is dead. It was terminal the moment the first website came online, of course, but its been a long, slow decline, marked by many moments in which it seemed to have rallied. As recently as five years ago, when Responsive Web Design was first published, designing web pages was understood to be core to the job. Since then, a deceptively subtle transformation has occurred: weve abandoned pages for modular components, ditching that dusty metaphor from print days for an organizational system much more attuned to the shifty world of the screen. Like those before, this transformation requires that we evolve both our technical approach and our mental model for designing experiences on the webthat is, both the code and the language we use to talk about it.

Marcotte has you covered on both fronts. As with Responsive Web Design, this book describes a series of smart and efficient technical strategies that you can put to work right away. (And youd best do so quickly.) But it also suggests a compelling conceptual framework for thinking about a more modular web, leaving the page behind for good. With millions of devices and an impossible number of screens, its about time.

MandyBrown

My anxiety doesnt come from thinking about the future, but from wanting to control it.

HUGH PRATHER, Notes to Myself: My Struggle to Become a Person

THERES A TREE I want to show you.

This trees located in Pando, which youll find in Utahs Fishlake National Forest in the western United States ( FIG 1.1 ). (Its a mile or two south of Fish Lake, if you know the area.) And as you walk through Pando, searching for our tree, youll pass hundreds of stunningly beautiful aspens, their white bark smooth to the touch, their tops covered in puffs of gold in the autumn, or a deep, rich green in the warmer months. As lovely as these trees are, itll probably take you only an hour or two of wandering to wonder where this special tree is, and how it could possibly be more special than the thousands of other trees in Pando.

Heres the thing, though: Ive misled you, if only a little. Pandos not a forest: its a tree. More specifically, its a single quaking aspen.

FIG 1.1: Welcome to Pando, where were looking for a very special tree. Photograph by J. Zapell ( http://bkaprt.com/rdpp/01-01/) .

You see, pando is the Latin word for I spread. More scientifically, its known as a clonal colony: the trees around us are really just stems, each sprouting up out of one massive underground root system they all share. All told, Pando weighs some six million kilograms, and covers more than one hundred acres. Its age is a topic of some debatethe National Park Service suggests Pandos been around for over 80,000 years ( http://bkaprt.com/rdpp/01-02/ ), while some scientists put its age closer to one million years ( http://bkaprt. com/rdpp/01-03/ )but theres no question that Pando is one of the largest, heaviest, and oldest known organisms on Earth.

this is, I promise, a book about responsive design.

I love this story not just because of its details, but because in recent years, weve started to see web designs forest for its trees. With the explosion of mobile computing, we realized that our desktop-centric view of the web was entirely too narrow. Our smaller screens reminded us that the web is the first truly fluid design medium: one that can be digested on nearly infinite combinations of browsers, display resolutions, input types, and device classes. Responsive designfluid grids, flexible images, and media queries working in concertcan shape the webs flexibility in useful, beautiful ways.

Some time ago, Paravels Trent Walton described his process of coming around to responsive design: how hed transitioned from eyeing flexible layouts with skepticism to designing some of the loveliest responsive sites on the web. In his essay, he relates that transition beautifully( http://bkaprt .com/rdpp/01-04/ ):

Youll probably notice that Trent says a new kind of control, not less control, which I love. He suggests that the flexibility inherent in responsive designor heck, the flexibility at the heart of the webdoesnt mean you have to sacrifice control, aesthetics, or narrative. And the last few years have proven that point handily: from nonprofits to publishers and corporations to governments, the web has seen an explosion of stunning responsive sites, accessible to people no matter how small (or large) their screens might be ( FIG 1.2 1.5 ).