A response on responsive design

responsive

You may (or may not) have been hearing more and more about “responsive design”. I suppose it depends on how much you keep up with (or geek out on) design blogs. If you’re a designer or developer, I’m sure you’re well aware. If you’re on the client side, however, you may be less privy to what it means, or better yet-what it means for you. Anyway – responsive design is not a trend or a fad: At the risk of over-stating my case, it’s paradigm shift in how we design, build & interact with websites, and it ain’t going away any time soon.

So what makes a design “responsive”? It’s a fluidity to the style, content & layout of the webpage that responds – and adjusts – to the device, screen, or OS that is it being viewed on. Fluid or “liquid” layouts have been around for years: simple adjustments to the layout of a web page based on the size of the browser window. Or Flash-based websites where the entire site scales to the browser window size – for better or worse. Responsive design goes well beyond these simple layout shifts: In a truly responsive design, the layout repositions elements & content, resizing graphics, adjust font sizes, adding or removing content, all in response to the size & orientation of the end-user’s screen & device.

What does this mean for web creators? Several years ago, the biggest variation in presentation we were concerned with was screen size: was the end user on a laptop, or a 21″ monitor? Or maybe one of those phancy phones. We dealt with that by catering to the lowest common denominator, usually by keeping layouts small, and image use to a minimum, so as to not bog the user down with too much file bloat or unnecessary scrolling. Soon after, we started to create alternate versions for different user agents. We can sniff out what browser is being used, and serve up different skins of a site that are custom built for different devices. CMS’s make this easier by keeping content & presentation layers separate, so the same content can be used on each ported site. This is a fine, if imperfect, solution to the growing problem of device-saturation, even if it would become a bit of a loosing battle. What did we know? Everything was working fine and dandy, and all seemed right with the world.

Enter the iPad. This pesky (but wonderful) device really threw a wrench into the works. How to deal with this new medium? Too small for full sites, too big for mobile sites: far too many sites these days re-route their “mobile” skin to iPad users, largely because their sniffer can detect the iOS platform, and assumes that it’s a “mobile” device. Mobile sites are great for mobile phones, where users expect a streamlined, shortened experience. But iPad users expect a much richer experience – it’s a flat-out bummer to get a bare-bones mobile skin on your fancy iPad. But often a “full” site doesn’t quite work so well on the iPad: they’re just not optimized for that device. So then the next logical step is three separate sites: one for desktops & laptops, one for mobile, one for tablets. But what about different tablet sizes? What about rotating orientations? When will the madness end?

Today, the obvious statement is that there’s a dizzying assortment of devices, resolutions, screen sizes, orientations, bandwidths and interfaces that we need to create for, and it’s become clear that playing whack-a-mole with different device-specific skins ain’t gonna work much longer. This is where responsive design becomes our best friend: we can create just ONE site, one skin, and it will adapt to the numerous end user configurations, including those that don’t yet exist. This is a ‘fad’ worth embracing, as it’s sure to become more and more prominent across the web. This means we can think about our designs beyond static bounds, design for a truly fluid experience, and present our designs & content in the most dynamic and, well, responsive method available.

What about on the client side-why should all of this matter to you? For one thing, it’s no longer an option to cater to different end-devices: your users expect to get an optimized experience, regardless of how their accessing your website. Not providing them with an optimized experience will become just as offensive as the 30-second Flash intro used to be. This also means that your web team is probably talking to you about this, and you really should listen to them. They’re not just trying to churn more hours on your project…

We at ICS are working towards this end: we’ve been aggressively integrating this approach into our project work, and are ready & anxious to tackle the next big opportunity that comes our way. In the meantime, take a look at some impressive designs that respond wonderfully to different end-user environments (you can test them out simply by resizing your browser window on-the-fly, and watch how the content shifts & adjusts to each change):

www.bostonglobe.com – a celebrated example from local design shop Upstatement, a fantastic use of this technique to handle the challenging task of making a respected publications such as the Boston Globe feel at home across a variety of devices.

www.smashingmagazine.com – Smashing Magazine is a well-known resource for the web community; they recently relaunched their site in beautifully responsive fashion.

www.sasquatchfestival.com – Great design – awesome graphics (and amazing lineups!)

A seminal example of responsive design – on a posting that introduced the term “responsive design” to the world – back in 2010! Written by Boston’s own Ethan Marcotte, it’s well worth a read (or re-read): Responsive Web Design on A List Apart