Responsive Design & Why You Need It

The web design industry follows (and sometimes leads) the functionality available in the mobile devices that show the websites we design.

So, with the increasing importance of mobile devices of all sizes over the last few years, we've had to respond with a better user experience for website visitors. Enter responsive design.

By mid next year there will be more internet traffic to mobile than desktop devices. So more pages will be delivered to tablets and smartphones than to laptops and desktops.

The mobile user's experience is therefore a massive consideration and shouldn’t be ignored.

So what would these users see if we did nothing?

They'd see your site optimised for desktop viewing. Imagine the site as an A3 drawing that they download and then view through a phone screen size window. They'd see the whole site and could zoom using gestures to read the content. A smartphone can view basically all of the web pages intended for desktop browsing but the experience is a little 'clunky'.

It takes longer to download the A3 size of a site than a business card version, so it would take longer to download and take more 3G allowance.

The user experience requires lots of action form the user … pinching, zooming and navigating their way around the site takes a lot of effort. Effort is something we'd like to take away from a potential customer – we don’t want to make buying from us hard work.

Why is Responsive Design Different?

With a responsive layout, there are generally (at least) two additional website layouts; one optimised for tablets and one for smartphones.

As they are designed for mobile, the layout, content and images uses the full screen of the device and no more. So no scrolling and no wasted time or bandwidth downloading extra-large images that can’t be viewed on a tiny screen.

Can Content be Simplified?

There are a few options here...

The full content, optimised for mobile

This is the route we take most often. Simply prioritise the elements of each page in viewing order and show all the contents of the main site in the mobile device. It's optimised for mobile because the images etc are all smaller sized so fit perfectly in the screen and don't waste bandwidth or time waiting for the desktop version to download.

The advantage of this option is that the user experiences a mobile optimised site but has access to the whole of the content.

All the website pages with reduced content

With this option all the pages and therefore the structure of the site remain intact but the less important elements of the content of each page are identified and edited out.

The advantage of this is that the site is more compact and even quicker to load and certainly quicker to read, but access is retained to all areas of the content.

Reduced navigation and edited content

This option has a reduced page count from the desktop version and edited pages, it is much more bespoke a user experience for the mobile user.

Custom User Journey

The last option is a totally bespoke experience that is completely different for each device, useful if the user has a different need on mobile. There are actually few examples of where an app wouldn't be a better option here.

Article written by Gary McCarthy
Gary McCarthy
Managing Director
Article added 30th October 2013