Responsive Web Design: Think Outside the Box... Literally

Facebook Twitter Google + LinkedIn

‘Boxed-in’ websites are on the way out, says Alan Rowe, ClickThrough’s head of web development. Responsive web design means marketers need to give more thought to the ways content is delivered to users – and stop thinking about the ‘box’ altogether.

You hear a lot of buzz-phrases bandied around in boardrooms – ‘blue-sky thinking’, ‘drill down’, ‘I’m giving 110%’. But the granddaddy of them all is ‘think outside the box’.

For those who’ve managed to dodge this jargon, it means to think laterally, unconfined by conventions and established ways of thought.

And for all its value, it’s undoubtedly overused. As you read this, someone is in a meeting somewhere, gritting their teeth as their boss says ‘we’ve got to think outside the box’. Inappropriately. For the 40th time in the last five minutes.

As web developers, we’re always looking for new, creative approaches to tackle obstacles. We don’t need a business mantra to remind us how to do that.

But when you’re working on responsive web design projects, you’ve got to think outside the box – in an entirely different way. If you don’t, the project’s doomed.

Most traditional websites are ‘boxed in’. They have fixed layouts because of rigid design procedures, or because the studio’s using an eCommerce framework, like Magento or IBM WebSphere, which restricts the layout by default (or ‘out of the box’, if you pardon further puns).

And for marketers, the traditional approach is to plan how to fill this ‘box’ with content. It’s like having a scaffold to hang the content from – you can happily stick an image here, and 200-odd words of text there, and be sure that nothing’s going to change. It’s fixed; it’s rigid.

Responsive web design changes all this. There’s no box, and no scaffold. At least not in the traditional sense.

Instead, the layout changes according to the platform it’s browsed on. It’s fluid.

(Try it out on our site if you like – change the size of the window and watch everything dart around.)

Responsive web sites look equally good when you’re browsing on a laptop, a desktop, a notebook, a tablet or a smartphone. And there’s no need to create a dedicated mobile version of a website.

This liquidity forces marketers to plan content more effectively. There’s no box to think within.

First and foremost, this means always keeping priority of information in mind. You’ve got to think about the information customers need to know, and how to quickly and effectively present this information, whether they’re sitting at a desktop or browsing on their phone on a bus.

This might mean making sure there’s a proper structure to web copy – a beginning, a middle and an end, if you will. By writing in this way, you’ll also benefit from correctly structured semantic HTML.

It could also mean that the order that information is presented in menu bars and columns is planned according to the device it’s being viewed on.

You might choose to use different graphical interface mechanisms for different devices, so menu tabs might be a good way of dividing up content for desktop users, but when viewed on a smartphone, the content might be better presented as one long scrolling page with a static menu.

And the content has to work for both display methods.

You have to evaluate every last nut and bolt in the presentation of content. And whilst this might mean more headaches for content producers, there are more important matters at hand – namely, those who actually experience your hard-worked-on design, coding and copywriting.

With good responsive design, the overriding concern is creating the best possible user experience – no matter how the user chooses to experience the site.

Marketers need to start planning for the next generation of online content delivery – from copy to product images, videos to interactive elements.

Responsive web design is killing the box. So don’t think outside the box. Forget the box ever existed.

Subscribe to our blog and get the latest industry-updates direct to your inbox