Our ultimate guide to responsive websites

Aran Reeks
By Aran Reeks
7 Apr 2015

Part 1: Overview

Responsive websites have been creating a buzz in the online marketing world for a while. Over a series of 3 articles we’ll set out most of what you need to know: what they are, why your business probably can’t afford not to have one, and how to make them work for your customers. We’ll dive into the technology and we’ll explore the issues around mobile customer journeys and user experiences.

In this article we’ll recap some of the benefits so you can relate those to the needs of your business. But where we really want to focus in this and succeeding articles is on the practical considerations. Hopefully this will help you make the transition in an ordered way to ensure you achieve the best return on your investment.

What is meant by a ‘responsive’ website?responsive

In case you’re still not sure what it all means, a responsive website is one that automatically reconfigures web pages to suit the screen size of the device being used to view it. This saves users having to pinch, pan and zoom to find what they want, which is what typically happens when a page designed for PC is simply shrunk to fit a mobile screen.

This is different from a dedicated mobile site, which is a separate version of your site specifically for mobiles. With responsive you have one site which automatically changes the way it looks once it has detected the screen size you are using.

You’re probably not in a position where you can launch a new website every six months, so you really need to get things as close as possible the first time around. There are different technical approaches you can use and a multitude of options and opportunities when it comes to design, content and navigation. 

In this introductory article we’ll look at a bit of the background, the key concepts and technologies, and discuss the main considerations you need to make to support your mobile customers effectively. In later articles we’ll look in more depth at the technical and design issues - so subscribe to the blog if you want to make sure you don’t miss them.

A deeper understanding and some forward planning will help you upgrade your website to achieve the best possible business results and sales conversions, regardless of what mobile technology might come up with in the foreseeable future.

Why go responsive?

First of all, a recap of the entirely sound reasons why you need a responsive website. If you’re in a senior marketing function you will probably know these – but at least you’ll now have a handy checklist when it comes to persuading sceptical colleagues and negotiating budgets.

First and foremost, your customers are increasingly using tablets and smartphones to browse the web.  These come with an increasing range of screen sizes and resolutions and for many of our clients’ they’re already seeing more traffic coming to their sites from mobile devices (tablets & mobiles) than they are from desktop computers.stats

A recent study* we conducted looking at more than 200 of our clients’ websites spread across a broad array of verticals; 44.41% of all visitors came from mobile devices.

That  figure increased 1.74% over the previous month. At this rate, by the end of May 2015, more than 50% of combined website traffic will be from mobile devices and it’s not going to slow down.

*February 2015

Some will tell you that by pinching, panning and zooming, all of your content is visible, even on a smartphone screen, and that your customers will be happy to do this. A mountain of Analytics data, customer surveys and usability tests will tell you that they are not. Often on-screen elements are shrunk to a size where it’s almost impossible to tell what’s on the screen even if you could be bothered to zoom.

But if you didn’t believe that commercial success is related to making life as painless and satisfying for your customers as possible, you probably wouldn’t have got this far. 

Search Engine Optimisation (SEO)

Google shows different search results to mobile and desktop users. It has a dedicated mobile web crawler and creates separate indexes for PC and mobile searches. Unsurprisingly it prefers sites that work well on mobiles and which load quickly even when connection bandwidth isn’t brilliant. Google has also started showing a ‘mobile friendly’ badge among the meta data its displays in Search Engine Results Pages (SERPs). 

“Starting April 21 [2015], we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”

Takaki Makino - Google

If your site isn’t responsive it will be less visible in mobile searches and less enticing to potential customers who choose to use a smartphone or tablet. I for one have started looking for the mobile friendly badge when I’m searching on my mobile. If I don’t see it I tend not to bother clicking the link.

Bounce ratebounce

Any time a search leads somebody to a web page that looks unappealing, where it’s hard to find what they need, that responds slowly, or is difficult to navigate they will exit; usually as quickly as possible. This sends a strong signal to search engines that yours is not a site that they should be presenting to their precious users anywhere near the top of the search results.

This is one of the simplest ways that Google can measure the quality and usability of your site. A poor mobile experience means a higher bounce rate, lower organic search rankings and most of all, lower sales volumes.

Pay Per Click (PPC) Advertising

If you are using PPC to drive traffic to your site your quality score (and hence your bid prices) will be affected if your site is not mobile friendly. Also, if you succeed in getting a mobile user to your site and the landing page doesn’t function on a mobile screen you just paid for a click that stands a far lower chance of converting.

Getting the competitive advantageranking-search

Search rankings and bounce rates are largely about how you avoid falling behind competitors that are already making life easier for their mobile customers. Potentially, you could just invest in a responsive theme for your existing website or eCommerce store to give you the basic mobile friendly metrics. I’d argue though, that more thoughtful implementation is needed to achieve something even  as basic as minimising bounce rates; the reasons for this should become clear soon. 

The whole point of any website investment is to deliver the best experience possible for your customers. Increasingly, people are searching for and buying products and services on mobile devices. So the details of how you make this not only possible, but more convenient and satisfying, will determine your success at turning traffic into sales.

Analytics data, split tests and tracking technology have established that fine-tuning the details of a website or eCommerce store makes a huge difference to conversion rates. Through continuous testing and refinement you can tailor your site to suit what you are selling and who you are selling to. Why would this be any less true for a smartphone or tablet user than for a PC user?

We will go into more detail later (and in subsequent articles) about how mobile design needs to be considered and optimised in its own right. It’s not just about the screen size – the environment and circumstances in which somebody is interacting with your site on a mobile may well be different.  They will also be using a touch-screen rather than a mouse.

They might also be trying to achieve something subtly different. Simply taking a desktop user experience and rendering it on small screen means a missed opportunity to improve the experience and service you provide. Mobile means more opportunities for people to discover your products and to buy them – but you have to adapt to the technology and the mind-set. Mobile also means more opportunities to develop and nurture your customer relationships.

Responsive OR Adaptive; what’s the difference and which should I be using?

There’s a quick technical detail that needs to be cleared up before we continue. Without building a dedicated mobile website there are two approaches for making websites work on a range of screen sizes: responsive or adaptive. I’m only mentioning these because you may come across the terms – your customers almost certainly won’t care about the difference.

The intent is the same in both cases, to use an array of web technologies to display your website’s content in the most appropriate way for the given screen size and resolution.

Responsive Page Layouts

12-column

 

Responsive layouts are based around a grid, think of a grid as similar to the grids that graphic designers have used for years to design printed pages.  A wider page can accommodate a grid with more columns than a narrow page. Web designers also use grids to provide a structure for web pages.  A grid with five columns might look fine on a larger desktop screen but will shrink everything to illegibility on a mobile - a bit like reducing an A3 page to A5 on a photocopier.

Responsive grids solve this by responding to the available screen area and reflowing the page to ensure all your content remains legible.

A truly responsive site uses a ‘fluid’ grid.  This means you don’t have to worry too much about any particular screen sizes or resolutions as the grid will react to the available space rather than being confined to a specific set region of the screen. This allows for the greatest flexibility and maximises the mobile device’s limited screen space.

With an adaptive solution there are a predefined number of grid sizes and page layouts depending on a specific number of defined screen sizes. The visitors’ web browser determines which screen size and resolution the device is using and then renders the most appropriate layout for their specific device.

The term ‘Responsive’ is often used for any site that automatically adapts to suit the screen size of the device, regardless of if it’s actually ‘adaptive’.

Why not just have a dedicated mobile site?

There was a time a few years ago when getting any web page to load quickly on a mobile device meant creating a dedicated mobile version. With this came, effectively, a duplication of the effort needed to manage and maintain the site and also potentially an SEO disadvantage through effectively having two versions of the same thing.

Many sites that went down this route, ended up leaving out key features from the main desktop version when launching as they didn’t want to have to rewrite the whole site again for the dedicated mobile equivalent.images

Now for the good news… Technology has moved on. If you know what you’re doing there should be virtually no performance compromise in having a responsive site.

We’ll explore these technical developments in an upcoming article so make sure to subscribe. The main technical aspects to master to speed up performance for mobile devices include the following - to name just a few:

  • Defer the loading of images
    • All non-essential images should be prevented from downloading until they’re within view when the user scrolls down the page. Why make them wait to use your site for the gain of something they can’t even see yet?
  • Using a Content Delivery Network (CDN)
    • Using a dedicated server network designed for serving your specific type of content (images, videos…) can greatly increase the speed at which your pages can load.
  • HTML5 AppCache & local databases
    • Recent web advancements now allow us to cache resources locally within modern web browsers. This means after the initial page load, subsequent pages can be loaded significantly faster.
  • HTML5 Responsive images
    • Different devices need different sized images. A 27” iMac for example needs an image far larger than a small 4” mobile phone will. The smaller your images, the smaller the file size and thus the quicker they’ll download for the user to view.
      HTML5 now supports serving the same image in different sizes based on the user’s available screen size.
  • DNS prefetching
    • DNS prefetching is a good example to illustrate how rethinking the way that websites operate can help make them more adaptable. Any link on a webpage, whether that’s to another page, CSS file or image has to resolve the IP address of the server that houses it before the content can be downloaded.

      Prefetching resolves these links ahead of time, even if the user never clicks on the link. The content is then available more instantly because one of the key steps is already completed. On a desktop PC over a fast fixed broadband connection you probably wouldn’t notice the difference. But over a mobile connection it can make the difference between staying engaged and clicking away from the site.

Do you have to slim down the content?desktop-mobile

Some people will tell you that you have to slim down the content that you show when your site is opened on a mobile. Screen size and bandwidth mean you have to be selective about what users see. This is not an approach that we recommend, and frankly seems like a bit of a cop-out.

If you understand how the technology and mobile design works you shouldn’t need to make these compromises. If you decided that certain content was needed to help your customers along their buying journey, why wouldn’t this be needed by mobile users too? 

There are some big design questions about how you make the content accessible to mobile users when they need it. Here you have to understand how a mobile user’s journey through your site will be different from somebody using a PC. 

You might have to pre-empt when a particular link or piece of content might be most useful and make the decision to use some valuable screen space to make it readily available and obvious. Because you can display more content and links on a desktop screen, users have the scope to scan around a little to find what looks interesting or relevant - with a mobile you might have to predict and guide the process even more tightly.

We covered the business of buyer personas, user journeys and website goals in detail in this recent article if you want to read more about this. For now I just want to stress that you need to model this carefully for each type of user and never assume that it will be identical on mobile and desktop.

A quick example to illustrate: some people might like to browse and select products on their mobile but leave the purchase until they get home. They might only trust their home WiFi or they might just find paying easier on a desktop.  If this is their preferred behaviour, you need to work out how you are going to support it.

How will you know when it’s right?

Quite simply, you have to measure it. Google Analytics has all the flexibility you need to track how people interact with your website and you can track this independently for mobile, tablet and PC users.

Segregating your Analytics data will tell you where certain pages have unexpectedly high bounce or exit rates for mobile users. You can also look at user behaviour and see how closely the reality matches the predicted user journey for mobile users that you modelled in your design. Unexpected results help you target modifications and split tests until you achieve the goals you were after.

Again, we will dive deeper into Google Analytics for mobile in a later article; setting up specific goals can tell you a lot more than just looking at the standard data.

Do all mobile solutions have to look the same?

responsive_ecommerce

I’ve heard this complaint several times, but really there’s no reason why they should. Naturally if you’re using off-the-shelf responsive themes they might; but really your site should look and feel distinctive, no matter what device your customers use.

Get out your mobile and have a look at these sites and you’ll see what we mean.

https://www.gadsby.co.uk/

http://www.country-catalogue.co.uk/

http://www.visit-exmoor.co.uk/

https://www.flogas.co.uk/

http://www.aptuspersonnel.com.au/ 

What you should notice as you look through each of those examples is some commonality in the fact that they all function well and load quickly. 

You should also see how the way content is displayed and how the navigation works are quite different. That’s because they weren’t designed around a pre-conceived idea of how a website should work on a mobile - they were created around what customers of these businesses wanted and needed to achieve.

Hopefully you are now convinced that responsive website design is a positive advantage for your business. In coming articles we’ll look at the design and technical considerations that will make your solution work more effectively and deliver a real impact.