Saturday, 31 January 2015

Ethan Marcotte - Responsive Web Design

fig 1.1: The canvas, even a blank one, provides a boundary for an artist’s work. (Photo by Cara StHilaire:

"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 isn’t 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. We’re creatures of habit, after all: as soon as we move into a new city, or start a new job, we’re mapping previous experiences onto the new, more foreign one, using them to gradually orient ourselves. And since the web is a young medium, it’s only natural to borrow some terms from what we know: graphic design provides us with a rich history that spans centuries, and we’d be remiss not to use its language to help shape our industry.

But our debt to print goes much deeper than language. In fact, there’s another concept we’ve borrowed, one we might not acknowledge all that often: the canvas (fig 1.1).

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 we’re one step removed from our actual canvas: the browser window, and all of its inconsistencies and imperfections "

" recent years, a relatively new design discipline called “responsive architecture” has been challenging some of the permanence at the heart of the architectural discipline. It’s a very young discipline, but this more interactive form has already manifested itself in several interesting ways.

Artists have experimented with surfaces that react to your voice with a music of their own (, and with living spaces that can reform themselves to better fit their occupants ( One company has produced “smart glass technology” that can become opaque once a room’s occupants reaches a certain density threshold, affording them an additional layer of privacy (fig 1.5). And by combining tensile materials and embedded robotics, a German design consultancy has created a “wall” that can bend and flex as people approach it, potentially creating more or less space as the size of the crowd requires (fig 1.6).

Rather than creating spaces that influence the behavior of people that pass through them, responsive designers are investigating ways for a piece of architecture and its inhabitants to mutually influence and inform each other."

This was his major influence when thinking about responsive design.

"...web designers, facing a changing landscape of new devices and contexts, are now forced to overcome the constraints we’ve imposed on the web’s innate flexibility.

We need to let go.

Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them.

In short, we need to practice responsive web design. We can embrace the flexibility inherent to the web, without surrendering the control we require as designers. All by embedding standards-based technologies in our work, and by making a slight change in our philosophy toward online design."

No comments:

Post a Comment