Google mobile friendly : savoir si son site est adapté au mobile

Comment savoir si son site internet est adapté au mobile ?
Rien de plus simple : il suffit de se rendre sur le site développé par google et de faire le test d’optimisation mobile pour savoir si votre page web est mobile-friendly.

D’autres outils développés par Google permettant une navigation optimale sur téléphone ou sur tablette sont PageSpeed Insights, ainsi que l’outil “Ergonomie mobile” présent dans la google searche console.
Ils vous permettent d’obtenir des axes d’améliorations pour optimiser au maximum votre site internet afin qu’il soit rapide et ergonomique.

Google mobile friendly, c’est quoi ?

Si les termes “Google Mobile friendly”, “mobile first” ou “responsive design”, ne vous disent rien, alors la suite de cet article va vous intéresser

Les principales caractéristiques d’un site mobile Friendly

En quoi consiste un site mobile-friendly ? C’est un site dont les pages ont un design qui s’adapte aux différentes tailles d’écrans et aux différents moyens d’interactions avec celui-ci. Par exemple, dans le cas d’une page internet mobile adaptée, les boutons doivent être suffisamment gros pour qu’il soit facile d’appuyer dessus avec l’index ou le pouce. Il faut également que le texte soit facile à lire depuis un petit écran. Aussi, les différentes technologies informatiques permettant les interactions doivent être compatibles sur mobile. En résumé, votre site doit rester convivial, accueillant et facile d’utilisation quel que soit le terminal sur lequel il est affiché.

Le label Google Mobile-friendly est attribué aux sites crawlés par les spiders de Google, aussi appelé Google bot, directement après l’analyse d’une page. Ainsi, une page d’un même site web peut obtenir le label Google mobile friendly alors qu’une autre page ne se verra pas accorder cet attribut. Ce label était autrefois visible directement sur les pages de résultats de Google. Aujourd’hui il n’est pas visible mais il est toujours extrêmement important pour l’indexation.

Depuis quand doit-on rendre les sites mobile friendly

A vrai dire, vous auriez déjà dû faire en sorte que votre site internet soit adapté aux mobiles depuis que les usages de navigation sur internet ont évolué. C’est-à-dire depuis un certain temps. Et si vous demandez seulement maintenant comment rendre votre site mobile friendly, c’est soit que vous venez de créer votre propre site internet, soit que vous êtes en retard d’une dizaine d’années. La bonne nouvelle, c’est qu’il n’est jamais trop tard.

L’importance du responsive design n’a pris de l’ampleur qu’en avril 2015, lorsque que Google a décidé de s’adapter aux nouveaux usages.

Et cette évolution a été rapide certes, mais prévisible. En effet, l’usage de smartphone ou de tablette pour la navigation mobile a connu une croissance d’environ 56 % en 2013 et d’environ 36 % en 2014 pour atteindre une part de marché supérieure à 38 %.

Google s’est donc simplement modernisé pour mieux correspondre aux nouvelles habitudes de ses consommateurs. Comment ? En déployant une mise à jour de son algorithme d’indexation. Cette MAJ porte le nom de mobilegeddon en référence à Armageddon.

Concrètement Mobilegeddon, c’est quoi ?

Mobilegeddon est donc une modification de l’algorithme pour permettre de donner la priorité aux sites internet pouvant afficher correctement leurs pages sur les téléphones et sur les tablettes, quand un utilisateur effectue une session avec ces dispositifs-ci.

Mais alors pourquoi la comparer à un cataclysme ou à un séisme ? Car elle a surpris certains webmasters en amplifiant profondément l’importance accordée aux pages s’adaptant aux mobiles.

Si cette mise à jour est une évolution dans le monde du web et du SEO, admettons que cette référence à l’armageddon est douteuse : cette mise à jour prévisible n’est ni une bataille apocalyptique, ni une catastrophe.

En version desktop, aucune pénalité n’est attribuée aux sites web n’ayant pas l’attribut mobile friendly. Nonobstant, un bonus est accordé aux sites adaptés aux mobiles lors des sessions de recherches effectuées à partir de dispositifs mobiles. Et comme votre positionnement SEO dépend également de celui de vos concurrents, si vous n’avez pas de version mobile de votre site internet ou s’il n’est pas responsive, votre référencement sera mauvais lorsqu’un utilisateur vous cherchera sur son téléphone. Vous risquez alors de perdre beaucoup de trafic : les recherches mobiles représentent dans le monde plus de 50 % du volume de recherche total.

De plus, il est important de garder à l’esprit la notion de Mobile First Index : votre site web sera crawlé en priorité, et dans la majorité des cas, par un robot “mobile” et non plus par un robot “ordinateur”. Avoir un site adapté au mobile, c’est s’assurer qu’ils soit adapté aux spiders de Google.

Pourquoi Google priorise les sites adaptés aux mobiles ?

Pour comprendre pourquoi Google a déployé cette update, il faut revenir à l’essence même de ce moteur de recherche. Google comme toute autre entreprise recherche la croissance. Et, sa croissance passe par l’acquisition durable de nouveaux clients, et donc par la rétention de ceux-ci, et la recommandation du service. Pour ce faire, l’expérience utilisateur doit être unique et apporter une valeur ajoutée au consommateur du service que propose le moteur de recherche : trouver la réponse ou la solution à l’ensemble de nos problèmes.

Il est donc dans l’intérêt de Google de proposer le meilleur parcours client. Celui-ci se décompose idéalement en trois étapes : ouverture du navigateur, recherche de l’internaute, accès à l’information ou au site internet qui apportera l’information recherchée.

Si le site internet que propose Google à un mobinaute n’est pas adapté aux écrans de taille réduite, il ne sera pas ergonomique et l’expérience utilisateur sera dégradée.

Google n’a donc aucun intérêt à proposer un site internet proposant une mauvaise expérience utilisateur.

7 bonnes raisons d’avoir un site web mobile friendly :

1. Favoriser votre positionnement Google lors de recherches effectuées à partir de téléphones ou de tablettes. Votre positionnement sera aussi favorisé sur les autres moteurs de recherches tels que Bing, Yahoo!, Qwant, etc.
2. Proposer une meilleure expérience utilisateur à vos visiteurs qui utilisent des smartphones pour une plus ample satisfaction.
3. Permet de repenser le design de votre site web pour plus de simplicité et plus d’efficacité.
4. Avec les CMS tels que WordPress, il est simple de dynamiser l’affichage de votre site web pour mobiles.
5. Parce que plus de 50 % des sessions de navigation se font maintenant sur téléphone portable. Autant dire que le Mobile first, ou web design optimisé mobile, a de beaux jours devant lui.
6. Car cela permet de ne pas vous faire dépasser par vos concurrents.
7. Parce que cela améliore l’image de votre marque.

Comment rendre son site responsive ?

Il y a plusieurs méthodes pour rendre votre site web adapté aux mobiles. Bien sûr, elles dépendent de la manière dont est édité votre site internet. Si vous utilisez un constructeur de site web tel que WordPress, Joomla! ou encore Drupal, cela dépendra principalement du thème que vous utilisez, mais pas uniquement. Si vous développez et éditez vous-même votre site internet, cela dépendra de vos compétences techniques ou de votre budget.

Via un CMS

Les CMS (Système de gestion de contenu ou Content management system) vous permettent de publier un site web sans même savoir coder. Pour avoir un site responsive design, il suffit de choisir dès le départ un thème qui comporte nativement cette fonctionnalité.

Vous pourrez toujours changer le thème plus tard, mais cela risque d’apporter quelques dysfonctionnements. Sur WordPress, il est recommandé de créer une sauvegarde du site avant d’appliquer un nouveau thème. Vous pouvez trouver un guide complet ici.

Les autres paramètres à prendre en compte sont :

• la taille de la police,
• les images dont la taille et les dispositions s’adaptent bien aux petits écrans,
• la vitesse de chargement du site,
• ou encore, la présence de cases cliquables suffisamment larges et espacés pour des interactions faciles.

Coder en Mobile first

Deux solutions s’offrent à vous lorsque vous voulez proposer aux internautes un site mobile friendly : soit en créant ou en modifiant le code CSS de votre site web pour qu’il soit responsive design, soit en créant une nouvelle version de votre site web spécifiquement pensée pour les mobiles. Cette deuxième solution est de moins en moins utilisée.

Media queries et viewport

Un site web adopte un design responsive grâce aux media queries (ou requêtes media) qui déterminent des conditions d’affichage en fonction du média utilisé. Par média, on entend le terminal utilisé (téléphone, tablette, télévision, ordinateur…).

Les media queries sont donc des conditions d’affichage en fonction du terminal utilisé.
Si le dispositif utilisé pour aller sur une page internet a une taille comprise entre “x” et “y”, alors les différents blocs du site internet devront s’ordonner de telle manière. Par contre, si la taille de l’écran est comprise en “y” et “z”, le navigateur web devra afficher le site internet d’une autre façon.
Par exemple, une page comportant une ligne de 4 éléments en version desktop sera affichée depuis un mobile en 4 lignes de 1 élément.

Un autre paramètre important pour l’adaptabilité des sites web sur mobile est la balise Viewport qui permet à un mobinaute de zoomer un site sur son téléphone. Ce paramètre définit aussi une dimension d’affichage initiale pour la page. Cette balise se déclare dans la partie du code HTML, mais peut également se déclarer le code CSS du site web.

Codes CSS open source

Bien sûr, développer un code CSS responsive design comportant toutes les media queries est fastidieux. C’est pourquoi de nombreux développeurs font appel à des templates open source. Si vous éditez vous-même votre site internet, la manière la plus simple de rendre votre site mobile friendly est d’utiliser des codes CSS Open source dont voici les éditeurs les plus connus :

• Materialize
  Qui est un framework CSS développé par Google, et basé sur l’ensemble de la charte graphique de Google, material design, et sur ses recommandations en matière de design mobile
• Bootstrap
  Initialement développé par Twitter en 2011, c’est encore à ce jour la bibliothèque de media queries la plus célèbre
• Foundation
  Vous pouvez aussi l’utiliser pour les applications et les boites mail
• Bulma
  Il est léger et basé sur le design flexbox

Vous pouvez retrouver une comparaison complète ici, ainsi que sur le site alsacreations.com.

Pour en savoir plus sur les Media queries et sur le CSS en général, vous pouvez vous rendre sur le site de la w3schools ou sur le site chiny.me.

Un sous-domaine de votre site web

Vous avez probablement déjà croisé des versions mobiles de websites dont les noms de domaines prennent la forme suivante : https://m.exemple.com.

Ce sont en fait des sites web dont le code et le design mobile first ont été totalement pensés pour les utilisateurs mobiles. Cette solution était parfois choisie par les grandes marques, car elle permet d’adapter le parcours clients en fonction de l’expérience utilisateur qu’ils veulent leur apporter.

Toutefois, cette solution est de plus en plus délaissée et n’est généralement pas recommandée : elle complexifie beaucoup la gestion de votre présence en ligne. Les mises à jour sur la version desktop devront être appliquées manuellement au code de la version mobile. Le responsive design est de plus en plus efficace. Enfin, cela complexifie également la mise en application de la stratégie SEO car l’utilisation de nombreuses redirections est nécessaire.

 

Pour savoir si votre site est responsive, vous pouvez tester son affichage sur de nombreux formats d’écrans rapidement grâce à responsinator.

En savoir plus

Pour en savoir plus sur le Google Mobile-friendly et savoir si son site est adapté au mobile, vous pouvez suivre ces quelques liens séléctionnés:

• Getting Started | Search Central | Google Developers
• Responsive Web Design | Search Central | Google Developers
• Outil de test d’optimisation mobile – Aide Search Console (google.com)
• Bienvenue ! | Search Central | Google Developers

Pour en savoir plus sur le webmarketing, le SEO et les bonnes pratiques web, retrouvez nous sur notre blog.