What is Responsive Design?

Wednesday, March 26, 2014

What is Responsive Website Design?

To design a ‘responsive’ website is to create a website, which, on all devices, delivers the exact same experience. That means the same content – copy, images, video, navigation, functionality – is available in the same fullness, the same completeness, no matter how you’re accessing it.


Why go Responsive?

Responsive design was a solution borne out of the increasing demand for mobility from the internet; people go online on their phone, just as they do on their tablet, just as they do on their laptop, just as they do on their desktop pc – you know the story. The fundamental difference this mobile shift has brought about for web designers and website owners is (hopefully) a new consideration for the size of the screen their online offerings are being viewed on. Pertinently, the question floating around these circles is this: why would you ever want to limit someone’s access to an experience or information, just because they’re using a different mode of accessing that information? Responsive design is all about letting a website user choose what they want to view and consume and exactly the way they want to do it, rather than the other way around. The old-school way of thinking is that mobile users want ‘less’, or a ‘limited’, ‘minimised experience’. If you can design an experience that works great across one device the same as it does another, why wouldn’t you? Why wouldn’t you meet the demand with the utmost openness and flexibility?


How does Responsive Design work?

With responsive design – different from having a desktop site and then a mobile site, as is the old paradigm - your content and page elements reconfigure on the page to fit the size of the screen they’re being viewed on. The mobile version – or ‘mobile view’, more accurately - will have all the same content as the desktop version, but it will be presented in a way that takes mobile phone experience into account. The larger presentations of the website – desktop and tablet – will be designed with elements (buttons, links, etc) that are ‘tapable’ (and so are friendly for touch and smaller devices) but that simultaneously don’t detract from the larger screen-size experience. This is why, you may have noticed, websites these days are starting to look a bit like mobile apps writ large.


Responsive versus Adaptive

Some people confuse ‘responsive’ with something called ‘adaptive’ web design. Adaptive is designing a different mobile experience, tablet experience, and a desktop experience from the same website management system. So instead of one design serving all, it's one website, serving three (or more) differently built designs. It’s more restrictive than responsive in that you have to design and cater those designs to as many devices as you can think of (in a sea of multiplying devices). With adaptive, too, you're left to make some sort of guesswork as to what each device type wants from the website experience, instead of (with responsive) having everything available to everyone who wants it.


Responsive Design: Case Study Us

To use an example that you can see the actual results for, let’s look at the bank site (and this blog!) - why did we decide to go responsive?

Well, selfishly, instead of editing a desktop AND a mobile website, we liked the prospect of having only to update one website, in one place, at one time: we liked that ‘one source of truth’. The end-user benefit of our choice is fundamentally that information is a lot less likely to be reported incorrectly by us. And too, as we’ve mentioned above, the experience will be made of all the exact same components and information, no matter how it’s accessed.

Previously, too, our mobile features on the bank website weren’t as advanced as those on the desktop version (nor was our desktop version optimised for tablet), so we were limited in our content strategy by what features had been built exclusively for mobile pages. Design elements aside, our old mobile site was always more of a ‘shell’ site; very basic and didn’t really contain any product information. You could get through to the full desktop site on a mobile device, but the experience was a tiring pinch-and-zoom endeavour. 


Motivated by our audience

What we realised after looking at our analytics on our old site, was that 15% of visitors were indeed browsing the full website on mobile devices; they were choosing to leave the old mobile site, and do their best with something that didn't fit their screen. Since going responsive, we already have around 24% of visits coming from mobile devices, and we can safely say that the customer experience we’re providing now is a far better one than previously, and we can see also that those numbers are growing.

Search engine optimisation was also critical in our decision. By having a responsive website, we have now started to rank in mobile organic search, which brings in a different type of traffic to our website. We can also bid on paid search (SEM) on mobile devices, and we pay less than we would if the site wasn't optimised to mobile.

We liked it so much that we decided to make our enquiry forms and applications responsive too – enabling people to enquire about home loans, term deposits, business banking, and apply for transaction and bank accounts, same as they would on any other screen size. If someone is commuting home on the train and they want to find out about a home loan before they go house hunting on the weekend, then they shouldn’t have to wait until they’re home before they can reach out. 


Looking forward

But it’s not just about ease for our business. We had to think about what customers would want to do and where and on what devices going forward. Mobile is big. Remember the Motorola Startac flip phone with green display screen and no camera that was the coolest phone on the market back in 1996?

Fast forward to present day, and a recent Google study has revealed that 65% of adult Australians own a smartphone, with 68% of them saying they would research a product or service on their phone. How would this impact your business? Why not make it easier for your existing and prospective customers to find information about your business while on the device of their choice? From improvements in customer experience, to mobile SEO results, to increase in traffic overall, we’d say that it was definitely worth the extra design and development effort up-front. 


How do I start?

My advice is that you need to think about what development resources you have, and what kind of content you have. What are your customers doing on different devices? Do they multi-screen (ie watch tv while browsing on their tablet, and looking at Facebook on their phone)? What do your customers want to do on different devices? Thinking backwards, if that’s too hard to quantify – do you have ads running on tv that could be actioned/researched online? If so, wouldn’t you love that couch-sitting tablet holder to right then and there check out your offer?

First, figure out your content strategy and ultimate experience for each segment on each device. Have a talk with your developers. Get a designer on board who understands user experience design and responsive user interfaces. If you have a designer that can code, then that’s a bonus, as they’ll be able to help ‘translate’ how the design elements need to be coded in the responsive style sheet.

Also, design your homepage last. It will be the highlights reel for everything that sits further down in the site, and you will have learned a whole lot about creating a great responsive experience by the time you get around to it - save the best for last.