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:

Design Better Mobile Experience For Your Users Perth Web Design

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:

Design Better Mobile Experience For Your Users Perth Web Design

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.

Design Better Mobile Experience For Your Users Perth Web Design

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%:

Design Better Mobile Experience For Your Users Perth Web Design

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:

Design Better Mobile Experience For Your Users Perth Web Design

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:

Design Better Mobile Experience For Your Users Perth Web Design

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:

Design Better Mobile Experience For Your Users Perth Web Design

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:

Design Better Mobile Experience For Your Users Perth Web Design

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

 

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:

Design Better Mobile Experience For Your Users Perth Web Design

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 Description

 

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:

Design Better Mobile Experience For Your Users Perth Web Design

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:

Design Better Mobile Experience For Your Users Perth Web Design

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

 

One second.

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:

Design Better Mobile Experience For Your Users Perth Web Design

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:

Design Better Mobile Experience For Your Users Perth Web Design

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:

Design Better Mobile Experience For Your Users Perth Web Design

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:

Design Better Mobile Experience For Your Users Perth Web Design

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:

Design Better Mobile Experience For Your Users Perth Web Design

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.

 

Final Thoughts

 

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.