Responsive Design

Content is Like Water

“The English architect Christopher Wren once quipped that his chosen field ‘aims for Eternity,’ and there's something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence.

A building's foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. Working on the web, however, is a wholly different matter. Our work is defined by its transience, often refined or replaced within a year or two…

Recently, an emergent discipline called ‘responsive architecture’ has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room's temperature and ambient lighting as it fills with people. Companies have already produced ‘smart glass technology’ that can automatically become opaque when a room's occupants reach a certain density threshold, giving them an additional layer of privacy.

In their book Interactive Architecture, Michael Fox and Miles Kemp described this more adaptive approach as ‘a multiple-loop system in which one enters into a conversation; a continual and constructive information exchange.’ Emphasis mine, as I think that's a subtle yet powerful distinction: rather than creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can—and should—mutually influence each other.”

—Ethan Marcotte, A List Apart: Responsive Design.

The Responsive Web

  • What?
  • changes with window width / height
  • changes based on device or orientation
  • changes based on browser
  • content is like water: takes the form of its container
  • Things to Consider:
  • native functionality
  • showing / hiding content
  • hover states unavailable on touch devices
  • load times
  • How?
  • flexible grid
  • stacking items
  • scaling images
  • cropping images
  • simplified navigation
  • less nav Items
  • collapsed nav / hamburger menu
  • Type size adjustments
  • Why?
  • SEO / findability
  • engaging
  • bigger audience
  • user can focus on content
  • legibility
  • accessbility
  • changing technology
  • load times (images, scripts, videos, etc)
  • Why Not?
  • strict design control
  • don't feel the need to accomodate mobile
  • security
  • Adaptive
  • separate mobile & desktop sites
  • sometimes you can choose
  • remove content instead of hiding helps load times

Execution

  • Native Responsiveness
  • Use responsive units such as ems, percentages (%), and viewport height (vh) and viewport width (vw). These units can either respond relative to their parent element or to the browser window as a whole.

Examples