- HOW DO I KNOW IF YOUR SITE IS AFFECTED BY A MOBILE ERROR?
- Here are the 7 common mistakes to avoid to optimize your mobile interface.
- 1.HAVE CLICKABLE ELEMENTS TOO CLOSE TO EACH OTHER
- So, what to do?
- 2.GIVE BAD INDICATIONS ABOUT THE SIZE OF YOUR PAGES AND THEIR ADJUSTMENT TO BROWSERS
- So, what if you encounter this error?
- 3.LINK FOR NO APPARENT REASON THE MOBILE AND DESKTOP VERSIONS
- In short:
- So, what if you encounter this error?
- 5.HAVE A LOADING TIME OF YOUR PAGES TOO LONG
- So, what if your site is too long?
- How to identify his FMP?
- 6.USE NON-STANDARD CONTENT LIKE FLASH
- What to do if your site uses Flash or incompatible content media with mobile versions?
- 7.USE INTRUSIVE INTERSTITIAL ADS
- What to do if you have intrusive modules?
- · THE NATIVE ADVERTISING
- · THE REVELATION
- · THE BANNER
- WHAT TO REMEMBER FROM THIS ARTICLE?
2019 announces 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, moreover, clearly displayed its intentions with the deployment of “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 see these same sites surpass you in the search results (on mobile as on the desktop) …
Mobile adaptation has become a key factor in your ranking in search results.
HOW DO I 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 penalizing;
- PageSpeed Insights: This Google tool analyzes the content of your page to give you recommendations to make this page faster;
- Lighthouse: Again, this is a Google tool that is accessible only on 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 …) between them;
- Search Console: Essential when you are interested in optimizing your site, Google Search Console will allow you to identify pages with errors on mobile. The rest of this article will focus mainly on these errors and how to solve them
Here are the 7 common mistakes to avoid to optimize your mobile interface.
1.HAVE CLICKABLE ELEMENTS TOO CLOSE TO EACH OTHER
Must zoom to 300% on his mobile to be able to target a button or a link: we’ve all been there! And 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 your users and testing your 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 the tip of your finger, or 9 mm (48 pixels) still according to Google. This does not mean that each button, link or navigation element must be at least 9 mm, but that the clickable surface must be close to that number.
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 still increase the space around it.
2.GIVE BAD INDICATIONS ABOUT THE SIZE OF YOUR PAGES AND THEIR ADJUSTMENT TO BROWSERS
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 whole range of different devices and their experience will not be the same if your pages are not optimized for each scenario.
So, what if you encounter this error?
Identify the viewport configuration tag of your site. This tag tells navigators how to adjust the size and scale of your page to the device used for navigation. To do this, you can simply enter the following command in the address bar of your browser.
3.LINK FOR NO APPARENT REASON THE MOBILE AND DESKTOP VERSIONS
This only applies to sites with a mobile version with a separate URL (example.com for the desktop version and m.example.com for the mobile version).
When your users visit the mobile version of your site (eg.com) from a desktop URL (example.com/about), make sure they are redirected to the corresponding mobile page (e.g. / about).
In the case where the mobile version of a page is non-existent (), a common mistake is to redirect the user to the mobile homepage (example.com/about- > m.example.com).
If the mobile version of your site is incomplete, prefer a redirection to the desktop version of the missing mobile pages.
If the URL m.example.com/about is nonexistent then a redirection to example.com/about will always be better perceived than a redirection towards m.example.com.
Do not block most of these files is surely the rule of thumb. Google must be able to identify the entire user experience of your pages.
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 yoursite.com/robots.txt. Make sure that no key file is blocked.
One way to ensure that Google can access your entire user experience is to enter your page in the Google Search Console Fetch and Render tool.
If the two screenshots are not identical, you’re still hiding something from the search engines! Make sure it’s not a crucial part of your user experience
5.HAVE A LOADING TIME OF YOUR PAGES TOO LONG
Unsurprisingly with Google’s “mobile-first” indexing, the loading speed of your pages has become more critical than ever. A loading speed that is too long is not a mistake in itself, but it is certainly a crucial factor that will influence your search engine rankings.
But what is meant by a loading speed that is too long? What should be considered as an optimal loading time?
There is not really any rule on this point, it’s more about making good sense. Once again, the user is king. Experiment yourself and judge the frustration faced with 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 loaded. Result: Google releases 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). In simple terms, the FMP is the very first image that will follow the white screen loading your page. It is the first user-visible element of the critical rendering path.
How to identify his FMP?
The most effective way is to use Chrome Web Developer Tools. Analyze your page using the Inspect command in 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 many ways to optimize your FMP. In addition to reducing the weight of files on its page, you can also.
- Sequencing your source code differently.
- Prioritize items above the waterline
Of course, 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 read the many articles on this subject.
6.USE NON-STANDARD CONTENT LIKE FLASH
Some types of content, such as Flash movies and some videos, do not work on mobile.
Flash, for example, is owned by Adobe and is not an open, standard web format, making it incompatible on most mobile devices. The same goes for other content readers.
What to do if your site uses Flash or incompatible content media with mobile versions?
I recommend that you opt for standard alternatives such as HTML5 tags for reading your animated content. Google Web Designer is an excellent HTML5 authoring tool that lets you 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. This will also avoid a lot of frustration on the part of your users.
7.USE INTRUSIVE INTERSTITIAL ADS
Google penalizes the intrusive display of ads and pop-ups on the screen that would cover most of the mobile content made available to the user.
What to do 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.
· THE NATIVE ADVERTISING
This is a natural integration of your ads and other content on the screen. 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 disturb the reading since the “intrusive” content appears, in this case, only once the bottom of the page 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 the stakes of Google and other search engines.
With more and more mobile searches, having a responsive website and optimizing the mobile user experience is no longer an advantage, but a necessity to find a place in the first search results.
To achieve this, we must not only make sure that we do not have any mistakes that would spoil this experience, but also take time to understand what would make it easier for visitors to visit their own mobile site.