Ethan Marcotte - Responsive Web Design

Something there is that doesnt love a wall...

Robert Frost , Mending Wall

As I begin writing this book , I realize I cant guarantee youll read these words on a printed page, holding a tiny paperback in your hands. Maybe youre sitting at your desk with an electronic copy of the book up on your screen. Perhaps youre on your morning commute, tapping through pages on your phone, or swiping along on a tablet. Or maybe you dont even see these words as I do: maybe your computer is simply reading this book aloud.

Ultimately, I know so little about you. I dont know how youre reading this. I cant.

Publishing has finally inherited one of the webs central characteristics: flexibility. Book designer and publisher Craig Mod believes that his industry is quickly entering a post-artifact phase (http://bkaprt.com/rwd/1/), that the digital age is revising our definition of what constitutes a book.

Of course, web designers have been grappling with this for some time. In fact, our profession has never had an artifact of its own. At the end of the day, there isnt any thing produced by designing for the web, no tangible objects to hold, to cherish, to pass along to our children. But despite the oh-so-ethereal nature of our work, the vocabulary we use to talk about it is anything but: masthead, whitespace, leading, even the much-derided fold. Each of those words is directly inherited from print design: just taken down from the shelf, dusted off, and re-applied to our new, digital medium.

Some of that recycling is perfectly natural. Were creatures of habit, after all: as soon as we move into a new city, or start a new job, were mapping previous experiences onto the new, more foreign one, using them to gradually orient ourselves. And since the web is a young medium, its only natural to borrow some terms from what we know: graphic design provides us with a rich history that spans centuries, and wed be remiss not to use its language to help shape our industry.

But our debt to print goes much deeper than language. In fact, theres another concept weve borrowed, one we might not acknowledge all that often: the canvas ( FIG 1.1 ).

FIG 1.1 : The canvas, even a blank one, provides a boundary for an artists work. (Photo by Cara StHilaire: http://bkaprt.com/rwd/2/)

In every other creative medium, the artist begins her work by selecting a canvas. A painter chooses a sheet of paper or fabric to work on; a sculptor might select a block of stone from a quarry. Regardless of the medium, choosing a canvas is a powerful, creative act: before the first brush stroke, before striking the chisel, the canvas gives the art a dimension and shape, a width and a height, establishing a boundary for the work yet to come.

On the web, we try to mimic this process. We even call it the same thing: we create a canvas in our favorite image editor, a blank document with a width and height, with dimension and shape. The problem with this approach is that were one step removed from our actual canvas: the browser window, and all of its inconsistencies and imperfections ( FIG 1.2 ). Because lets face it: once theyre published online, our designs are immediately at the mercy of the people who view themto their font settings, to the color of their display, to the shape and size of their browser window.

FIG 1.2 : The browser window, our true canvas. (For better or worse.)

So in the face of all that uncertainty, that flexibility, we begin by establishing constraints: we set our type in pixels, or create fixed-width layouts that assume a minimum screen resolution. Establishing those constraints is a bit like selecting a canvasthey give us known parameters to work from, certainties that help quarantine our work from the webs inherent flexibility.

But the best thingand often, the worst thingabout the web is that it defies easy definition. If I was feeling especially bitter, Id even go so far as to say it revels in its ability to shrug off whatever constraints we place around it. And the parameters we place on our designs are no different: theyre easily broken. If a browser drops even slightly below our expected minimum width ( FIG 1.3 ), a sites visitor might find her reading experience is altered by a horizontal scrollbar and clipped content. But our businesses and clients could be affected as well ( FIG 1.4 ): by relying on a minimum screen resolution, the placement of critical links or elements can be incredibly fragile, clipped by a viewport that obeys the users preferences, not ours.

FIG 1.3 : Deviating slightly from our ideal parameters can negatively impact the user

FIG 1.4 : or our businesses and clients. (Whats a reg, you ask? Thats the Register Now link, hidden from view.)

Fasten those seatbelts

Over a decade ago, John Allsopp wrote A Dao of Web Design (http://bkaprt.com/rwd/3/), an article that, if you havent read it, you should absolutely check out now. (Seriously. Ill wait.) Its easily my favorite essay about designing for the web, and its just as relevant today as it was when it was first written. John argues that