Is that a dictionary in your pocket or a responsive website?
If your website isn’t responsive you’re throwing away valuable customers like yesterday’s newspaper. Even if it is mobile friendly, are you really looking after your visitors? Read on for some frank advice about your responsive website.
What is a responsive, mobile-friendly website?
If you’ve finally upgraded from using smoke signals to this little thing we call the Internet, you may have heard about something called Responsive Web Design. Coined in 2010 by Ethan Marcotte, Responsive Web Design is a design and layout technique that adapts a website’s content to the device it is being viewed on for optimal ease of use. In other words, it makes a website usable on desktop computers, notebooks, tablets, and smartphones.
Do I really need a responsive website?
- Do you own a smartphone?
- Do your customers own a smartphone?
Yes. Can I move on now? No. Okay here are some statistics that might work for you. Research released by Smart Insights show that 20% of all Google searches are done on mobile devices and over 25% of emails are opened on mobile phones. Google also announced that their search algorithm prefers responsive websites - tagging them with ‘Mobile-friendly’.
According to a recent press release by Horizon Research Limited, nearly 80% of New Zealand adults will have a smartphone by this time next year. Furthermore, almost 90% of professionals own a smartphone, and some of them are possibly using it to browse your website right now.
Be honest, are they really getting the experience they deserve, or are they pinching, zooming, and floundering around on your poorly designed, non-responsive site, screaming obscenities into the shiny, bullet-proof glass? Say goodbye to that customer, they won’t be back.
Okay I need a responsive website, can’t we just resize my current site to fit on a phone?
Okay here’s where the title of this post is going to make sense. The Oxford English Dictionary has around 220,000 words in it. If you had to take the entire dictionary and make it so it would fit in your pocket, simply reprinting the dictionary in a physically smaller size would create something the right width and height, but it’d be so thick you’d never fit it in the boot of your car, let alone your favourite pair of faded jeans with rolled up cuffs. Instead, you need to look at what a user of a pocket edition dictionary really needs; a concise summary of the most used or misspelled words used in the English language that when printed would be just thick enough to fit in a pocket.
I know, it seems obvious right, but lets dive a little deeper.
Your visitors are using a mobile device for a reason
Read that subheading again. Now go back and read it once more. That’s right, that Mr or Mrs 90 percentile professional is visiting your website with their smartphone for a particular reason. Find out what that reason is. I know it sounds obvious, I know it sounds stupid, but honestly go out there and ask them. You might be surprised by the result. Pull out your clipboard, swagger up to your favourite customer and ask them;
what do they need your website to do for them on a smartphone,
why do they need to do that particular thing, and
how can you give it to them in a way that makes the most sense.
For example, if you manufacture building materials, chances are that visitors viewing your site from a smartphone are either confused builders on a construction site wanting to know how to install your product, or flustered consumers in a supply depot checking that your product will solve a problem that they are having. Offering them a site where they have to download and flick through your latest image gallery or read the history of your company is going to cause them to abandon your website (and possibly your product) in frustration. And of course, if your site isn’t responsive in the first place, those customers are definitely dust trails winding into the sunset.
For your responsive website to be effective, you need to understand why your customers are using a mobile device to view your website and identify what they need, why they need it, and how you can give it them.
So you’re saying I need to rebuild my whole website to be effective for mobile devices?
Ah, the age old question, to rebuild or not to rebuild. Of course the web developer in me screams, ‘yes, this is what I do, why are you even asking’, but the real answer is: it depends.
Your visitors are viewing your site on a mobile device for a reason. You know what that reason is (its written on your clipboard remember). You’ve even got some ideas how to help your visitors get what they need (that clipboard sure did come in handy). If the structure, order and content of your site would need to change significantly to satisfy those needs then there is definitely a strong case to rebuild your website.
Rebuilding your website gives you chance to really focus on the different needs of your visitors and create the most effective experience for them that will lead to higher conversions. The value of this approach far outweighs the cost involved - the return of investment on a well designed rebuild can be orders of magnitude above simply creating a mobile-friendly theme for your site.
However, if the needs of your visitors don’t vary too much between what they require from a desktop site and a mobile site, retheming your website is probably the best option. Retheming is where you leave the general structure and content of your site in place, but alter its presentation to flow comfortably across different sized screens. Its usually a much quicker and simpler process than rebuilding, but still requires careful consideration of the needs of your visitors. In the case of a retheme, utilising a responsive framework such as Bootstrap or Foundation can get your responsive website up and running much faster, with higher quality and stability than starting from scratch.
Check out Tom’s upcoming blog post on how we use our own custom Bootstrap setup for rapid retheming of Drupal CMS websites.
Its all about responding to people, not just devices
Responsive web design taught us that there is no set page size, only content that should resize itself to whatever device is being used. Now that it is a mature and ingrained part of our design process, we need to understand that the device isn’t the defining factor, its the people using it, and those people need an experience that gets them what they need, wherever they need it, irrespective of device. Whether you need to rebuild your website or retheme it, the prime motivator and design compass should be your visitors.
The saying is not “If you build it, they will come”, but rather “If you build it right, they will come back”.
Part two of this post will offer some more frank advice on how to design an effective responsive site. Follow us on twitter to get notified when part two of this post is released.