L'update « mobile friendly »

Avec l’utilisation de plus en plus fréquente des téléphones portables et des tablettes pour surfer sur internet, Google se devait d'adapter son algorithme pour en tenir compte.

Au début de l'année 2015 Google annonce qu'à partir du 21 avril 2015 les sites qui sont « Mobile Friendly » seront favorisés pour les recherches effectuées sur mobile. Concrètement, qu'est-ce que celà signifie ?

1) Les recherches effectuées depuis un ordinateur de bureau ne sont pas impactées

2) Les sites optimisés pour les smartphones verront leur positionnement progresser par rapport aux sites qui ne sont pas du tout adaptés à cette technologie, mais uniquement pour les recherches effectuées à partir d'un smartphone

3) Les tablettes ne sont pour l'instant pas encore affectées par cette modification de l'algorithme de Google

Il faut cependant relativiser. Il s'agit simplement d'un nouveau critère parmi tant d'autres et son impact sur le positionnement des sites n'est que tout relatif. Quand vous effectuez une recherche depuis votre mobile il ne faut pas s'attendre à ce que la première page de résultats de Google soit entièrement différente de celle que vous pouvez voir quand vous faites la même recherche depuis un ordinateur classique. Pour commencer, il y a de fortes chances pour que les sites qui sont positionnés aux tous premiers rangs soient déjà compatibles mobiles. La nouvelle règle de Google ne va donc rien changer pour eux. Cependant, le danger qui vous pend au nez est que votre site non optimisé pour un affichage sur les petits écrans de smartphones se voit pénalisé pour tous les utilisateurs qui utilisent des smartphones pour effectuer des recherches sur internet, et il y en a de plus en plus.

Sachez par exemple que sur ce site que vous êtes en train de consulter, environ 50% des utilisateurs arrivent avec un ordinateur desktop, environ 25% des visiteurs utilisent des tablettes et autour de 25% des internautes sont arrivés sur cette page avec un i-phone ou un autre type de mobile du même genre. Rendre compatible mobiles son site internet n'est donc pas à négliger.

Si vous non plus vous ne trouvez pas ça agréable, lorsque vous utilisez votre smartphone pour effectuer une recherche sur internet, de  tomber sur un site non adapté, vous aurez alors un certain comportement. Google prend en compte tous ces comportements et c'est ce qu'il nomme de façon globale : l'expérience utilisateur. Le reflexe que vous pourrez avoir est par exemple de quitter le site pour effectuer une nouvelle recherche, en espérant tomber sur un site plus ergonomique par rapport au matériel que vous utilisez.

Les webmasters de tels sites devraient s'en soucier car petit à petit, Google remarquera que beaucoup de visiteurs de ces sites repartent aussitôt pour aller sur un autre. Il ajustera donc le positionnement de ces sites en fonction du comportement des utilisateurs et ces sites seront affectés d'un « malus » (quel que soit le type d'appareil utilisé pour les recherches). Et si en plus les sites optimisés smartphones sont dans le même temps affectés d'un « bonus » pour les recherches effectuées depuis un smartphone il va sans dire que ces sites non adaptés seront très vite réduits au silence pour les utilisateurs de smartphones. Au-delà de la seconde page de résultats on peut presque dire qu'ils sont comme invisibles. Et c'est déjà rare qu'un utilisateur de téléphone mobile aille jusqu'à la seconde page de résultats. En général il clique sur l'un des trois premiers sites proposés.

Google met à la disposition des webmasters un lien pour vérifier si un site est optimisé pour une utilisation depuis un smartphone.

Voici ce lien : https://www.google.com/webmasters/tools/mobile-friendly/

Ce simple test permet d'analyser une URL et d'indiquer si la page est mobile-friendly (adaptée aux mobiles).

Voici les critères pris en comptes par Google pour déterminer si une page web est correctement adaptée aux portables :

• Absence de contenu flash (technologie peu utilisée sur les mobiles)
• Texte lisible directement sans être obligé de zoomer
• Contenu adapté à la taille de l'écran, et je dirais même à toutes les tailles d'écran, de sorte que les internautes n'ont pas besoin de faire défiler la page horizontalement ou de zoomer
• Liens suffisamment éloignés les uns des autres pour pouvoir les activer avec le doigt sans risque de cliquer sur le mauvais lien

Concernant le point des liens qui ne doivent pas être trop proches, il est facile d'y remédier en revoyant complètement l'ergonomie de votre site. Les liens de navigation doivent être remplacés par des boutons images. Si vous utilisez des menus déroulants à tiroir il est préférable de mettre à la corbeille pour les remplacer par de simples liens directs vers des pages d'index qui présenteront l'ensemble des choix sous forme de boutons cliquables.

Pour le point qui concerne l'adaptation du contenu à la largeur de l'écran, la meilleure solution est de coder un site avec des <DIV> flottantes qui s'imbriqueront automatiquement les unes en dessous des autres quand la largeur ne permet pas d'afficher deux colonnes de front. Pour celà, la largeur des DIV ne doit pas être spécifiées avec l'attribut WIDTH mais avec MAX-WIDTH.

Toutes les nouvelles technologies permettant d'adapter les pages web automatiquement en fonction de la taille de plus en plus disparate des écran utilisent abondamment le CSS. On appelle ces technologies responsive design.

En utilisant une technologie responsive design, vous n'avez pas à créer plusieurs versions d'une même page, c'est l'apparence de la page qui change et qui s'adapte en fonction du matériel utilisé pour la visualiser. Il y a quelques années il était très courant de renconter des sites qui étaient déclinés en deux versions. Les internautes étaient automatiquement redirigés vers une version mobile quand le site détectait que le visiteur utilisait un appareil mobile. Cette détection était la plupart du temps effectuée à partir du user-agent communiqué par le browser.

L'une des techniques les plus répendues pour créer un site responsive est « bootstrap ». Elle est entièrement open-source et offre une panoplie impressionnante de scripts CSS et jQUERY. Bootstrap constitue un véritable framework utilisés par de nombreux logiciels de mise en page HTML. Lauryan ToWeb est un logiciel de conception de sites webs responsive basé sur la technologie bootstrap. Il permet de concevoir en quelques minutes un site mobile-frienly sans aucun effort et sans aucune connaissance préalable.