2019 heralds a particularly rich year for SEO. For its 20th anniversary, Google has presented an attack plan for the mobile user experience. The search engine has also clearly displayed its intentions with the deployment of the “mobile-first” indexing. In summary, if your site does not offer a better mobile experience than that of your rivals, there is a good chance that you will see these same sites surpass you in the search results (on mobile as on desktop) …

Mobile adaptation has become a key factor in your ranking in search results.

I will not cover in this article all the possible optimizations for your mobile site, but rather the common errors to avoid, how to identify them and ways to solve them.

If you use a CMS, like WordPress, with a responsive theme and a neat user interface, do not think that you will be spared these errors. I would even advise you to be extra vigilant if you use plugins. Follow this SEO guide on WordPress to get started optimizing your site on WordPress.

How do you know if your site is affected by a mobile error?

If the Google Search Console remains the main tool to identify these errors in mobile marketing, several free tools will allow you to audit the SEO potential of the mobile version of your site.

  • Google Mobile Test: This test will tell you more about how Googlebot sees your mobile site and which elements of it are considered to be penalizing;
  • PageSpeed ​​Insights: This Google tool analyzes the content of your page in order to give you recommendations to make this page faster;
  • Lighthouse: Again, this is a Google tool that is only accessible under Google Chrome and Chromium (available with Web Developer Tools or as a Chrome extension). Lighthouse will allow you among other things to audit the performance and accessibility of your pages;
  • GTmetrix: Another performance analyzer, independent of Google this time, which also allows you to compare several pages (including those of your competitors …) with each other;
  • Search Console: Indispensable when you are interested in optimizing your site, Google Search Console will allow you to identify pages with errors on mobile. The remainder of this article will focus mainly on these errors and how to resolve them.

Here are the 7 common mistakes to avoid to optimize your mobile interface.

search console errors

1. Having clickable items too close to each other

Having to zoom to 300% on your mobile to be able to target a button or a link: we’ve all been there! And as much to say that the experience is not pleasant (especially when you end up clicking on the wrong element!).

So what to do?

Putting yourself in the shoes of its users and testing its mobile version yourself is certainly a start.

According to Google, the optimal size of the clickable elements of a mobile page should be that of your fingertip, 9 mm (48 pixels) still according to Google. This does not mean that each button, link or navigation element must be a minimum of 9 mm, but that the clickable surface must approach this figure.

This includes the padding area used to generate space around your elements. Also, if the area of ​​your element is, for example, only 24 by 24 pixels, you can always increase the space around it.

2. Giving bad indications about the size of your pages and their fit to browsers

Too often we tend to think that there are only 3 responsive formats: desktop, tablet and smartphone. However, there are many variations between each format. Take for example the screen resolution of a Pixel 2 (411 x 731) and that of an iPhone 6 (375 x 667).

Visitors to your site use a variety of different devices, and their experience will not be the same if your pages are not optimized for each of these scenarios.

page dimensions

So what if you encounter this error?

Identify the configuration of the viewport tag for your site. This tag tells browsers how to adjust the size and scale of your page based on the device used for navigation. To do this, you can simply enter the following command in the address bar of your browser:

view-source: https: //votresite.com

then look for a line of code in your header starting with .

If you haven’t set up a viewport tag for your site yet, start with that.

An error often encountered with old sites is the presence of a fixed width, regardless of the device used. This makes your site non-responsive by default.

The recipe for an optimized viewport tag is as follows:

  • width = device-width must be included to match the width of the device being used;
  • initial-scale = 1 must be included to define a 1: 1 ratio between CSS pixels and device independent pixels.

Also take care not to use elements that are too large, or unsuitable for a vertical view. The most common example is the use of absolute CSS width for page elements. If possible, opt for a width of 100% (width: 100%).

3. Link the mobile and desktop versions for no apparent reason

This only applies to sites with a mobile version with a separate URL (exemple.com for the desktop version and m.exemple.com for the mobile version).

When your users visit the mobile version of your site (m.exemple.com) from a desktop URL (exemple.com/a-propos), ensure that they are redirected to the corresponding mobile page (m.exemple.com/a-propos).

In the case where the mobile version of a page does not exist (m.exemple.com/a-propos), a common mistake is to redirect the user to the mobile home page (exemple.com/a-propos -> m.exemple.com).

If the mobile version of your site is incomplete, prefer a redirect to the desktop version of the missing mobile pages.

In summary:

If the URL m.exemple.com/a-propos is nonexistent then a redirect to exemple.com/a-propos will always be better perceived than a redirect to m.exemple.com.

4. Block key files of type JavaScript or CSS

The use of JavaScript continues to spark lively conversations among SEO specialists. If JavaScript files do not affect your SEO in general, there are a few rules to follow.

Surely not blocking most of these files is the rule of thumb. Google must be able to identify the entire user experience of your pages.

Also, blocking JavaScript or CSS key files prevents Googlebot from performing this recognition, which will most likely impact the ranking of the pages concerned in the search results.

JS CSS file blocked

So what if you encounter this error?

Check the robots.txt file at the root of your site. In general, it is accessible via the URL votresite.com/robots.txt. Make sure that no key files are blocked.

One way to ensure that Google can access your entire user experience is to enter your page in the Fetch and Render tool in the Google Search Console.

If the two screenshots are not the same, you are still hiding something from the search engines! Make sure it’s not a critical part of your user experience.

5. Too long a page load time

Unsurprisingly with Google’s mobile-first indexing, the loading speed of your pages has become more crucial than ever. Loading speed too long is not an error in itself, but it is certainly a key factor that will influence your ranking in search engines.

But what is meant by too long a loading speed? What should we consider as optimal loading time?

There is not really a rule on this point, it is more about showing common sense. Once again, the user is king. Experience it for yourself and judge the frustration of loading too long.

The loading speed of your page is the first experience of your users with your site. If it’s bad, chances are your users will leave your page before it’s even loaded. Result: Google takes out the yellow card for your user experience!

So what if your site is too long?

In my opinion, the most important element to consider is the loading of the FMP (for First Meaningful Paint in English). Simply put, the FMP is the very first image that will follow the blank screen loading your page. It is the first item visible to the user of the critical rendering path.

Here is an example:

Example of FMP

How to identify your FMP?

The most effective way is to use Chrome Web Developer Tools. Analyze your page using the Inspect command for this extension and select the Network tab before refreshing your page.

Having a fast FMP gives a strong signal to your users that your page is loading.

There are several ways to optimize your FMP. In addition to reducing the size of the files on its page, you can also:

  • Repel the crawl of JavaScript files by bots;
  • Sequence your source code differently;
  • Prioritize items above the waterline …

Obviously, there are many other ways to reduce the loading time of your page and I invite you to leave me a comment to learn more or to consult the many articles on this subject.

6. Use non-standard content like Flash

Certain types of content, such as Flash movies and some videos, don’t work on mobile.

Flash, for example, is owned by Adobe and is not an open, standard web format, which makes it incompatible on most mobile devices. The same goes for other content readers.

What to do if your site uses Flash or content supports incompatible with mobile versions?

I recommend that you opt for standard alternatives like HTML5 tags for playing your animated content. Google Web Designer is an excellent HTML5 creation tool that will allow you to create interactive content in HTML5.

In the case of videos, another safety net is to make the transcription of the video accessible to your users, browsers and search engines. It will also avoid a lot of frustration for your users.

7. Use intrusive interstitial ads

Google is penalizing the intrusive display of advertisements and pop-ups on the screen that would cover most of the mobile content made available to the Internet user.

What if you have intrusive modules?

It is recommended to optimize this display, or even delete it on mobile.

In terms of optimization, there are several alternative display formats. Here are three examples.

“Native advertising”:

This is a natural integration of your advertising and other screen content. The content integrates perfectly with the design, context and format of the page, so that it appears natural to the visitor and does not interrupt the reading of the latter.

The revelation :

Again, the display does not interfere with reading since the “intrusive” content does not appear, in this case, until the bottom of the page is reached.

The banner :

A simple, non-intrusive banner that does not exceed ⅕ the length of the screen.

What to remember from this article?

The question of a successful user experience is at the heart of issues for Google and other search engines.

With increasingly mobile searches, having a responsive site and optimizing the user experience on mobile becomes no longer an advantage, but a necessity to find a place in the first search results.

To do this, you must not only make sure that you do not have any errors that would spoil this experience, but also take time to understand what would facilitate the journey of visitors on your own mobile site.