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:
- Your site isn’t mobile responsive
- You haven’t optimized for mobile-first indexing
- Slow mobile pages
- Unfriendly navigation
- Page content isn’t immediately obvious
- You’re using popups/interstitials
- You haven’t optimized your CTAs for mobile
- Clickable elements aren’t optimized for touch
- Your mobile forms are killing conversions
With more than half of all web traffic coming from smartphones in 2018, mobile optimization 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 to favor websites that provide a strong mobile experience.
Mobile optimization FAQs
Before we get into the specific reasons your website is struggling on mobile, let’s answer some of the most common FAQs surrounding mobile optimization.
How do I make my website mobile friendly?
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).
How do I optimize for mobile devices?
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 optimize 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.
Why are mobile friendly websites important?
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.
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.
How much does it cost to make your website mobile friendly?
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.
#1: Your site isn’t mobile responsive
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 optimization 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 optimizing 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-optimized experience across each device.
Quick tip
Aim for a consistent experience across all devices so users can move from mobile to desktop and understand where everything is. Use JavaScript to only show the first sentence of large chunks of text on mobile and place a “see more” button users can click to read the full text. By using the display: none CSS property, this text remains visible to search engines but doesn’t show in the browser, allowing you to create page layouts that are perfectly scrollable on mobile.
#2: You haven’t optimized for mobile-first indexing
As I say, responsive design isn’t the only approach to mobile optimization 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.
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 optimize for the change.
Here’s a quick list of what you need for mobile-first indexing:
- Your mobile and desktop pages contain the same content
- Both versions of your page have the necessary structured data
- Both versions of your page have the necessary metadata
- Both versions of your page are verified in Search Console
- Any rel=hreflang tags for internationalization include separate links for mobile and desktop URLs
- Your servers can handle any increase in crawl rate for the mobile version of your site
- Your robot.txt directives are the same (and optimized) for both desktop and mobile versions
- Correct use of rel=canonical and rel=alternate link elements between mobile and desktop versions
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 optimized for mobile.
Quick tip
Although mobile-first indexing will apply to your entire website, any ranking changes will happen on a page-by-page basis. So start by optimizing 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:
#3: Slow mobile pages
Despite all of the research showing how slow loading times kill conversion rates, the vast majority of website 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.
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.
Recommended for You
Quick tip
Work with agencies/developers that make page speed a priority because this is one of the most important performance factors for the end user. If you’re using a WordPress website, take it easy on the plugins, optimize your images and files (CSS, JS, etc.) and use speed optimization tools like Google’s free PageSpeed Insights.
#4: Unfriendly navigation
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.
Quick tip
Create a menu that works on a desktop and then try other ways of integrating the lower level pages on the main page to let users navigate to find out more if they choose to do so.
#5: Page content isn’t immediately obvious
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.
Quick tip
Test, test and test again. Mobile sites should be simple for the user to use and do not require all the flashy gimmicks of the desktop site to succeed.
#6: You’re using popups/interstitials
Many websites use overlays or interstitials to promote the brands’ 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.
Quick tip
Use a banner instead to promote your content on a mobile device.
#7: You haven’t optimized your CTAs for mobile
Optimizing 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 optimize 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.
Quick tip
Effective mobile CTAs need to be incredibly concise and so does the rest of your page content. Remember that text is going to bunch up on mobile displays, pushing your CTAs further down the page and forcing users to scroll further to reach them.
Make sure you hammer home the key benefits of your offer using the appropriate headings and don’t be afraid to add extra CTAs for mobile displays.
#8: Clickable elements aren’t optimized for touch
This is something else a lot of brands overlook while optimizing for mobile. If you want people to actually interact with your website, you need to optimize 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.
Quick tip
Find the largest set of thumbs you possibly can to thoroughly test your website on mobile; they’ll soon find any potential issues.
#9: Your mobile forms are killing conversions
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 optimized 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.
Quick tip
Don’t make your form validation too strict; the aim is to help users complete your forms, not prevent them from submitting information.
Useful tools
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’.