Cambridge responsive website design

May 2014

Responsive website design (RWD)

Responsive website design (also known as RWD) and not to be confused with mobile websites, is an approach to the website design aimed at delivering the best visitor experience including maximum readability, simple navigation with minimum resizing, panning and scrolling, across a wide range of device types from desktop and laptop computers, to tablets and smartphones.

Why do I need a responsive website?

For any type of website today we can assume that visitors might be browsing from their home or office, on the move, from a train, in the park, at the beach and one day from the air, and will therefore be using a multitude of devices to access your website. The objective of RWD is to ensure that the browsing experience from any device is a positive one and that relevant information can be obtained quickly regardless of device type/screen size.

A good example of where RWD can be really effective is an online shop, whereby on a monitor or laptop you might choose to display 12 products at a time, on a tablet 6 products and a smartphone 1 or 2 for category listings for example. RWD gets better than this however, it might be suitable to exclude some content from smartphone displays, even changing the website navigation so you see a different list of pages on each device, but it’s all centrally managed from one location and really is only one website displayed differently depending ultimately on the screen size (we call this viewport size).

What we’re trying to achieve with RWD is visitor satisfaction, looking at a non-responsive website from an iPhone for example is absolutely possible but using a tiny navigation to browse a shop can be a nightmare, so a mobile optimised route would be much better.

On touchscreen phones and tablets we can use wipes and gestures to navigate around content seamlessly, but these actions don’t work on desktops. Likewise traditional drop down navigations can be incompatible or a nightmare to use on smaller devices.

I’m already happy with my website!

That’s fine, it’s possible to retrospectively apply responsiveness to any website, it’s ultimately just a little additional code – some websites make this process easier than others, but we can easily take a look and find the answers. To add responsiveness to a new website development project, it should only be another 5% to 10% max to the design and build costs.

We always advocate that if it’s not broken, don’t fix it, so adding a little responsiveness should neither require starting again or unnecessary expense. The most challenging element of an after-market addition of some RWD is planning how your content is displayed, what content is displayed and the best ways to achieve a friendly user experience.

So is RWD worth the effort?

If you value your website visitors and want to make your website as effective, engaging and easy to use as possible, RWD is a must. Mobile browsing usage increases year on year and there is no sign of that changing in the foreseeable future.

What about apps?

Apps for specific platforms are great, but can be costly to build and maintain, and you often end up with disparate systems. A responsive website is one website, one set of code, one set of content that just displays differently. Having an iPhone app and an Android app doesn’t help Blackberry or Nokia users; means two sets of code and content, two delivery methods, but most importantly requires the user to install the application… This is of course fine for an engaging game, useful demo or tutorial, or for when offline content is required, but a big turn off otherwise especially for standard business, product or service information.

And what about mobile websites?

Similar to apps in many respects, mobile websites are a different set of code although can be generated from the same content as the ‘main’ website.RWD is an evolution of mobile sites.

Think about it!

You provide a specialist b2b service, a potential customer is on the train, what won’t they need?; heavy downloads, complex forms, Flash animation, brochures, complicated navigation, press release archive etc. In brief, deliver relevant content, no more – visitors should always be able to access the desktop site if there is something they desperately need…