9 reasons your website doesn’t work on mobile

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.

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 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.

How do I make a site mobile responsive?

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:

• Prevent horizontal scrolling on mobile
• Deliver the same content on all devices
• Ensure text legible on all devices (size, contrast, etc.)
• Ensure content is visible in all conditions (think about bright light outdoors)
• Provide an intuitive navigation menu for mobile devices
• Be fully optimised for touch on mobile (clickable elements large enough for finger touches, no mouse-hover interactions)
• Provide a consistent experience across all devices so users can move from mobile to desktop and know where everything is.

Extra tip

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.

#2: You haven’t optimised for mobile-first indexing

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).

How do I optimise for mobile-first indexing?

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:

• 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 internationalisation 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 optimised) 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 optimised for mobile.

#3: Slow mobile pages

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.

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.

How do I reduce page loading times?

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:

• Reduce the number of server requests
• Compress your images
• Minify your core files (HTML, CSS, etc.)
• Use clean code
• Use the latest versions of code (HTML5, CCS3, etc.)
• Reduce the amount of JavaScript
• Avoid unnecessary redirects
• Try not to use too many web fonts
• Minimise the use of plugins where possible
• Implement caching (this only helps return visitors)
• Use a CDN if you’re targeting international/global audiences

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.

#4: Poor mobile navigation UX

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.

How do I improve mobile navigation UX?

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.

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.

#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.

How do I make content more prominent on mobile?

There are a number of steps you can take to make your content more prominent on mobile:

• Reduce loading times!
• Ensure main content is visible in the first view of every page when it loads on mobile screens (above the fold)
• Reduce the size of elements above main content (headers, nav menus, etc.)
• Optimise title sizes to make main content more visible
• Avoid using popups that block access to content
• Implement lazy loading so text content loads before images, videos, etc.

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.

#6: You’re using popups / interstitials

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.

How can I implement mobile-friendly popups?

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:

• Set a delay to trigger popups after users have already started engaging with your content
• Use exit-intent popups that only trigger when users look like they’re about to leave your page
• Use fixed-position banners instead of fullscreen popups
• Make it easy for users to close any popups by tapping a prominent X icon
• Prevent return visitors from seeing the same popup multiple times
• Implement notifications instead of popups
• Implement a chatbot/chat widget
• Place CTAs on your pages instead of using popups (including blog posts)

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.

#7: You haven’t optimised your CTAs for mobile

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.

How should I design CTAs for mobile?

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:

• Create full-width CTAs
• Maximise contrast to make your CTAs stand out (again, think about users in bright, outdoor light)
• Make sure the whole CTA is visible within the height of mobile displays
• Keep CTA headlines to a maximum of three lines on mobile
• Optimise text sizes were necessary
• Consider creating shorter headlines and CTA text
• Make sure buttons are large enough for users to click on touch screens
• Reconsider CTA placement for mobile
• Test mobile CTAs

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.

#8: Clickable elements aren’t optimised for touch

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.

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.

How do I optimise a website for touch?

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:

• Reduce the number of clicks to complete an action where possible
• Illustrate touches with animations to confirm they’ve been registered
• Ensure touch elements are never blocked by other page elements
• Make sure clickable elements are large enough
• Use padding to increase the clickable size of elements
• Avoid mouse-hover interactions
• Leave the default browser scrolling alone
• Optimise text sizes so users never need to zoom
• Optimise form fields for typing

There’s a great guide to optimising for touch on WebsiteBuilderExpert.com with a more in-depth look at best practices.

#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 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.

How do I optimise forms for mobile?

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:

• Create responsive forms
• Stick to single column layouts
• Stack form fields vertically, not horizontally
• Set fields to 100% width
• Keep form fields to a minimum
• Consider multi-step designs for longer forms
• Use padding on fields and buttons to make them more clickable
• Add enough vertical space between fields so users can click between them easily
• Reduce the amount of typing users need to do
• Markup your forms with HTML5 so the relevant keyboard format automatically appears
• Make sure any validation gives visual feedback as users type
• Measure performance with form analytics
• Test your mobile forms

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.

[“source=vertical-leap”]