If your mobile rankings
have suffered recently, simply telling you to improve the mobile experience
isn’t going to help you diagnose the specific problems you’re having. So, in
this article, we look at nine reasons your website might not work on mobile and
how to fix each issue. These are:
With more than half of all web traffic coming from smartphones in 2018, mobile optimisation should be a priority for every brand. This is where the majority of consumer journeys now start and Google has introduced a number of algorithm updates over the years, that SEO agencies need to be aware of, to favour websites that provide a strong mobile experience.
Before we get
into the specific reasons your website is struggling on mobile, let’s answer
some of the most common FAQs surrounding mobile optimisation.
There are various approaches to creating a mobile friendly website but the two most common are: Responsive design: Create a single website that adapts layouts, content and element sizes to suit different display sizes.Mobile sites: Build a separate mobile website in addition to your desktop site.Responsive design is generally the recommended approach for most types of website, especially since Google has moved over to mobile-first indexing (more on this later).
This is a tricky question to answer in a short space but you’ll be getting a more in-depth answer throughout the rest of this article. For now, here’s a list of the key areas you need to optimise for the best mobile performance: – Loading times– Navigation– Page layout– Content– Element sizes (text, images, buttons, etc.)– Touch elements– Web forms File sizes (images, code files, etc.)Your priority is to create the best possible experience on mobile devices and it helps to focus on the limitations of these devices. You’ve got limited screen space to work with, potentially weak data connections and all users really have to navigate and interact with your site is their fingers. It pretty much comes down to visibility, navigation and speed.
With the majority of traffic now coming from mobile devices, this is where the majority of your marketing strategies are going to generate leads. The majority of consumer journeys now begin on mobile devices and poor experiences are going to kill your chances before they’ve even begun. That’s not all either. – 53% of all traffic came from mobile in 2018– Google rewards mobile friendly sites (and punishes the not-so-friendly)– Various studies show users don’t return to a website after a bad experience– That means poor mobile experience could cost you 53% of visitors– Today’s consumers move between multiple devices, making a consistent experience increasingly important Ask yourself how much time, money and other resources you pile into lead generation, increasing traffic and your other marketing strategies. Now, tell yourself 53% of that is wasted because you don’t have a mobile friendly website. That’s why it’s important.
Probably a lot less than not having a mobile friendly site will.
Now, that we’ve
covered those, here are the top nine reasons your website isn’t working on
Let’s state the
obvious to begin with. The number one reason why your website might be failing
to work on a mobile device is that it is simply not mobile responsive. This
means the website doesn’t proportionally resize to different size screens.
isn’t the only approach to mobile optimisation but it is the one Google
recommends and it makes a lot of sense from an SEO perspective (see reason #2).
There are challenges with taking the responsive route, though – especially when
it comes to optimising page content for multiple screen sizes.
mistake brands make is designing layouts and content for desktop and then
trying to scale them down for smaller screen sizes. This isn’t going to create
an intuitive experience on mobile. Instead, you need to create content with all
devices in mind and consider the needs/limitations of these devices from the
very beginning. This will enable you to make design choices that create a
consistent, highly-optimised experience across each device.
Google offers a free online course called Responsive Web Design Fundamentals on Udacity, which is great if you want to learn how to design and code responsive pages. If you’re not looking to get involved at the code level, it’s still important to have a solid understanding of Responsive design principles so you can manage design teams or choose the right themes on platforms like WordPress.
A good responsive design should:
layouts are mobile-friendly right out of the box. All you need to do is set
your div widths to 100% and they’ll automatically fill the width of any
display. As long as your text and images are set in responsive units (em, %,
etc.), you should be good to go.
For page sections
that require columns (service sections, product listings, etc.) you can create
columns within one of those 100%-width divs. This allows you to set them as
horizontal columns on desktop and wider displays and then vertically stack them
as full-width divs on mobile.
As I say,
responsive design isn’t the only approach to mobile optimisation and many
brands have opted to develop separate mobile websites. The thing is, Google is
changing the way it indexes web pages to reflect the fact that most searches
now take place on mobile devices.
indexing essentially means Google will now show the mobile version of a page by
default, only showing desktop pages when no mobile version is present.
Now, this only
affects you if you’re running separate desktop and mobile pages on different
domains – eg: yoursite.com and m.yoursite.com. Previously, the desktop
version of each page would show up in Google Search but mobile-first indexing
means the mobile version will show, as standard – unless there’s a desktop version (which will show for searches on
websites, nothing really changes because the mobile and desktop versions of
each page are the same. However, websites running any separate mobile pages
need to optimise for the change.
Here’s a quick
list of what you need for mobile-first indexing:
indexing is still rolling out and you should have received a notification from
Google in Search Console if your site has already been moved over. Don’t wait
until your site is moved over to take action, though, because this will affect
pages that are poorly optimised for mobile.
mobile-first indexing will apply to your entire website, any ranking changes
will happen on a page-by-page basis. So start by optimising the most important
pages on your site and work from there. For more information on mobile-first
indexing, take a look at our previous posts:
You can also find Google’s documentation on mobile-first indexing
by clicking here.
Despite all of
the research showing how slow loading times kill conversion rates, the vast
majority of websites fail to deliver this performance essential. In fact, Google’s own research suggests the average web page takes 15 seconds to load
best practice is no more than 3 seconds on a 3G mobile connection.
As of July 2018, mobile loading times are now a ranking factor which means slow loading times can hurt your position in the mobile SERPs. However, slow loading times also negatively impact multiple other signals that Google uses to determine where your pages should rank: bounce rates, time spent on page, pages visited, etc.
slow loading times kill your conversion rates and just about every other KPI in
your marketing strategy.
you’re loading times aren’t hitting that 3-second mobile benchmark, you need to
address loading times. You can use Google’s
free PageSpeed Insights to test your pages and get
feedback on how to optimise for performance.
reduce loading times, you can take the following steps:
might also want to look into Accelerated
Mobile Pages (AMP), which provides a fast-loading framework for
mobile pages. This isn’t a decision to take lightly and it won’t solve your
loading problems on desktop but it is an option to consider if delivering
mobile content is a priority for you.
out our Bitesize blog on AMP for a quick summary
of what it has to offer.
The menu is one
of the most important, if not the most important thing on a website. Small
websites have quite a simple job, with the desktop menu being easily duplicated
on the mobile version of the website. Large sites, however, can have
display many pages going up to third tier navigation levels.
If this is
transferred across to the mobile site there is the potential that the user will
spend a long time scrolling through the vertical menu trying to find the right
page. If you amend the mobile menu to only include top level pages you may be
able to keep users on your pages, but they might be missing out on valuable
information from the lower level pages.
The hamburger design has become something of a standard
practice for mobile navigation, especially for responsive sites. This approach
isn’t without its downsides, though – including the fact it hides the
navigation menu from mobile users. There are alternatives, such as fixed “tap
bars”, but these also have their own pros and cons.
Take a look at Nick Bibach’s article for Smashing Magazine, Basic Patterns
For Mobile Navigation: Pros And Cons, for an in-depth look at
different design approaches.
It’s always more difficult to optimise large navigation
menus for smaller devices. You might want to look at creating a simplified menu
for mobile that only includes links to primary pages. You can add navigational
elements to these primary pages to provide access and guide users to relevant
parts of your site.
Scaling is always
an issue with a responsive website and getting it to scale correctly whilst
showing the correct information can be the difference between engaging the user
and the user leaving your website. Having a logo, menu, slider and breadcrumbs
before the content can look great on a desktop. When this is scaled down, the
user may need to scroll a lot before they actually get to the page content.
This has other issues as well if your pages all have the same header, with the
user thinking that the page didn’t even change.
There are a number of steps you can take to make your
content more prominent on mobile:
If you’re going to take the lazy loading approach, make sure
you follow Google best practices to avoid indexing
problems. It’s a good solution for improving content access and mitigating
loading times, as long as you implement it correctly.
Many websites use
overlays or interstitials to promote the brand’s app, get a user to sign up to
their newsletters or give special offers. When these are displayed on a mobile
device they tend to have a negative effect on the user experience, causing frustration.
best way to implement UX-friendly popups is to avoid them altogether. However,
plenty of brands find they’re a viable lead generation tool and there are a
number of ways you can reduce their negative impact, as well as some
alternatives to consider:
final point is an important one. Do you really need popups on your pages or can
you simply place CTAs on them instead? Really, your CTAs should be compelling
enough that you don’t need popups, which are essentially calls to action in a
more intrusive format.
more tips on mobile-friendly popups, take a look at this guide from Sleeknote.
website’s layouts for mobile devices is great but your success is going to be
short-lived if your CTAs aren’t getting results on mobile. The effectiveness of
your calls to action will depend on how you optimise the content surrounding
them, their visibility on mobile, where you place them on the page and all
kinds of other factors.
Don’t assume your
CTAs are going to perform on mobile just because they’ve been getting results
In general, the same principles apply in terms of creating
compelling CTAs but the challenge is more difficult when you have less screen
space to work with. Effective mobile CTAs need to
be incredibly concise and there are some important principles to remember:
On mobile, your page content is
going to push CTAs further down the page so you might need to have a rethink in
terms of placement. Another option could be reducing the height of mobile
content by only showing the first line or paragraph and hiding the rest with
the display:none; CSS value.
For more ideas on creating
mobile CTAs, take a look at these 12 best practices on the WPMU DEV blog.
This is something
else a lot of brands overlook while optimising for mobile. If you want people
to actually interact with your website, you need to optimise for touch.
Navigation menus, CTA buttons, web forms, media players and just about everything
that turns casual browsers into potential customers revolves around touch
Above all, make
sure touch elements are large enough to interact with (padding is your best
squeezing too many touch elements into a small space because people are only
going to end up hitting the wrong thing. Also, make sure users can still see
all the content they need to when touch elements pop up on the screen. For
example, don’t leave people typing blind because their device’s native keyword
has covered up the text field they’re trying to interact with.
only need to tap a clickable element once for it to function. It’s important to
understand some people have larger thumbs than others but this isn’t the only
thing you need to consider when optimising for touch:
There’s a great guide to optimising for touch on WebsiteBuilderExpert.com with a more in-depth look at
forms can be the bane of users searching on a desktop. When this experience is
switched to a mobile device it can be the difference between missing out on a
lead to a competitor, or making the sale yourself.
First of all,
make sure you’re building your web forms with the correct HTML5 code so the relevant keyboard pops up for messages, email
addresses, numbers, etc. Stick to single column layouts and, once again, use
plenty of padding on every element so they’re nicely optimised for touch.
how much of a pain typing on mobile is. Enable auto-complete and stick to the
minimum number of fields necessary to reduce users’ workload.
forms for mobile is a topic that doesn’t get as much attention as it should.
There’s a lot of good information in this
CXL article but here’s a quick summary of best practices to follow:
sure you’re getting the right form analytics data to measure things like form
interactions, successful submission rates, the amount of time users spend
filling out forms (and individual fields) and the last field they interact with
before quitting. You can do a lot of this with event measurement in Google Analytics but
you’ll get the best results from dedicated form analytics tools.
Don’t make your
form validation too strict; the aim is to help users complete your forms, not
prevent them from submitting information.
There are a few
things you can do/tools you can use to test the mobile-friendliness of your
Finally your own
mobile phone is always a good indicator. Perform a site search (type
site:www.yourdomain.com) into your mobile browser. Next to your listing you
should see a tag which states ‘mobile-friendly’.
Find out more about our mobile SEO services or, of you’d like one of our team to take a look at your site, call us today on 02392 830281. In the meantime, you might find these other mobile-related articles helpful:
Tom is a Senior SEO Specialist at Vertical Leap.
We send a semi-regular newsletter on business and other related topics, with links to the latest stories from us and what we’re reading around the web.