Since I saw Ethan’s talk in An Event Apart in Seattle 2010, I’ve been thinking a lot about Responsive Design. Not just the layout techniques Ethan gave name to and wrote the book on: fluid grids, plus media queries and flexible images, but taking a step back from that into the field of responsive architecture and abstracting that into responsive design in general.

Responsive Design is everywhere

As I discussed in my talk at New Adventures Conference last January, Responsive Design is comprised of three things:

  1. Sensors: Things that sense the environment (not the weather, but the stuff around it - whatever it is)
  2. Systems: A system that takes the information from the sensors and tells the actuators what to do.
  3. Actuators: The things that actually do the moving. The motors, the CSS, the cables.

A simple example of this is your central heating. Mapping central heating to those three:

  1. Sensors: This is your thermostat. It measures the temperature.
  2. Systems: This is the software in your thermostat, or on your boiler, that you can programme.
  3. Actuators: This is the thing that turns your boiler on or off.

This is a responsive design system. Now, looking at web design, let’s try and map Responsive Web Design to it:

  1. Sensors: This is the browser
  2. Systems: This is our CSS – specifically the @media declarations
  3. Actuators: This is our CSS too – specifically what falls within our @media queries

You see, in the browser world, it’s not so cut and dry. Using @media queries, the browser detects the width. The browser is the thing that is sensing here. The system – the bunch of rules that tell the actuators to do something – they live in our @media queries. At this width, do this. The actuators are also in our CSS. They are the ‘this’ in the previous statement. eg. At this width, make this button blue. System > Actuator.

For the past year or so, we’ve been getting to grips with the Actuators and the Systems through using CSS and Javascript. What’s proving difficult, is the Sensors.

More sensors, please!

At the moment, all that we can do reliably (well, fairly), and knowably, is use the browser as our single sensor by which to sense. We have one sensor. We need more. Just for a moment, let’s consider what would be useful information for us:

  1. Network infrastructure
  2. Device capabilities
  3. Screen size
  4. Context
  5. Content

If we could have sensors that could detect if you are browsing on a particular browser, could detect what screen size, network and context – eg. on your couch, on a train in a certain geo-locale – we’d be going in the direction of Responsive Architecture and Responsive Design generally. As it stands –– and this is fine for now –– we’re changing layouts based on a screen size. We’re capable of so much more.

Now, am I talking about device specificity? Is this the browser detection days gone nuts? I don’t think so. I’m not talking about deviating from standards here. I’m talking about having better tools to monitor the browsing environment, whatever that is.

A Responsive Experience

Responsive Design (the field) changes a thing because of the environment. Responsive Web Design currently changes a layout because of the environment. I think Responsive Web Design will grow into a practice of changing an experience because of the environment. That means: content, layout, behaviour, perception, brand, feel. All of those things are open for change if we have a good set of sensors, and the right actuators to to create them. Our job will then be focussed on designing the systems knowing that all this good stuff is in place.

It does feel that at the moment, we’re very preoccupied with the component parts of responsive design: how do we sense the environment the user is browsing in,? How do we create a system to change the layout? What’s the CSS to do those changes?

That’s all OK. This is still new.

Over the past year, Responsive Web Design has quite rightly shifted the web standards based design community to a new way of thinking. It’s not really just a layout technique. Responsive design –– if you consider the above sensor > system > actuator components –- is a much broader, holistic practice. It involves every step of the design process in determining the outcomes of the actuators, or defining the sensors and then designing systems around those inputs. The whole thing is involved.

I think we’re at the start of this for web design. This is exactly some of the pain we’re feeling with Responsive Web Design workflow right now. And it’s encouraging we’re seeing a focus on techniques and tools to create better sensing, better systems for controlling more sophisticated actuators. However, I’d love to see more joined up thinking. How does Responsive Design effect our content? Our messaging? The story? How can we shape better experiences by using these simple inputs and outputs?

Responsive Web Design is just the start of us challenging and rethinking our perception of what the web could be. We used to think it was like newspapers. Or computer programmes. Now, we’ve had a glimpse of a web that understands us and can adapt to our needs. That could either be incredibly exciting, or bloody terrifying!