The Ultimate Guide to Google's Mobile Friendly Algorithm

How to fix mobile user experience
problems and protect your SEO rankings
EDITION 1 -
MARCH
2015

Find out what we can do to grow your business. Call us on 0800 088 7486 or visit clickthrough-marketing.com
2
CONTENTS
WHY MOBILE USER EXPERIENCE IS MORE IMPORTANT THAN EVER 3
WHO NEEDS THIS GUIDE? 4
WHAT WE KNOW SO FAR 5
TIMELINE 7
HOW TO CHECK IF YOUR SITE IS MOBILE-FRIENDLY 8
HOW GOOGLE DEFINES A MOBILE-FRIENDLY SITE 9
GOOGLE’S MOBILE USABILITY ERRORS 11
HOW CLOSELY DO I HAVE TO FOLLOW GOOGLE’S GUIDELINES? 20
TECHNICAL SEO CONSIDERATIONS 21
PAID SEARCH CONSIDERATIONS 22
NEED MORE HELP? 23
WEB DEVELOPMENT CASE STUDY 24
ABOUT CLICKTHROUGH 32

3
WHY MOBILE USER EXPERIENCE
IS MORE IMPORTANT THAN EVER
Mobile user experience has been an
important consideration for marketers ever
since the rise of the mobile web. Now, with
around 30% of website traffic coming from
mobile devices, it’s crucial.
Not catering for mobile customers now
means giving a third of your customers a
hard time.
But catering for mobile customers can
improve engagement rates, customer trust
and return visits.
It seems to be a no-brainer. But now there’s
another big reason to fix mobile usability
problems – bad user experiences will soon
directly affect your search rankings.
GOOGLE’S MOBILE-
FRIENDLY ALGORITHM
From April 21, 2015, Google will use mobile
usability factors to help determine where a
page should rank in its mobile search results.
This means that if your site doesn’t use
up-to-date technologies to cater to mobile
users, affected pages may rank below
competitors that do.
Google says it’s doing this to help users find
“relevant, high-quality search results that are
optimised for their devices”.
It also says the change “will affect mobile
searches in all languages worldwide and will
have a significant impact in our search results.”
WHAT THIS MEANS FOR YOU
Your risk of being negatively affected by the
algorithm depends on how mobile-friendly
your website already is.
You may only have to make a few small
tweaks to certain pages on your website. Or,
in the worst-case scenario, you may have to
rebuild your site from scratch.
This guide will explain the factors that
Google takes into account when determining
if a site is mobile-friendly – and how to put
their recommendations into practice.

4
This guide will be beneficial for marketers
and webmasters who:
• Want to understand what makes
a mobile website user-friendly in
Google’s eyes
• Want to convince web development
staff of the need to create mobile-
friendly user experiences
• Want to take steps to fix problems
themselves
• Want to find a web development
agency who can help
“THIS GUIDE WILL EXPLAIN
THE FACTORS THAT GOOGLE
TAKES INTO ACCOUNT WHEN
DETERMINING IF A SITE IS
MOBILE-FRIENDLY.”
WHO NEEDS THIS GUIDE?

5
;; Google’s new mobile-friendly algorithm
launches on Saturday April 21, 2015.
;; Google says it will have a “significant
impact” on mobile search results, and
will be bigger than Panda or Penguin.
Google hasn’t provided any figures to show
how much impact this new algorithm will
have. However, in its initial announcement,
the company said it would have a
“significant impact” on search results.
Following this, webmaster trends analyst
Zineb Ait Bahajji said the algorithm would
have more impact than Panda and Penguin,
Google’s infamous webspam updates.
For reference, Panda affected up to 12%
of search queries when it went live, while
Penguin affected around 3.1% of queries at
launch.
;; The algorithm is related to Google’s
‘Mobile-friendly’ labels that appear in
search results.
This means if your web pages appear in
search results with this label, you shouldn’t
have to worry about the algorithm update.
For more information on the mobile-friendly
labels, visit: http://www.clickthrough-
marketing.com/googles-new-mobile-
friendly-label-may-come-with-
ranking-boost/
;; The algorithm is applied on a page-
by-page basis.
So if only a few pages are affected by
mobile usability issues, you shouldn’t
receive a site-wide penalty.
This also means you don’t have to worry
about making your site 100% mobile-friendly
by the April 21 deadline.You may decide
to prioritise problem pages based on their
importance or existing search visibility.
WHAT WE KNOW SO FAR

6
However, with the growth in mobile usage,
it makes sense to make your site as mobile-
friendly as possible, as quickly as possible.
;; The algorithm runs in real-time.
This means that changes to your website
will be taken into account as soon as
Google crawls the modified page. It doesn’t
mean you’ll instantly receive better rankings
if you make recommended improvements.
If it typically takes a long time for Google to
crawl your site, you need to work even faster
to ensure your site is ready in time.
;; The algorithm still uses some
desktop signals to determine mobile
‘friendliness’.
For example, the speed of your desktop site
is still taken into account when weighing up
the usability of your mobile site.
We don’t know exactly which desktop
signals Google refers to. So you should
assume that if your desktop site has
usability issues, it may affect your mobile
usability in Google’s eyes.

7
• June 2013: Google publishes a blog
post saying “we plan to roll out several
ranking changes in the near future that
address sites that are misconfigured
for smartphone users.”
• May 2014: Google demonstrates that
its Googlebots can ‘fetch and render’ a
website as a mobile user sees it.
• Google adds mobile optimisation
tips to its PageSpeed Insights tool.
• July 2014: Google announces it will
flag flash-heavy (mobile-unfriendly)
sites in mobile SERPs.
• October 2014: Google gives the
following statement to Search
Engine Land: “Because at Google
we are aiming to provide a great
user experience on any device,
we’re making a big push to ensure
the search results we deliver reflect
this principle.”
• Google tests ‘mobile-unfriendly’
labels in mobile SERPs.
• Google launches mobile usability
reports in Webmaster Tools.
• November 2014: Google officially
launches a ‘mobile-friendly’ label
to signal to mobile users that a site
provides a good user experience, and
confirms it is experimenting with using
the labelling criteria as a ranking factor.
• February 2015: Google officially
announces its mobile-friendly
algorithm, and says it will have a
“significant impact” on search results.
• March 2015: Google’s Zineb Ait
Bahajji says the algorithm will be
bigger than Penguin or Panda.
• April 21, 2015: The new mobile-
friendly algorithm goes live.

TIMELINE

8
If you have a Google Webmaster Tools account set up, there’s an easy way to check if your
site is mobile-friendly, in line with Google’s mobile usability guidelines.
The mobile usability report scans your website for usability errors. Then it presents the
problems found, along with the number of pages affected, like this:
You can click on the usability error to see a list of URLs that need action taken.
The mobile usability report can be found under ‘Search Traffic’ on the left sidebar in your site’s
Webmaster Tools dashboard.
We recommend running a mobile usability report on your website as your first course of
action.You will then be able to reference any errors you see against the explanations on pages
11 to 19.
HOW TO CHECK IF YOUR SITE IS MOBILE-FRIENDLY

9
HOW GOOGLE DEFINES A MOBILE-FRIENDLY SITE
A mobile-friendly website should offer a
smooth, pain-free experience for all users,
whether they’re accessing the website
through their desktop, smartphone, games
console or wearable device.
There are five areas of mobile usability that
Google looks at when determining whether
to reward a site with a mobile-friendly label
(and search ranking boost):
From Google’s Webmaster Tools Help:
• A defined viewing area (or viewport)
that adjusts to the device’s screen size.
• Content that flows in the viewport,
so that users don’t have to scroll
horizontally or pinch the screen in
order to see the entire page.
• Fonts that scale for easier reading on
small screens.
• Easy-to-touch elements (e.g. buttons)
that are well-spaced from other touch
elements.
• Visual design and motion driven by
mobile-friendly technology.
A NOTE ON RESPONSIVE DESIGN
AND MOBILE SITES
There are two common ways to deliver
content to mobile users – responsive design
and mobile sites. (There’s also a third
option, dynamic sites – but this tends to be
less popular than the other two.)

10
RESPONSIVE DESIGN
A responsive website serves content to
users from the same URLs, regardless
of the device they’re using.
However, the site is coded in such a
way that elements of the page change
according to the size of the screen it’s
been viewed on.
The layout, image sizes, or even written
content may vary depending on the size of
the user’s screen. However, fundamentally,
they’re seeing the same page, no matter
which device they’re using.
MOBILE SITES
A mobile website serves content to
users from different URLs, depending
on whether they access the site from a
mobile or desktop device.
There is, effectively, a ‘copy’ of the
desktop website delivered to – and
optimised for – mobile users.
Content can be completely different from,
or largely similar to, the desktop site.
Google’s guidelines heavily favour responsive design. Much of the language used in its
definition of a mobile-friendly site refers to responsive design – such as ‘content that flows in
the viewport’ and ‘a defined viewing area that adjusts to the device’s screen size’.
This said, a mobile site is better than providing no mobile-optimised content at all.
UNSURE WHETHER YOU HAVE A RESPONSIVE SITE OR MOBILE SITE?
If you’re not sure which type of mobile site you have, you can use our Responsive Site
Checker tool.
This tool is (to our knowledge) the only free tool of its kind that automatically detects mobile
sites. If it finds a mobile site on your domain, it will display the message: “Showing the
dedicated mobile site at: [URL]”
Try it out here: http://www.clickthrough-marketing.com/sitechecker/

11
GOOGLE’S MOBILE USABILITY ERRORS
This section provides more information on
the errors Google identifies in its mobile
usability reports.
We’ll explain what they mean, and how to
fix issues so you can benefit from the SEO
effects of having a mobile-friendly site when
the algorithm launches.
Bear in mind, Google recommends using
responsive design to create mobile-friendly
experiences for users. This means all of
Google’s recommendations are geared
towards creating responsive websites.
If you already have a responsive site, but
are still receiving mobile usability errors for
certain pages, this information will help you
diagnose and fix the problems. With a little
coding knowledge, most non-developers will
be able to fix basic issues.
If you have a mobile site, and are not
planning to build a responsive site anytime
soon, your best bet is to apply these
recommendations as closely as possible to
a non-responsive environment. For example,
you may not be able to make content ‘flow’
to fill different screen sizes, as you would
with a responsive site, but you will be able to
apply recommendations for the size of touch
elements, or font scaling.
If you have neither a responsive website nor
a mobile website, you need to start thinking
seriously about catering to your mobile user
base. It’s likely that you’re already losing out
on traffic and conversions by not providing
a satisfactory mobile user experience,
and this will only get worse once Google
launches its mobile-friendly algorithm.
Need help creating a responsive site? Get in
touch with our experts on 0800 088 7486.
“BEAR IN MIND, GOOGLE
RECOMMENDS USING
RESPONSIVE DESIGN TO
CREATE MOBILE-FRIENDLY
EXPERIENCES FOR USERS.”

12
FLASH USAGE
Google says:
“Most mobile browsers do not render
Flash-based content. Therefore, mobile
visitors will not be able to use a page that
relies on Flash in order to display content,
animations, or navigation. We recommend
designing your look and feel and page
animations using modern web technologies.”
The problem
Neither Google nor Apple support Adobe
Flash in their tablet and phone browsers.
When you consider that Google’s Android
and Apple’s iOS are the most widely-used
mobile operating systems globally, the
problem becomes clear.
Given the rise in Internet connectivity from
handheld devices, this lack of support has
meant site owners with websites featuring
flash content have not been able to fully and
effectively communicate their message to a
mobile audience.
Coincidentally, since cross-browser HTML5
support came into its own in 2012, the new
web standard has provided a mechanism for
developers and designers to create flash-like
interactive web experiences.
The traditional full-flash site from the
early 2000s tended to be a creative-led,
experiential-driven online entity. It has taken
several years for HTML5 to bed down, but
now the same impetus to create interesting
online experiences is being developed with
HTML5 websites and web apps.
For those who merely want to add a little
interactive user experience to their site,
modern technologies like HTML5, CSS3,
and jQuery are now the best ports of call.
Don’t get us wrong, Flash still has its uses –
but not typically for a business website. If your
website still uses Flash, you need to think very
strongly about replacing these Flash-based
elements with modern equivalents.
Content providers like YouTube already
detect devices and serve content
“FOR THOSE WHO MERELY
WANT TO ADD A LITTLE
INTERACTIVE USER
EXPERIENCE TO THEIR SITE,
MODERN TECHNOLOGIES
LIKE HTML5, CSS3, AND
JQUERY ARE NOW THE BEST
PORTS OF CALL.”

13
accordingly. This is why you can view
YouTube on your mobile device – its
traditional Flash-based video player is now
accompanied by a HTML5 equivalent.
The solution
There are a number of approaches you can
take to deal with Google’s ‘Flash usage’
error. However, if you don’t have access to
web development expertise, you may find
these fixes difficult to implement.
The first approach is to deliver flash content
only to supported browsers. Using server-
side or client-side code, you can detect
what device is looking at your website
and deliver content using an appropriate
platform. However, this approach may
cause difficulties if your site makes heavy
use of Flash elements.
The second approach is to replace basic
flash animations with CSS or JavaScript
animations. CSS3 now has many native
user interface transformations and can
do basic animation. JavaScript libraries
like JQuery can work with CSS3 to push
towards interactivity previously possible
through Flash.
The third approach is, simply, to re-build
your site without flash elements. This may
be your only choice if your site is heavily
reliant on Flash to deliver content.
“THERE ARE A NUMBER
OF APPROACHES YOU
CAN TAKE TO DEAL WITH
GOOGLE’S ‘FLASH USAGE’
ERROR. HOWEVER, IF YOU
DON’T HAVE ACCESS TO WEB
DEVELOPMENT EXPERTISE,
YOU MAY FIND THESE FIXES
DIFFICULT TO IMPLEMENT.”

14
VIEWPORT NOT CONFIGURED
Google says:
“Because visitors to your site use a variety
of devices with varying screen sizes—from
large desktop monitors, to tablets and small
smartphones—your pages should specify a
viewport using the meta viewport tag. This
tag tells browsers how to adjust the page’s
dimension and scaling to suit the device.”
The problem
The ‘viewport’ meta tag is an important part of
responsive design. It defines how a website
should display on a mobile device, and how
users can change the way it is displayed.
For example, you might set the viewport to
show a ‘zoomed in’ version of your desktop
website on a mobile device, where content is
resized and the text flows to fit the screen for
comfortable viewing.
The solution
If you see this error in your mobile
usability report, it means you haven’t set
a viewport meta tag, or your viewport isn’t
working correctly.
Refer to the next section for Google’s
recommendations for setting the viewport.

15
FIXED-WIDTH VIEWPORT
Google says:
“This report shows those pages with a
viewport set to a fixed width. Some web
developers define the viewport to a fixed pixel
size in order to adjust a non-responsive page
to suit common mobile screen sizes. To fix
this error, adopt a responsive design for your
site’s pages, and set the viewport to match
the device’s width and scale accordingly.”
The problem
One way to set a viewport is to set its width
attribute to a fixed number of reference
pixels. This makes the page render as if it’s
the same width on a desktop and mobile
device, even though the mobile device
you’re using will likely have a significantly
smaller screen.
Google advises against this approach as it
doesn’t result in a ‘true’ responsive design –
where content will ‘flow’ to fit the whole screen,
no matter how wide or narrow its screen.
The solution
Google recommends using the
width=device-width attribute in your viewport
meta tag to ensure the website responds to
the size of the user’s screen.
In addition, you should use the initial-scale=1
attribute to establish a 1:1 relationship
between hardware pixels and CSS pixels. A
CSS pixel is a fixed unit of measurement that
appears to be the same size when viewed
on different devices, even if the devices have
different hardware pixel densities.
This ensures that the content of the page
will ‘flow’ to fit the screen, whether it’s
viewed in a portrait or landscape orientation.
Google’s recommended viewport meta tag
looks like this:
<meta name=”viewport”
content=”width=device-width,
initial-scale=1”>
Google recommends, for accessibility
reasons, not disabling user scaling (in other
words, allowing them to ‘pinch and zoom’
when necessary).
This means the following attributes should
be avoided:
user-scalable=no – This disables user scalability
entirely. Initial-scale=1,Maximum-scale=1 -
Setting the maximum scale to match the initial
scale also results in user scaling being disabled.

16
CONTENT NOT SIZED TO VIEWPORT
Google says:
“This report indicates pages where
horizontal scrolling is necessary to see
words and images on the page. This
happens when pages use absolute values in
CSS declarations, or use images designed
to look best at a specific browser width
(such as 980px). To fix this error, make sure
the pages use relative width and position
values for CSS elements, and make sure
images can scale as well.”
The problem
The problem described here will be familiar
to most mobile browser users – when a
piece of content is too large for the screen, it
forces the user to scroll left and right to see
the content in its entirety.
This is caused by the content using fixed
size values that are larger than the defined
viewport, or positional values that place the
content outside of the viewport.
This content could be a table, a block of text,
or an image, amongst other things.
The solution
Google’s ‘content not sized to viewport’ error
tends to appear when absolute values are
used as part of a responsive design.
It’s an issue that can creep in through
forgetfulness. If you already have a
responsive site in place, but one blog post
mistakenly includes an image with an
absolute width that exceeds the size of the
“THE PROBLEM DESCRIBED
HERE WILL BE FAMILIAR TO
MOST MOBILE BROWSER
USERS – WHEN A PIECE OF
CONTENT IS TOO LARGE FOR
THE SCREEN, IT FORCES THE
USER TO SCROLL LEFT AND
RIGHT TO SEE THE CONTENT
IN ITS ENTIRETY.”

17
viewport, Google should pick up on this
error in a mobile usability report.
To avoid this error, make sure all page elements
across affected pages use relative dimensions
that adjust to the user’s screen size.
The following code will define an image
size as 42 x 42 pixels. These are absolute
values, so are against Google’s guidelines:
<img src=”example.gif” height=”42”
width=”42”>
The following code will define an image as
50% the width and height of the page (or
a containing element). This is in line with
Google’s guidelines:
<img src=”example.gif”
height=”50%” width=”50%”>
As well as using relative dimensions, rather
than absolute dimensions, you should also
make sure you use relative co-ordinates to
place elements on the page. Otherwise, you
can end up with stray content being placed
outside of the viewport.
“TO AVOID THIS ERROR,
MAKE SURE ALL PAGE
ELEMENTS ACROSS
AFFECTED PAGES USE
RELATIVE DIMENSIONS THAT
ADJUST TO THE USER’S
SCREEN SIZE.”

18
SMALL FONT SIZE
Google says:
“This report identifies pages where the font
size for the page is too small to be legible
and would require mobile visitors to “pinch
to zoom” in order to read. After specifying a
viewport for your web pages, set your font
sizes to scale properly within the viewport.”
The problem
This issue is fairly self-explanatory. If your
font sizes are too small for most normal-
sighted people to read on a mobile device,
then you’re creating a user experience
problem. Normal-sighted users shouldn’t
have to zoom in on a page to read its text
– this defeats the purpose of responsive
design, which aims to provide seamless,
user-friendly experiences across devices.
The solution
The answer to this problem isn’t quite as
simple as ‘make the text bigger’.
There are two issues to be aware of – the
units of measurement that define font sizes,
and Google’s recommended font sizes for
mobile devices.
Many units of measurement can be used to
resize fonts, including inches, centimetres
and millimetres. However, the most common
are pixels (px), points (pt), EMs (em) and
percent (%).
In this context, a pixel refers to a CSS pixel – a
defined unit of measurement that will appear
to be the same size across all devices.
Google recommends using pixels as your
unit of measurement for fonts across your
site.Although CSS pixels are a fixed size
measurement, they are much less likely
to cause confusion than common fixed
measurements like millimetres or centimetres.
Google also recommends using a base font
size of 16px, then defining other font sizes
in your CSS that can be used across your
site. These sizes should be defined in direct
relation to this base size (for example, a
‘small’ font that’s 75% the size of your base).
In addition, you should:
• Adjust the vertical spacing between
lines of text to make it legible on
mobile devices. Google recommends
the browser-default spacing of 1.2em.
• Be careful with your typographical
choices. Using too many fonts can
make pages look messy and difficult
to read, especially on mobile

19
TOUCH ELEMENTS TOO CLOSE
Google says:
“This report shows the URLs for sites
where touch elements, such as buttons
and navigational links, are so close to each
other that a mobile user cannot easily tap
a desired element with their finger without
also tapping a neighboring element. To fix
these errors, make sure to correctly size and
space buttons and navigational links to be
suitable for your mobile visitors.”
The problem
Again, this is self-explanatory. If buttons,
links and other ‘touchable’ elements are too
close together, the user’s intended input
may be misread by the device. This causes
obvious usability issues.
The solution
You need to evaluate behaviour drivers and
calls to action on key pages and ensure
links and buttons are big enough to press
easily with touchscreen devices.
Google recommends that important touch
elements are at least 48 by 48 CSS pixels
(roughly seven millimetres square). This is
based on the average adult finger pad size
of 10mm.
Less important touch elements, like links
in body text, can be smaller. However, they
should be placed far enough from one
another that the user doesn’t mistakenly
hit the wrong link. Google recommends
spacing these elements at least 5mm apart
from one another.
“GOOGLE RECOMMENDS
THAT IMPORTANT TOUCH
ELEMENTS ARE AT LEAST 48
BY 48 CSS PIXELS (ROUGHLY
SEVEN MILLIMETRES
SQUARE). THIS IS BASED ON
THE AVERAGE ADULT FINGER
PAD SIZE OF 10MM.”

20
Google is quite clear on its
recommendations for creating responsive,
mobile-friendly websites. But is it necessary
to follow them to the letter?
The answer, as far as we can tell, is no.
From the evidence we’ve seen, it’s more
important that you achieve the goals
Google’s guidelines strive towards,
than follow the exact directions Google
recommends for achieving these goals.
To recap, here’s what Google considers to
be a mobile-friendly website. This is the
ideal you should be aiming for:
• A defined viewing area (or viewport)
that adjusts to the device’s screen size.
• Content that flows in the viewport,
so that users don’t have to scroll
horizontally or pinch the screen in
order to see the entire page.
• Fonts that scale for easier reading on
small screens.
• Easy-to-touch elements (e.g., buttons)
that are well-spaced from other
touch elements.
• Visual design and motion driven by
mobile-friendly technology.
Let’s use the ClickThrough Marketing
website as an example. Our site achieves
all of the above, but uses methods different
to those Google recommends to create a
responsive experience.
Despite the different approaches used,
the visual result is the same – a site that
provides a great user experience across a
multitude of devices.
The ClickThrough website receives no
usability errors when we run a mobile
usability report. So it’s clear that Google
values results over strict methodology.

HOW CLOSELY DO I HAVE TO
FOLLOW GOOGLE’S GUIDELINES?

21
TECHNICAL SEO CONSIDERATIONS
If you use a mobile site, it’s important to
implement rel=canonical and rel=alternate
media tags to tell Google’s crawlers that the
desktop version of the site is the ‘original’.
This avoids duplicate content issues, and
ensures that backlink strength is passed
back to the desktop version.
This is not necessary if you have a
responsive site.
REL=CANONICAL
Use the desktop value for both the mobile
and desktop version. This consolidates
indexing and ranking signals (such as
external links) and prevents confusion about
potential duplicate content.
<link rel=”canonical”
href=”http://www.example.com/
desktop-version/example-page/”/>
REL=ALTERNATE MEDIA
This attribute enables you to map the
desktop and mobile URLs. Use this
attribute on the desktop page to specify
the mobile version. (You don’t include this
attribute on the mobile version to specify
the desktop version.)
On the desktop page, include the following
(where max-width is whatever you’ve set the
page to support):
<link rel=”alternate” media=”only
screen and (max-width:
640px)”href=”http://m.example.
com/example-page/”/>”
SEO
“USE THE DESKTOP VALUE
FOR BOTH THE MOBILE AND
DESKTOP VERSION. THIS
CONSOLIDATES INDEXING
AND RANKING SIGNALS
(SUCH AS EXTERNAL LINKS)
AND PREVENTS CONFUSION
ABOUT POTENTIAL
DUPLICATE CONTENT.”

22
Google has given no indication that the new
mobile usability ranking factor will affect
AdWords customers.
But Zoe O’Neil, ClickThrough’s director of
paid search, reckons Google will focus its
attention on PPC in due course:
“Google is quite clear in its intentions with
its new ranking factor – it wants to provide
users with ‘the most relevant and timely
results’.
“Although the new ranking factor only affects
organic search, it makes sense that Google
will, at some point, also take mobile usability into account when ranking PPC ads. After
all, they’re an integral part of the search
experience, and are inherently more visible
than organic results.
“I expect that Google will soon factor in
mobile usability when calculating Quality
Score for ads, if it doesn’t already do so.
“If this ends up happening, having a mobile-
unfriendly site will mean settling for lower
Quality Scores – and, in turn, paying more
to secure the same ad positions.”
PAID SEARCH CONSIDERATIONS

23
Are you concerned about Google’s
upcoming mobile usability ranking factor,
and the affect it may have on your site’s
traffic and search rankings?
Have you wanted to create a mobile-friendly
website, but don’t have the time or expertise
available to put it in place?
ClickThrough Marketing has more than ten
years’ web development experience, helping
trusted brands like Merc Clothing, Gtech
and Helping Hands create responsive,
mobile-friendly websites.
Our web development philosophy is led
by our unique 35-step framework, which
ensures marketing goals, SEO and user
experience inform every stage of the
development process.
The result? Great-looking websites that
perform in search engines and provide great
ROI through increased traffic, conversions
and revenue.
To find out more, call our experts on:
0800 088 7486
NEED MORE HELP?
DOWNLOAD YOUR FREE EBOOK – HOW TO BRIEF
A WEB DESIGN AGENCY: PART ONE
When planning a new website, your initial brief to your web
development agency is crucial.
Successful websites are built on solid briefs. But getting
your brief wrong could lead to a stretched budget, missed
deadlines, and a website that won’t support your
marketing goals.
Start by learning what not to do. Download your FREE
eBook today and learn how to avoid the pitfalls that
doom web build projects before they start.
Get your copy here:
http://clikth.ru/Brief-Web-Design-P1

24
WEB DEVELOPMENT CASE STUDY:
HELPING HANDS HOMECARE
Home care provider Helping Hands
asked ClickThrough Marketing to create a
responsive, user-friendly website to cater
for its growing mobile audience. In this case
study, we show how our unique 35-step web
build process helped Helping Hands fall in
love with its website all over again…
Background
Helping Hands is an award-winning provider
of live-in care services. The family-run
company has provided high-quality care to
customers across England and Wales for
more than 25 years, and boasts a five-star
rating on NHS Choices.
ClickThrough Marketing has worked with
Helping Hands since 2013, providing expert
support for its SEO strategy.
The Challenge
Following an in-depth analytics audit in June
2014, Helping Hands noted that a significant
proportion of its website traffic came from
mobile users.
The company realised a website
redevelopment was crucial. Their new
website would have to cater to these mobile
users, whilst improving conversion rates.
“The key objective was to get a
responsive website to give our
customers a better user journey.” Dal
Dosanjh, marketing manager at
Helping Hands
Helping Hands was also having trouble with
its content management system (CMS). The
platform they were using…“Wasn’t very user
friendly,” says Dal.
“Most of the time we had to ask our existing
web agency to do things. Even adding
documents, or PDF downloads to the
website was difficult.”
In terms of design, Dal emphasised it was
important that Helping Hand’s new website
had a “fresh, modern appeal”, whilst
maintaining the brand’s established ‘look
and feel’.
“The brief called for evolution, rather
than revolution.We wanted to retain
the existing look and feel but put a
responsive, mobile-friendly design in
place.” Dal Dosanjh
Despite already having a web development
agency on board, Helping Hands decided
to take the project to pitch. On the strength
of their existing relationship, Helping Hands

25
invited ClickThrough, along with its existing
web development agency, and several
agencies it hadn’t previously worked with.
The Pitch
ClickThrough’s pitch focussed on its
metric-led approach to web development
– supported by its five-phase, 35-step web
build process.
The 35-step process is built on years of
marketing and web development and
experience, and is designed to ensure every
aspect of a website supports its marketing
goals – from planning to design to delivery.
PROVEN PROCESS: BEST PRACTICE WEB DEVELOPMENT

26
Alan Rowe, ClickThrough’s head of web
development, explains:
“With regard to design, we know that most
customers like to see the design as early as
possible. We appreciate this, but find this to
be inefficient. By having the design process
quite late in the 35-step process, it ensures
we have thought long and hard about the
challenges of a new website.
“By the time we start working on the
design, we’ve already considered what
target audiences are looking for, and how
they might behave. We’ve already thought
about how we can organise information
to keep the user journey as simple as
possible, allowing quick and easy access to
information. And we’ve already scoped out
how we can support SEO strategies.
“Having gone through the planning process,
we are in a much better position to know
what the website should look like. And,
invariably, get it right first time.”
Despite strong competition, ClickThrough’s
structured web development process, and
the strength of its existing relationship
with Helping Hands convinced the care
company that ClickThrough was the
right choice.
“We only invited a couple of agencies
that we hadn’t worked with before. One
of the pitches was absolutely fantastic,
but ClickThrough was by far the best.
“What was really impressive was that
ClickThrough was very, very structured.
We liked that you could always look
at the 35 steps and see where we are
in the timeline.That was impressive.
“We also liked the fact that all key
members of staff were present at the
pitch.All directors, and all specialists
made the effort to come along and get
involved.”Dal Dosanjh

27
The Process
A key facet of ClickThrough’s 35-step process
is integration between separate marketing
disciplines – from design to content, from
conversion optimisation to SEO.
This approach ensures that every website
ClickThrough creates is built to technical,
conversion and SEO best practices – but
necessitates tight communication between
teams, and with clients.
Having worked together on SEO for more
than a year, Helping Hands was confident
ClickThrough could deliver on organic
search. However, the new website presented
a new challenge – how to implement
conversion rate optimisation (CRO)
techniques in a uniquely challenging market.
The first point of contact for many of
our customers is usually through online
advertising. By the time they visit our site,
they’re in a position where they’re at a very
emotional point in their conversion journey.
“Obviously, it’s important that we are
compassionate to these customers,
whilst also being a trusted source of
information and a viable business. The
website needs to play many different
roles to be successful. After all, 70% of
our business is online.” Dal Dosanjh
ClickThrough also had a tight deadline to
deal with. Helping Hands’ peak season was
fast approaching, so the entire project would
have to be delivered in just three months.
A KEY FACET OF
CLICKTHROUGH’S 35-STEP
PROCESS IS INTEGRATION
BETWEEN SEPARATE
MARKETING DISCIPLINES –
FROM DESIGN TO CONTENT,
FROM CONVERSION
OPTIMISATION TO SEO.

28
The Results
ClickThrough delivered the project to
deadline and to brief. The finished website
used a responsive design that presented
Helping Hands as a modern family-run
business – supported by the detailed
technical and marketing considerations laid
out in the 35-step process.

29

30
The feedback from Helping Hands
was outstanding.
“The ClickThrough ‘A Team’. Give them
a challenge, they’ll get it done. Give
them a deadline – ‘yep, no problem’.
Ask for the plus-1s in service –
already there. That’s our experience
of working with ClickThrough and we
offer our sincere thanks for a job well
done. It really has been an absolute
pleasure working with you all.”
Jo Wright, Helping Hands’ head
of marketing
“I just wanted to give my sincerest
thanks to Alan, Neil, Matt, Lily, Zoe,
Jordan, Lisa, Richard and I’m sure a
whole host of others at ClickThrough,
who have been instrumental in
producing an awesome looking and
functioning website.”
“Selecting ClickThrough as our web
development partner was the best
decision Helping Hands made.The
whole process – and the journey
you’ve taken us through – has been
fun and educational. It’s been a real
pleasure working with such a fantastic
professional team.”Dal Dosanjh
The Helping Hands team also praised
ClickThrough’s high standards of
communication. Jo Wright said:
“The technical know-how at ClickThrough is
industry-leading, but what really sets you apart
in my opinion is your communication. Just
plain old communication; and not just keeping
us informed at all times but we also notice it
between yourselves as a team.
“As very demanding clients we know what
we want and you listened, took the time to
understand and then actioned.”
As Alan Rowe explains:
“By ensuring as many people across
disciplines were involved in key stages of the
build, we were able to work together with CTM
an extension of Helping Hands’ marketing
department as a single team, all working to
close off snags to reach the end game.”
As for Helping Hands’ content
management system, ClickThrough
identified at an early stage that a simple,
easy-to-use platform like WordPress would
suit the care company’s needs. Helping
Hands’ team were frustrated that their
current CMS prevented them from editing
content themselves, and they had no
need for a complex e-Commerce system

31
that would require extensive training
and investment.
ClickThrough built the website using
WordPress, and according to Dal Dosanjh,
“It’s so friendly to use. From a user
perspective now, I’m instantly very clear as
to where I’m at on the site.”
The final challenge to overcome was how
to optimise the site for conversion, whilst
being sensitive to the needs and emotions
of Helping Hands’ user base. ClickThrough’s
previous experience creating Helping Hands
content, as well as the built-in audience
research of the 35-step process, ensured
this wasn’t an obstacle. Richard Chapman,
ClickThrough’s conversion and analytics
manager, explains:
“Helping Hands’ website was particularly
challenging. It had to communicate to and
convert multiple and very different personas
– growing business, showing empathy and
recruiting new staff. For websites like this,
you have to be able to adjust what you do
based on the specific challenges of the
client, user base and sector.
“That’s why our 35-step process includes
in-depth persona analysis at an early
stage. This ensures our audience research
informs every step of the design and
conversion processes.
“Through careful use of empathetic content
and imagery, we were able to satisfy the
needs of Helping Hands as a business, and
the emotional needs of its users.”
For the final word, we’ll turn to Dal Dosanjh:
“I’m still in love with the website. I think
it’s great.”
Are you in the market for a
new website, but can’t find a
web development agency that
understands your marketing plans?
Let our experts show you how our
unique 35-step web build process
can support and improve your
marketing efforts. Call now on
0808 159 7730.

32
ClickThrough is a digital marketing
agency, providing web development,
search engine optimisation, pay
per click management, conversion
optimisation and content marketing
services.
Since 2004, ClickThrough has helped
several companies from big brands to
small start-ups grow Google rankings,
boost conversions, increase return on
digital marketing investment, and stretch
Internet marketing budgets to get value
for money.
We pride ourselves on giving honest
advice based on the latest digital
marketing best practices. Our RITE core
values of Results, Innovation, Trust and
Excellence drive everything we do.
;; A proven and trusted
agency since 2004
;; Creators of BidCops.
com - Europe’s leading free
AdWords Auditing Tool
;; We are a Top 100 Agency on
Recommended Agency Register
;; We have published several
books on digital marketing,
sold on Amazon
;; Proven track record from our
work with clients including
Peugeot, Dunelm, Biffa and
Halfords Autocentres
;; Our people all receive our industry-
leading, Digital Academy training
;; Active members of the IAB,
eConsultancy and SEMPO
;; Thought leaders, giving clients
the inside track on what matters in
search, social media and the digital
marketplace... before it happens!
Whether you are thinking of changing
your search or digital marketing agency,
or just looking to improve your online
conversion rate, our team of search
conversion experts can help.
Find out what we can do to grow your
business. Call us on 0800 088 7486 or
visit www.clickthrough-marketing.com
ABOUT CLICKTHROUGH

The Ultimate Guide to Google's Mobile Friendly Algorithm

Recommended

Recommended

More Related Content

More from ClickThrough Marketing

More from ClickThrough Marketing (6)

Recently uploaded

Recently uploaded (20)

The Ultimate Guide to Google's Mobile Friendly Algorithm