Jordan Moore UX & Interaction Designer

Sensors for Responsive Web Design

February 25, 2012 in responsive web design sensors

You probably heard about a little event in London this week called Responsive Summit - the brainchild of Josh Brewer and my work colleague Chris Armstrong. What started out as an informal chat between the two a week earlier ended up as a bigger discussion between more colleagues including Mark Boulton, Paul McKeever, Dan Mall, Paul Lloyd among others and of course the web community via Twitter.

One of the discussions that particularly interested me was initially mentioned by Mark Boulton before the event even began. He explains the properties of what makes responsive web design:

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

Using @media queries, the browser detects the width. The browser is the thing that is sensing here.

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.

(via A Responsive Experience - The Personal Disquiet of Mark Boulton)

I would add that the browser has a few other sensors along with detecting the viewport width that we can make use of for designing responsively.

Geolocation

We could perhaps use geolocation as a way of detecting movement1. If a person is constantly moving, that’s a pretty clear indicator that they are travelling. We could better shape their experience by responding to their situation at that point in time.

Time of day

You may be aware of Liz Danzico’s lovely Bobulate. During the day you will be served a stylesheet that has dark text on a white background, after sunset you will be served a stylesheet that has light text on a darker background to reduce glare and enhance the reading experience. This is responsive web design - the page shapes the experience for you at that particular point in time.

Reading distance

Reading distance2, for me, is the golden ticket. We don’t have a sensor for this yet. If we could sense how close or how far a reader is from the screen, we could let the content respond appropriately - think reading on a mobile device, sitting stationed at a desktop machine or relaxing and reading the web on a TV from the comfort of your sofa.

Mark Boulton is right, we do need more sensors. Geolocation and time are two small sensors that could help us in little ways to learn a bit more about our reader beyond changing their layout based on their screen size.

We’re capable of so much more.

(via A Responsive Experience - The Personal Disquiet of Mark Boulton)


  1. I am not sure how ethical this is. Although if we are just using it to see if someone is on the move or stationary then I wouldn’t have a problem with it. 

  2. Tim Brown had an excellent quote on this, I can’t find it or recall it word-for-word. I’m sure it’s here somewhere

Biography

I make cool things for the web for Eyekiller most days, the rest of the time is spent with my family and cycling Ireland's hills and coasts.

My interests lie in the areas of responsive web design and helping create good typography for the web.

Ambassadors