If you’re planning a new website or an overhaul of your current one, there is a good chance the discussion of mobile usability has come up a couple of times along the way (at least, it should have!). As the percentage of mobile users continues to grow and some estimate that it may even surpass desktop visits in 2014, your mobile website is becoming a crucial part of your online presence.
When it comes to SEO, a responsive design is the best choice by far because:
- It is Google’s official preferred solution
- You only have to provide content, optimisation and maintenance for a single site
- Your rankings are typically very stable across both mobile and desktop searches
- External links to your landing pages and articles still work; no painful redirects to the home page!
Image courtesy of XKCD.
With these clear advantages in mind, let’s take a look at what responsive designs are all about and how they can help your user experience.
What is a responsive design?
A responsive design is a website layout that scales and morphs into various designs depending on the device resolution. Doing this allows users to view your site easily on anything from a small smartphone to a large desktop screen without having to zoom or scroll horizontally.
They are made to scale and adjust to your device resolution so that, when done correctly, all pages can be viewed in a clean and simply layout on any device without the need for subdomains, different directories or redirects.
How Does It Work?
In its simplest form, a responsive design applies a certain set of CSS styles depending on your device resolution.
With this in mind, you can then design different layouts for mobile, tablet and desktop versions of your website and use your CSS styles to apply them. If the user’s device is below a certain resolution threshold it will apply the associated styles.
Below is a classic example of this in action. Looking at these designs from left to right, we can see the page layout change:
- 1 column with no images and a unique, simplified banner design
- 2 columns, minimal padding on either side and a compact banner design.
- 3 columns, minimal padding on either side and less whitespace in the banner. Navigation has also changed
- 3 columns and padding on either side of the content body
You can view more excellent responsive examples over at http://mediaqueri.es
What Can I Do With It?
Responsive designs can incorporate any functionality that CSS allows. What you should be doing is minimising the navigation and graphics for mobile devices to make it easier to view content and require less time and data to load your site in the first place.
Simplify the Call to Action
Your call to action should always be as obvious and simple as possible. Using a responsive design you can make sure this is true on smartphone, tablet and desktop browsers.
Make sure your phone number is clickable (check out my previous blog post to see how), your products or services are easy to view and you’re not making users scroll horizontally to find important links and information.
What Happens to my Page Strength?
Since you’re simply changing the appearance of an existing page, responsive designs have no effect on your page strength at all.
For some time now Google has had the ability to browse your site both as a mobile device and a desktop. While you may choose to hide some content on mobile resolutions, the search engines can see the clear difference between this and the black-hat method of cloaking (hiding keyword rich text from the user but showing it to the search engines).
What Does This Mean for my Rankings?
From what we have seen through testing and observation, sites with a responsive design maintain the same ranking position across all devices. Mobile subdomains however, not so much.
While it is certainly possible to optimise your mobile site on a subdomain (m.example.com), doing so takes just as much work as your desktop site and this is time that could be much better spent on your single, responsive site.
Why Mobile Users Are So Important
As smartphones continue to improve and users get more and more comfortable with the concept of online shopping, their expectations are changing and the truth is, if you don’t keep up with these expectations, at LEAST one of your competitors will and that could mean losing a lot of business.
In November 2013, Google commissioned a study to determine just how mobile use had changed and what this meant for their buying cycle. We were certainly surprised by the results.
- 74% of mobile visitors use search in the shopping process
- 48% began their product research with search engines
- 71% used a store locator to find the nearest store
- 83% want to make their purchase within 24 hours
- A massive 93% who used their mobile device for research went on to make a purchase
- Consumers who made a purchase would revisit the mobile site an average of 6 times in the buying cycle
These statistics alone make an overwhelming case to get your website mobile friendly and fast. Mobile users want your product and they want it now but if your site is too hard to navigate (or worse yet, you have a mobile subdomain that doesn’t even rank), your savvy competitors will be only too happy to take advantage of the opportunity that you’ve turned down.
The study surveyed 950 users aged 18+ who had made at least one purchase in a short list of categories within the last 30 days. They also analyzed mobile usage data for 14 of their panelists. Take a look at the full report from their study for more information and interesting stats.
A responsive design requires less optimisation and upkeep, allows for a very simple, single-domain structure and stable rankings across all devices, it is definitely the way to go.
If you have any questions, comments or suggestions we’d love to hear them so leave your comments below!