Responsive Design: Sensors, Systems, And Actuators

Posted: 20 Aug 2012 05:30 AM PDT

I’ve been talking about various aspects of responsive design for a few months now and while there are plenty of topics that could still be covered, I thought it was time to wrap up this series and move on to some other things.

To conclude things I want to call your attention to an article by Mark Boulton, that could just as easily have started this series, a presentation by Brad Frost, and then briefly mention a few things that didn’t find their way into the series.

Chapter 5 from the Tao of Tai Chi Ch'uan: Experiences — Chapter 5 from the Tao of Tai Chi Ch’uan: Experiences

The Responsive Experience

Earlier this year Mark Boulton posted A Responsive Experience, which aimed to take a step back and abstract what it means to design responsively. He pointed out 3 things common to any kind of design that’s responsive.

sensors — things that sense the environment
systems — tell actuators what to do with sensor information
actuators — things that actually do stuff

Developers might recognize something of an MVC pattern in the above.

In our responsive websites, the browser is our sensor and css is our actuator. CSS, specifically media queries, are our systems. Most of the talk about responsive design focuses on systems and actuators.

What we need more of are the sensors. We need more ways to sense different conditions and contexts so we can better set up media queries to serve different css to those conditions and contexts.

As Mark points out our lone sensor is the browser and while it’s nice that it can easily tell us about screen size and orientation, color and resolution, it would be nice to know things like:

Network connection and bandwidth — is the connection wired, wi-fi, 3g, 4g?
Device capabilities — is the device mutli-touch? Does it have an accelerometer, a gyroscope, gps, a camera? What can the device do?
Context — is the user on the couch? On the subway? Walking down the street? Context is more than the device itself.

It’s unlikely we’ll know everything we want and some things that would be nice to know probably constitute an invasion of privacy, but at the moment, what we can sense is somewhat lacking.

We’re learning how to work with actuators and systems now. The future calls for more sensors. Responsive design is about changing something in the design in response to a change in the environment. At the moment we’re still limited in our ability to sense when the environment changes beyond a few simple things.

Beyond Media Queries: Anatomy of an Adaptive Web Design from Brad Frost

The Tip of the Iceberg

In his recent presentation “Beyond Media Queries” at An Event Apart Washington D.C., Brad Frost points out that responsive design is only the tip of the iceberg. Lurking beneath the surface are things like

feature detection
server side components
device apis
performance
conditional loading
content strategy
platform optimization

See slide 16 of the presentation above for a complete list.

The point is we still have a long way to go and that responsive design is only the surface. More is coming and if you aren’t yet on board you really should be. As I’ve said many times about responsive design, it’s ushering in a new way of thinking, a new approach, a new philosophy to how we design websites.

And it’s only just begun.

Leftovers

There were many more resources I collected while working on this series. The articles on the other side of the links below didn’t find their way into any of the posts, but I thought them interesting and so why not share them here.

These would have fit well with my post on typography and responsive design, except I didn’t come across them until Tim Brown recently pointed me to them.

And just to show that not everyone is on board, here’s one article from someone who doesn’t get it and a response from someone who clearly does.

For a Future-Friendly Web by Brad Frost

Concluding Thoughts

A decade or so ago when I first started designing and developing websites a big change was happening. The industry was moving from table-based layouts to css-based layouts. There were still more table-based sites out there, much like there are more fixed-width sites today.

It was clear then that it was only a matter of time before things would change and table layouts would fall into the minority. It’s only a matter of time now before fixed-width sites fall by the wayside and the web is dominated by sites designed to be responsive and adaptive.

The change to css driven sites was more than the change in technology. It revolutionized how we thought about sites and what we could do with design. The change today is no different. If anything it’s bigger. It ripples further away from the technology and toward the general design philosophy.

The technology is the easy part. Use relative measurements instead of absolute measurements and make larger changes based on media queries. It’s the change in the way you have to think about and approach web design that will take more time and effort to get right.

Responsive design will drag you into things that many have been suggesting you do for quite some time. It will get you to think mobile first, to think about a minimum viable design and then progressively enhance your design as it loads on more and more capable devices. You’re not going to have a choice. The industry is shifting and it’s up to you to join in now or get left behind.

The post Responsive Design: Sensors, Systems, And Actuators appeared first on Vanseo Design.