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 mobile.
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.
Responsive design 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.
The biggest 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. If you’re ready to make big changes to your website, contact our team for design services.
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:
Single-column 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.
Mobile-first 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 desktop).
For responsive 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:
Mobile-first 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.
Although 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 on mobile.
The recommended best practice is no more than 3 seconds on a 3G mobile connection.
Source
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.
More importantly, slow loading times kill your conversion rates and just about every other KPI in your marketing strategy. If you’re looking to tackle these issues, we have members of the team on hand to offer you conversion rate optimisation services.
If 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.
To reduce loading times, you can take the following steps:
You 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.
Check 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 difficulties.
Some menus 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. If you are looking to take your content to the next level, we also offer content marketing services.
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.
The 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:
That 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.
For more tips on mobile-friendly popups, take a look at this guide from Sleeknote.
Optimising your 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 on desktop.
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 gestures.
Above all, make sure touch elements are large enough to interact with (padding is your best friend).
Don’t try 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.
People should 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 best practices.
Frustrating web 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.
Always remember 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.
Optimising 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:
Make 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 website:
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’s SEO experience includes working for both agencies and within in-house marketing teams over 8+ years period. With a marketing degree under his belt, he is able to think of the bigger picture and make website recommendations that have benefits beyond SEO. Tom is not one for jargon and likes to explain things in a way that’s easy to digest; because of this, he’s happy assisting internal teams as well as working with external developers when needed. Tom’s approach to SEO is heavily focused on content and usability. He prides himself on being efficient and effective, with great communication and prompt action. Tom lives in Southampton (much to the disappointment of the Portsmouth locals within the company), and in his spare time you’ll find him watching live music, playing games and attempting to imitate his favourite musicians on the acoustic guitar.
Website under-performing but not sure why? Our free review will reveal a list of fixes to get it back on track!
Categories: SEO