How to Design a Better Mobile Experience For Your Users
With smartphones today you can quickly load up any webpage from the browser, conduct product research, and make a purchase—all in a matter of minutes. The ubiquity of the smartphone represents a massive shift in consumer behaviour. Now you’d be hard pressed to find anyone without one.
Why does this matter?
Because consumers are increasingly shifting their Internet usage to mobile. It’s now to the point that mobile traffic exceeds desktop worldwide:
Google has also announced that it will be prioritising mobile versions of a website in its search index:
“Mobile-first indexing means that we’ll use the mobile version of the page for indexing and ranking, to better help our – primarily mobile – users find what they’re looking for.”
The new changes to the ranking algorithm means that mobile-friendly sites have an edge over their desktop only counterparts.
Mobile matters for another reason: Local search. Data from Google has found that one third of mobile searches are related to location. If your business has a local presence, designing an optimised mobile experience needs to be a priority if it isn’t already.
There are plenty of marketing strategies to improve local search results. These include:
- Creating a Google My Business page
- Building local business citation
- Getting customer reviews
- Generating links through outreach campaigns
Each of these are crucial to ranking for highly coveted keywords. But here we’ll be talking about how you can design a better mobile experience for your users.
Go Mobile Friendly With a Responsive Design
Start by heading over to Google’s Mobile-Friendly Test tool.
Simply enter in your URL and click the “Run Test” button. After a few moments you’ll see the results. If your site is mobile friendly, you should see the following:
But if not you’ll need to take immediate steps to ensure your site meets all mobile friendly guidelines. There are three main approaches:
- Separate URL
- Dynamic serving
- Responsive design
Each delivers a mobile friendly experience but they differ in how the code and URL are served. For example, creating a separate mobile site involves serving different code depending on the device. It’s an adequate solution but not exactly practical as it requires more resources to build and maintain. A separate mobile site also dilutes your SEO marketing efforts.
Google’s recommended solution is responsive design—A grid-like structure that dynamically adjusts to all screen resolutions. The code resides on the same URL regardless of the device a user is on.
You’ll need to set the meta viewport tag which gives the browser instructions on page scaling. Follow the instructions that Google provides on implementing responsive design to get started. Alternatively, you can also work with one of our Perth web designers to build a mobile friendly site for you.
Prioritise Content Above the Fold
The “fold” refers to the upper portion of a page that’s visible without scrolling. As you might have guessed, content that’s front and center tends to get the most attention.
Data from the Nielsen Norman Group found that viewing time above the fold is 57%:
Not surprisingly, content farther down the page received less attention.
Desktops offer web designers more space to work with but it’s a different story on mobile. Space is much more limited not to mention that mobile users tend to be more impatient. They want answers and they want them now.
So make it easy for visitors to find what they’re looking for. Here’s a good example of a mobile site that priorities key information above the fold:
Here’s what A1 Locksmiths gets right:
- Contact information is clearly displayed
- Selling points are listed (e.g. “24/7 Fast call out service”)
- A call to action button lets visitors call from their device
- Hamburger menu lets users tap through to other pages
Someone in desperate need of a locksmith won’t have the patience to scroll through pages of content. The content above the fold works well. It includes all the information needed to contact a locksmith.
Depending on your business you’ll want to prioritise certain types of information. For example, restaurant websites should make operating hours and the menu clearly visible. Meanwhile, a services business like a consulting firm should prominently feature a call to action to schedule a consultation.
Whatever your business, make the content above the fold count.
Because it does.
Make Your Content Easily Legible
It’s happened to all of us:
You search from a mobile device and tap through to a result.
But then you have to pinch and zoom just to read the text. Most users will simply bounce out rather than deal with a poorly optimised experience.
Here’s an example of what you DON’T want your site to look like on mobile:
It’s almost impossible to read the text without zooming.
And here are the results when the same site is put through Google’s mobile friendly test:
Not only is the text too small but users are also more likely to accidentally tap on the wrong elements. So don’t make the same mistake here. Otherwise you risk users bouncing out and tapping through to other search results.
Here’s how you can improve your content’s legibility:
- Use at least a 14px font size
- Shorten your paragraphs and sentences
- Use subheadings to structure your page
- Use a line length between 45 to 60 characters
- Use lots of white space to reduce clutter
- Opt for a sans serif font
Here’s an example of a mobile design that does content legibility right:
The title of the blog post is clearly legible and there’s even a short subheadline that describes what users can expect from the content.
Implement these changes to increase user engagement.
Optimise Your Meta Tags
Meta tags are short snippets of information that reside in a page’s code. They help search engines better understand what your site is about and are also beneficial from a user standpoint. The main ones you’ll want to focus on are your titles and meta descriptions.
Let’s look at how to optimise each:
Title tags are easily one of the most important on-page SEO factors. They’re also what users primarily look at when deciding on which page to click on. Compelling titles are key to standing out in the search results and driving more traffic.
Take a look at these titles:
The first result offers a good example of a well-written title: It includes its target keywords and a clear value proposition that entices users to click through. The other titles are rather bland as they simply consist of the brand name and keyword.
Here’s how to get the most out of your page titles:
- Write unique titles for each page
- Place target keywords closer to the beginning
- Brand your titles with your company name
- Avoid keyword stuffing
- Include a clear value proposition
Note that Google has increased the length of title tags on mobile devices to 78 characters. This is actually about 8 characters more than title tags on the desktop search results.
Take advantage of that extra space by creating descriptive titles for each page.
Meta descriptions are short snippets of text that appear below the titles in the search results. They typically consist of a few sentences that describe the page’s content. These meta tags aren’t directly tied to search engine rankings but it’s still important to optimise them for each page.
Here’s an example of a well-written meta description:
It includes the target keyword (car hire in Perth) and offers a number of enticing value propositions. The use of structured data also displays star ratings and a daily price which helps the listing stand out more.
In contrast, here’s an example of a listing that ranks for the same query:
The meta description here is poorly optimised. It doesn’t include the target keyword and has a weak value proposition. The text also seems to just repeat itself again instead of ending with a strong call to action to click through and learn more.
The difference between the two is clear—The first is better optimised and more likely to drive more clicks from the SERPs as a result.
Here’s how to make your meta descriptions more effective:
- Include a clear value proposition with a strong call to action
- Keep your text within 300 characters or less
- Include your target keyword at least once
- Craft unique descriptions for each page
- Avoid keyword stuffing
- Implement structured data
Optimising meta tags for each page can be rather tedious. But well-written title tags and meta descriptions can dramatically increase your click through rates.
Improve Loading Times
That’s the time Google recommends that mobile sites load.
It’s a challenging feat to pull off. But the reality is that mobile users don’t have the patience to wait for pages to load. They want answers now and won’t hesitate to leave a site that takes too long to load.
Data from Google has even found a strong correlation between loading times and bounce rates:
Start by testing your mobile site speed with the free tool from Google. Simply enter your URL and click the arrow button. The tool provides a brief overview of how your site performs on 3G and a percentage of estimated visitor loss.
Here’s an example:
Reddit is one of the most popular sites on the web so it’s likely doing fine. But if your site takes this long to load, users will be less forgiving and won’t stick around for long.
The tool also provides an industry comparison:
And top fixes for roadblocks that are slowing down the page:
A more detailed report is available by clicking the “Get My Free Report” button.
Follow these steps to boost your site performance:
1. Compress Images
Unoptimised images are one of the biggest culprits of poor loading times. High resolution images may look nice but they tend to be unnecessarily large in file size.
If you use WordPress, download and install the WP Smush plugin:
The plugin strips out unnecessary metadata from your image files and can be setup to compress new images you upload.
2.0 Leverage Browsing Caching
Web browsers communicate with servers to retrieve and load content. Caching means temporarily storing certain files in a user’s browser. This helps to cut down loading times as the browser only needs to download updated content on the user’s next visit.
Download and install the W3 Total Cache plugin to get started:
Be sure to go into the plugin settings to enable page and browser caching.
To really take your site performance to the next level, you’ll want to consider investing in a Content Delivery Network. A CDN consists of a geographic network of servers. Loading times are cut down as content is loaded from the server closest to the user.
Even a one second difference can have a positive impact on your conversions.
Optimising the mobile experience is more important than ever. Users are increasingly shifting their attention to mobile devices and that trend shows no signs of slowing down. Even Google’s algorithms are beginning to prioritise mobile as part of their mobile first index initiative.
It’s clear that mobile can no longer be ignored. Follow the steps as outlined here to design a better mobile experience for your users and drive more conversions to your bottom line.