Updated December 1, 2022Reading Time: 8 minutes
Mobile First World
Having a great mobile website is essential now with Google running separate search engine results pages on mobile and desktop, so if you want your mobile site to get any traffic, it needs to be good. Long gone are the days when people would put up with a non-adaptive site (that means images that refuse to load or pinch and stretch the text). So, what are the most important things to keep in mind when trying to create a seamless mobile user experience?
Is It Turned On?
What this means is that Google has begun to treat your website differently depending on which device it is being used on. In simple terms, it means they now crawl your site twice. Once for desktop visitors and once for mobile visitors. So, if your site has just had mobile-first indexing turned on, you should expect to see the Googlebot Smartphone crawling your site, and you may begin to notice differences in how your site appears on the search engine results page when using mobile devices.
What Do You Need to Do?
The first thing you should do when seeing your site has mobile-first indexing turned on is to check how it appears on the SERP. Once you have carried out some basic searches to bring up your page, you can see if the meta descriptions and title tags are working and make sure other cosmetic aspects of your search appearance are still functioning well. Some websites let you view what it looks like on desktop, tablet, and mobile on the backend.
After that quick audit, you should get logged in to your Search Console and take a look at both the Mobile Usability Report and the Page Experience Report. These two reports will show if there are any errors, or problems, from Google’s end with how your site is listed. They will also allow you to compare how your site is performing for mobile compared to the desktop version of your site.
If you notice a big drop-off between the two sites, then it’s a sign that you need to start optimizing your website!
How to Create a Seamless Mobile User Experience
1. Be great from the start.
Make sure your mobile site ranks well. Google has started to prioritize indexing mobile sites over desktop sites, using a different indexing algorithm for each. That means you’ll need to keep an eye on how pages respond on devices. What appears in a mobile search will differ from the now-traditional desktop-based SERP. Your site may begin to see issues as users will be confused if they find you on a desktop/laptop but not on their smartphone. How a website performs in organic search depends on the changes Google is hatching to the indexing algorithm. Be prepared to test across devices, putting an emphasis on all types of mobile formats. Here’s a video from Google Developers on Mobile-First indexing.
2. Make sure the style transfers to mobile.
If you have to change the design or structure of your website so it functions well on mobile, that isn’t a problem. But if you change the feel or design, you could end up confusing your users by not providing a consistent experience. So try, as best as you can, to match the style of whatever device you’re using. Here are some things to check on the mobile version of the page to make it mobile-friendly
- Use Headings – The heading (H1, H2, etc.) tags are important for normal SEO as they tell the search engine where to look for the most important information, but they’re even more useful on mobile, as not only do they point Google in the right direction, but they break the text up clearly for the reader.
- Quotes and Highlights – Another way of breaking up the text to make it easier to digest on a small screen is by highlighting important passages of the text. One way you can do this is by inserting quotes or highlighting information that you think is important. Again, this makes the text easier to break down and grabs the attention of someone reading on mobile.
- Summary at the Top – Sometimes, introduction paragraphs can be a little esoteric. Try to avoid this on mobile. Or, if you must write something complex in the introduction, add a really brief summary above. This helps the mobile reader know exactly what’s going on without having to scroll any further down the page to find out what you’re trying to say.
- Have a Table of Contents/ Or Put Info on Tabs/ Expandable Content – Create a table of contents that links to different sections of your page or put tabs at the top of the page to separate content. Or you can even add sections that will expand or contract when you click on them. This makes it very simple to navigate for a mobile user and allows you to put more information on the page without having to worry too much about scroll fatigue.
- Use Bullets and Lists – Listed information is easier to read quickly. Where you can, add bullet points or lists to make your content scannable for a reader. When we’re using our mobile devices, we’re often on the move or in a busy environment, so keeping things short and to the point will help your key points get seen quickly.
3. Make sure that buttons, CTAs, and forms are properly optimized.
Having valuable content and a good page design is great, but if your forms aren’t easy to fill in on mobile, you’re wasting your time. The same goes for your calls to action (CTAs). They need to be easy to see and click.
If you enable online payments, make sure it is also easy to use on mobile. Nothing is worse than searching through a site for a product you want, then finding the UI at checkout is so terrible that you have to abandon the purchase. The same also goes for interactive content. Check that the videos you have are working on mobile or any plugins for your website are fully functioning on both sites, without any large gaps on the page.
4. Make sure you have Click to Call set up.
Copying and pasting a phone number is a thing of the past. Make it easy for your visitor to connect. Few people will want to grab a pen and write your phone number down. If your phone number is on your mobile site, make it clickable.
5. Link to your social platforms.
When on mobile, people often like to look through the filter of social media. While looking at a new website can sometimes be confusing, Facebook or Instagram pages for companies have a uniform structure. So make it easy for customers who want to see your social profiles. Have large, easy-to-access buttons linking to your different profiles.
WordPress Mobile Solutions
For a WordPress mobile solution, the WPtouch plugin is a favorite. It’s a quick way to make your site mobile-friendly quickly. However, you must have a relatively current version of WordPress software (version 3.8 or higher) running. If you’re not, I’ll talk more about that later.
There are two versions of WPtouch. One is a premium (paid) version, while the other is free. You can download Version 3.7.7 in the Plugin Directory on WordPress.org. For most websites, the free version should be sufficient. It gets updated almost every month so this is a sign that WPtouch’s developers are responsive (pun intended) to support issues.
Here’s what the plugin does:
- Enables a simple mobile theme for mobile visitors of your WordPress website.
- Allows you to customize some aspects of the mobile appearance without modifying code
- Gives your visitors the choice between the mobile theme and your website’s regular non-responsive theme.
What Are Accelerated Mobile Pages?
Google rolled out AMP back in February 2016. It’s a collaborative effort introduced by Google to improve website speed for mobile devices.
Using AMP means that there will be two hosted versions of your site. The website you’re hosting as usual, and then the cached version being hosted by Google. Faster means your viewers won’t leave (bounce) because they’re annoyed by slow-loading pages that have a tendency to error or make devices freeze.
Because it’s a cached page and it’s hosted elsewhere, you might worry about what that means for monetization. According to Google, advertisements still belong to the site owner. They’ve built the platform to work with most major advertisers, so any current advertising monetization shouldn’t be negatively impacted.
You can also use Analytics for your Accelerated Mobile Pages. They’ve developed the platform to be provider neutral, so you’re not locked into using Google Analytics just because AMP is created by Google, though you certainly can.
Many publishing or news websites have begun using AMP, and Google confirmed they would give a ranking boost to sites using Accelerated Mobile Pages. But examples of AMP paying off are not that easy to find.
This is because, at the moment, AMP doesn’t offer a great number of features. Most AMP sites are fairly simplistic in their structure, with static pages. So if you’re running a news website, like the Guardian, it’s okay. However, if you’re running an eCommerce website with various different plugins or systems, it can quickly become very complicated to implement. If you couple that with other possible issues (like the caching of payment information or customer data on Google’s servers), you can see why it hasn’t yet taken the world by storm.
eBay, however, was one major website to try out AMP, although only on selected pages. They found that users were impressed with the increased loading speed. As of yet, they haven’t reported an increase in purchases because of it.
This itself could be, in part, because even when you see an AMP highlighted link (as in the image above), you are not always directed to an AMP page — the HTML page sometimes gets displayed instead. So even when you are using AMP pages, they’re not always being sent to searchers.
One good point about AMP is that it’s easy to install if you’re using a WordPress site. Install the AMP plugin and follow the installation steps. With a little technical know-how, you can create Accelerated Mobile Pages up and running in no time. The AMP project website has a tutorial on where to put the code.
How to Set up Accelerated Mobile Pages?
The Accelerated Mobile Pages Project has a great tutorial to show you just how to set up your own AMP page and validate it. Because the code is streamlined, there will be differences in HTML and in the way that you can use the HTML tags. So you have to follow those rules exactly in order to validate your page. If you’re unsure whether or not to jump on this bandwagon, take some time to look over the tutorials and view demos. If you’re a WordPress user, there’s already a plugin to do most of the work in creating your AMP pages for you. Whether you’re ready to create your own AMP pages or not, you should definitely take some time to see what it’s all about and how it can speed up your site to improve mobile UX
Is It Worth It?
Since AMP went live, we have tried using it to improve our own analytics, and we have noticed improvements (although not at astronomical levels). However, not all feedback is positive. A recent article from Search Engine Land is critical, to say the least. They don’t argue that AMP on simple pages increases speed, but they think that as the complexity of what you can do on AMP increases, it will lead to more code bloat. Which defeats the whole purpose of AMP.
Patrick Stox argues that spending time setting up AMP is essentially a distraction. If your site isn’t rendering pages quickly enough, sort your site out! Don’t just start using AMP as a proxy.
What mobile user experience means for your business
Depending on the demographics of your target audience, their mobile UX can have a noticeable effect on their interactivity, interest, and attitude toward your brand. Review your analytics and see if most of your visitors are viewing the mobile version of your site so you can allocate your efforts toward a mobile-friendly site.
FAQs on Mobile Experience
Why is mobile UX important?
User experience involves the complete process of a user interacting with your product or service on mobile. The goal is to create a design that is clear to understand with visual cues that guide the user towards a purchase or subscription.
Why is mobile user experience different from that on desktop?
Mobile devices are more susceptible to privacy issues as they contain far more personal data than computers. The experience is also different across users since mobile devices have different screen sizes and capabilities.
Why is a mobile-first strategy important?
More than 80% of the world’s population owns a mobile device, and we can expect it to keep increasing. As such, it’s a must for website owners to have a mobile-friendly website. It’s also Google’s initiative to prioritize indexing the mobile version of sites first.
How does screen size affect mobile user experience?
People with screens larger than 4.3 inches were found to be more efficient at finding information. Consider the smallest average screen size and make sure the text on your website is readable and images are visible.