Tim Fidgeon

Responsive Design – A Clear Definition

21 October 2012, Tim Fidgeon

Responsive design needs to be clearly defined. For most projects, mobile phones will justify their own version of content (that has more than only layout differences from the desktop-version).

Responsive design – what does it actually mean?

“Responsive design” is one of those awkward phrases that sounds simple, but can actually mean very different things to different people. As with so much else in digital marketing, “responsive design” is a cool buzz-word that needs to be clearly defined at the beginning of any conversation.

Otherwise, there’s every chance that you’ll find yourself knee-deep in an argument about ‘responsive design’ before you realise that everyone is actually talking about slightly different things!

Responsive design definedSo, what is “responsive design”?

Wikipedia defines it as “an approach to web design in which a designer intends to provide an optimal viewing experience…across a wide range of devices (from desktop computer monitors to mobile phones)”.

Taken at face value, that definition seems to articulate a perfectly sensible idea that no-one could possibly disagree with. There is, however, a hidden complexity within the definition.

Layout changes only – one view of responsive design

Some people would, for example, insist that “responsive design” should only allow a site to change its contents’ layout between different devices. For example: if a website only changes the layout between its desktop and mobile versions, then every single screen element that was on the desktop version (adverts, images, navigation, etc.) should also be present on the mobile-version.

The main attraction of this model is the potential for significant cost savings, due to only having to maintain a single version of an organisation’s content.

Boston Globe - responsive design

Example taken from: http://designmodo.com/responsive-design-examples

Custom content – an option for responsive design

Other people would, however, argue that responsive design should involve providing content that is as appropriate for the user’s device as possible – and that this will sometimes involve removing and/or adding material (i.e. more than only layout changes).

This becomes particularly clear when we discuss designing for mobile phones. Mobiles phones present numerous distinct challenges for any designer, including: small amounts of screen space, display issues (glare, reflections and poor lighting), slow download speeds, ideal touch target sizes, handling orientation changes, gesture support and minimising users’ data input.

Amazon responsive design

Amazon recognises the importance of designing a site especially for mobile.

A practical approach to responsive design

In our experience, most people would agree that it makes little sense to limit the desktop-version of a site to only that amount of information which can be comfortably presented on a mobile phone. It would also seem equally strange to force a mobile phone to display all the information that could comfortably fit onto a desktop.

As soon as one accepts that one might sometimes need to add or remove content for different devices, then one has departed from the strictest interpretation of ‘responsive design’.

It is, therefore, very important to define “responsive design” at the outset of a conversation because it forces one to explicitly confront the issue of whether different devices need to get different versions of the site. If we agree that this makes sense to do, then we can begin to plan for it in a structured and meaningful way.

Tim Fidgeon is one of the UK’s leading trainers in online usability and currently leads Emarketeers Mobile Usability & UX Training Course.