25th February 2012
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:
- Sensors: This is your thermostat. It measures the temperature.
- Systems: This is the software in your thermostat, or on your boiler, that you can programme.
- 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:
- Sensors: This is the browser
- Systems: This is our CSS — specifically the @media declarations
- 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.
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.
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.
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 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.
Jordan is a web designer passionate about responsive web design and content choreography. He as a penchant for typography having worked previously with the Typecast team.
He writes occasionally for .net Magazine and Smashing Magazine and currently works for Eyekiller in Bangor, Northern Ireland. You can follow him on twitter @jordanmoore
Available for freelance projects in early 2014