Recently, web designers have rallied under a new banner: ‘responsive web design’. The term coined by Ethan Marcotte and popularised by his book of the same name has caused something of a renaissance as to how we view the web. We always knew it was capable of fluid designs and that it wasn’t the same as print, but only now are we beginning to discover the full potential of what it means to make a website.
What is responsive web design?
A brief primer for the uninitiated: responsive web design is about shifting, omitting or adding content depending on the size or orientation of the display. For an example of this—and one of the first to do it before it had a name—was the ever-brilliant Jon Hicks. Resize your browser window and see how the columns remove themselves, the navigation re-positions itself, the logo scales proportionally; in short, it’s beautiful. To achieve this, Jon uses CSS media queries which are surprisingly well established.
So responsive web design, from a non-technical perspective, means more websites will be better optimised for your screen real estate than before as more designers use it. My real aim, though, is to talk to you about a lesser-talked-about technique that I believe falls under the same banner.
Increasingly, sites will drop the navigation bar to follow you down the page. A couple of examples are TechCrunch and Creep Fest. I was trying to think of a name for this technique and did think context-aware browsing summed it up quite nicely, it knows where you are on the page and reacts accordingly until it dawned on me: This is another example of responsive web design!
- CSS media queries have a wide, standardised implementation. Even if the mobile browser you’re using doesn’t support it, it will support percentages in your CSS, so, if you’re using a grid system, simply drop
80%and you’ll have a fluid website at least.
- Your site will be more accessible to mobile device users. We know there are large shifts away from desktop usage and offering a streamlined experience, I believe, is a big part of that. Mobile users generally have different priorities to desktop users. On the B&W Meet website we decided that people would be looking for a map and location details so we made this a priority on the small-version of the site.
- Platform agnostic. It doesn’t matter if you’re using a Symbian browser or the latest Mobile Safari, it’ll behave the same lending itself to the “write once, deploy everywhere” paradigm.
- You have full control over the content positioning. There is no ‘magic’ attached to this, you simply use pure CSS to position content as you would in any other site.
- ‘The full experience’. Some believe that by providing an optimised view, that they are missing out on important content. Sometimes, this is the case; someone may make an editorial decision and decide that some content is superfluous for mobile users. I’m not convinced these people are using responsive web design ‘correctly’. It’s all about giving as similar experience as possible and prioritising content, not losing out on it.
I believe this age of Responsive Web Design will see innovators playing with not only websites that respond, but online UIs too. Mobile users have different needs and priorities to desktop users and I believe many conventions can be taken from native mobile apps in this sense by taking these considerations into account. Next time you’re browsing TechCrunch or any other responsive website, ask yourself, ‘does this benefit me?’ and if so, ‘how’s it done, could it be executed better?’
Got any good or bad examples? Let us know!