Why and How to Optimize Your Website for Mobiles?

Are you losing website visitors? The chances are that you are if your website is not optimised for the mobile experience. The days of people engaging exclusively on desktops are long over.

In 2016, mobile overtook the desktop for the first time as the primary device to access websites. This didn’t come as a huge surprise because, as far back as 2015, Google reported that more searches were conducted on mobile than on any other device category. StatCounter, an internet usage monitoring firm, says that at the end of 2017, the combined traffic from mobile and tablet devices tipped the balance at 56.74 per cent (up from 51.3% in December 2016), vs 43.26 per cent for desktop access. And guess what? This trend will continue to grow. If you want to keep winning visitors and grow your business, you need to optimise your website for mobile.

Doing this is essential for doing well in search engine results pages (SERPs) and for excellent user experience (UX). In December 2017, Google made a transition to a mobile-first index. Simply put, the search giant has some new rules favour mobile-optimized sites in their rankings. They want to index and rank your area based on your mobile experience's content, not your desktop experience as it has historically done.

With this in mind, how do you start your mobile optimisation journey? It's always better to withdraw from the basics.

WHAT IS MOBILE OPTIMIZATION?

In layman's terms, mobile optimisation is ensuring that visitors who access your website from mobile devices have an experience optimised for that device. It looks at site design, structure, page speed, and more to ensure mobile visitors are offered the best experience.

Your first focus in achieving this should be to look at just how you deliver mobile-friendly content. Two approaches that work great for this are mobile-first strategy and responsive web design.

UNDERSTANDING THE DIFFERENCE BETWEEN MOBILE-FIRST AND RESPONSIVE WEB DESIGN

When a business develops its website, the design is often based on the assumption that users will browse it on a desktop computer. Then, the website is modified to adapt to other devices, including smartphones and tablets. In other words, the site is scaled down. This approach is widely known as “graceful degradation” or “desktop-first.” Unfortunately, many visual aspects and features of a “desktop-first” website usually adapt poorly to mobile devices, hence the need for a “mobile-first” approach.

Mobile-first describes a build strategy in which a website is designed for smaller screens first and then scaled up from there — more features and content are added for bigger and bigger screens. It is also known as "progressive enhancement” and was first outlined in 2009 by Luke Wroblewski.

On the other side, the term “responsive web design” describes a technique in which a website’s design is optimised to adjust to the size of users’ screens automatically. The website's design, content, and user interface are adapted so that visitors can seamlessly visit it on any device and any browser without hiccups.

When you first create your website, you don’t have to choose between a mobile-first or responsive design. Instead, the former is design strategy, while the latter results from a technical approach. However, to achieve a great mobile experience for your website, it's essential to understand how these two approaches work.

OPTIMISING WEBSITE MOBILE EXPERIENCE

From understanding the basics, let's learn how to optimise your website’s mobile experience for performance in search.

1. Design for “the finger.”

You'd agree that mobile users primarily navigate their devices’ screens with their fingers instead of precision-friendly mouse pointers, so you'd want to ensure that your design is “finger-friendly.” Put differently, design for touch!

Accidental and inaccurate taps are standard on smaller screens and can be annoying. Users want to be able to scroll and tap with ease. They don't want to pinch too much, zoom in to tap on something, or fill out a form.
 

2. Create fluid layouts

For the best experience, your website should be able to adjust to the user's screen size. But the fact is, there are too many screen sizes out there to decide which ones to design for. So the best approach is to create a layout that adapts as seamlessly as possible to all of them, which is what fluid layouts help you do.

A fluid layout (also called liquid layout) uses relative units of measurement (percentages) instead of fixed units such as pixels.

As you might expect, this affords greater malleability and fluidity. More plainly, by setting a percentage, you won’t have to think about device size or screen width, and consequently, you can find a reasonable solution for each use case because your design’s size will adapt to the size of the device used.
 

3. Use compression tools

Compression tools can significantly enhance your website functionality and help you optimise the same for an excellent mobile experience.

Here are some options for you:

• Image compressor — for reducing the size of your .jpeg and .png files while keeping the quality intact.

• Script compressors such as HTML minified or Gzip compressor — for automatically removing unnecessary comments, whitespace, or code

• CSS minifiers and CSS compressors — linking CSS code together and improving performance.

4. Go for speed

Ever played the racing video game, Need for Speed? It's time to apply the same fleetness to your website!

Users expect you to deliver a fast, frictionless mobile experience. And those expectations keep rising as more and more users rely on mobile in their micro-moments. So, how fast should your website page load time be? Simple! It needs to be fast enough for your visitors.

But more specifically, two seconds is a good cusp. In a Google Webmaster video, Maile Ohye states that:

“2 seconds is the threshold for e-commerce website acceptability. At Google, we aim for under a half-second.”

Why should you optimise your mobile site's page speed?

Studies have found that mobile users often do more than a handful of things on their devices — browsing on a browser, using apps, looking at incoming Whatsapp messages, etc.

This accounts for divided attention. In building your website for the mobile user, you need to address this by optimising it for speed. Why? Because nearly half of users will abandon a website if it isn’t loaded in 2 seconds, and most will never return.

Start by testing your site to see its load time speed.

TESTING FOR MOBILE USABILITY

Testing plays a huge role in mobile experience optimisation. Without it, you won't know where to make changes or improvements. Small SEO Tools runs a pretty handy tool for testing mobile-friendliness. The device also works with Google’s mobile-friendly test, which means you'll get industry-standard data.

You can also dig into Google Search Console to take your mobile-friendly testing to a higher level.

Google Search Console has a mobile usability reporting system that details problems on a page-by-page level. Using it, you can keep tabs on mobile-related issues throughout the life of your site.

Below are the key technical elements that Google Search Console looks at and reports on:
 

• Touch elements too close: This is an everyday usability issue where it is too hard to tap a given component without hitting the neighbouring piece.

• Flash usage: Most mobile browsers do not render Flash, and, as such, you would want to use more modern technologies.

• Fixed-width viewport: This problem attempts to circumvent mobile design with fixed width pages and is best shelved when a responsive design is adopted.

• Small font size: This scaling issue requires users to pinch the screen to zoom in.

• Viewport not configured: The viewport meta tag helps browsers scale a page to suit a specific device.

• Interstitial usage: A full-screen pop-up often represents a poor user experience on a mobile device and is something that Google is cracking down on.

• Content not sized to viewport: The page content does not fit the window, and a user must scroll. This can be fixed with relative rather than fixed widths.
   

Optimising your site to eliminate these issues can positively affect your site's grading by Google, improve rankings, and certainly create a better experience for mobile users.

CONCLUSION

Mobile significantly affects SEO. But it doesn't stop there. When mobile users visit a web page that is not optimised for mobile, user experience de-escalates, conversion suffers, and sometimes, the users inadvertently turn away, which means a loss of sales.

According to research by Mobify, more than 1.2 billion people access online content via their mobile devices, and 30 per cent of mobile users will abandon a transaction if the experience is not optimised for mobile.

That's not something you want. Quite obviously, the solution is to optimise your website’s mobile experience. We've shared what you can do to achieve a mobile experience on your website. The next best step is for you to take action, putting this information to work.