Comment puis-je m'assurer que mon site est adapté aux mobiles ? Une liste de contrôle

Comme nous l'avons signalé vendredi dans notre tour d'horizon des actualités SEM , l'analyste des tendances des webmasters de Google, John Mueller, a confirmé que la dernière vague de modifications du signal de classement adapté aux mobiles de Google est maintenant terminée.

Depuis la mise à jour initiale « ^Mobilegeddon » qui a fait ses débuts le 21 avril 2015, la convivialité mobile a été un facteur de classement important dans les résultats de recherche Google. Dans son article de blog annonçant les changements d'algorithme deux mois auparavant, Google a déclaré qu'il souhaitait que les utilisateurs "trouvent plus facilement des résultats de recherche pertinents et de haute qualité, optimisés pour leurs appareils [mobiles]".

Google a affirmé et réaffirmé son engagement en faveur de la convivialité mobile au fil des ans, en mettant en place un label "mobile friendly" pour distinguer les sites Web adaptés aux mobiles, en apportant des modifications à la page de résultats de recherche mobile, y compris des URL conviviales et des liens de site étendus, et le lancement des pages mobiles accélérées pour offrir une expérience mobile ultra-rapide.

Maintenant, avec cette dernière mise à jour, Google a encore renforcé son signal de classement adapté aux mobiles, ce qui rend d'autant plus important pour les webmasters d'avoir un site qui répond aux normes de Google.

Dans cet esprit, comment pouvez-vous vous assurer que votre site est à la hauteur ? Nous avons dressé une liste de contrôle pratique des choses que vous devriez faire (ou ne pas faire) afin d'obtenir la facture de santé mobile la plus propre possible de Google.

Ne pas utiliser Flash

La plupart des navigateurs mobiles ne peuvent pas restituer le contenu Flash. Par conséquent, une règle d'or claire pour la création d'un site adapté aux mobiles est la suivante : n'utilisez pas Flash. Le rapport d'utilisabilité mobile de Google vous recommande imprudemment d'utiliser les "technologies Web modernes" pour afficher le contenu de votre page, les animations et la navigation à la place. Aie!

Assurez-vous que votre fenêtre est correctement définie

Une fenêtre d'affichage est un type de balise Meta qui donne au navigateur des instructions sur la façon d'ajuster les dimensions de la page et la mise à l'échelle à différentes largeurs d'appareil. Cela devrait apparaître dans l'en-tête de votre page Web.

S'il n'y a pas de balise de fenêtre d'affichage, les navigateurs mobiles afficheront par défaut la page à la largeur d'un écran de bureau. Google a un tutoriel sur la façon de définir la fenêtre d'affichage de votre page et de s'assurer qu'elle est accessible.

Ce qu'il ne faut pas faire : réglez votre fenêtre sur une largeur fixe. Certains développeurs définiront la fenêtre d'affichage sur une largeur de pixel fixe pour s'adapter aux tailles d'écran mobiles courantes, mais cela ne conviendra toujours pas à tous les types d'appareils, et donc Google ne le juge pas adapté aux mobiles.

Si vous suivez les instructions du didacticiel de Google et utilisez la valeur de la fenêtre d'affichage width=device-width , cela permettra à votre page de correspondre à la largeur de l'appareil utilisé par vos visiteurs.

L'ajout de l'attribut initial-scale=1 permettra également à votre page de remplir l'écran que l'appareil soit en mode portrait ou paysage, et ainsi de profiter de toute la largeur de l'écran.

Enfin, assurez-vous que votre contenu est dimensionné pour la fenêtre d'affichage. Si vous définissez des largeurs CSS absolues pour des éléments de page tels que des images et des vidéos, cela peut entraîner un problème pour les appareils dont la largeur est inférieure à la largeur que vous avez spécifiée. Vous pouvez contourner ce problème en utilisant des valeurs de largeur relative, telles que width: 100% , dans votre CSS.

Utiliser une grande police

Si vous avez correctement configuré votre fenêtre d'affichage, les tailles de police seront mises à l'échelle en fonction de l'appareil de l'utilisateur, mais Google fait en plus des recommandations supplémentaires pour la police.

Il recommande d'utiliser une taille de police de base de 16 pixels, avec toutes les autres tailles de police (telles que petite et grande) définies par rapport à cette ligne de base. L'espace vertical entre les lignes doit être fixé à 1,2 em.

Essayez également d'éviter d'utiliser trop de polices et de tailles de police différentes, ce qui entraîne des mises en page désordonnées et compliquées.

Espacez les liens et les boutons

Les liens et les boutons, également appelés "cibles tactiles" par Google, sont plus difficiles à appuyer sur un appareil mobile que sur un navigateur de bureau, car les doigts sont plus larges et généralement moins précis qu'un curseur de souris.

Google pénalisera toutes les pages où les cibles tactiles sont trop petites et trop rapprochées pour appuyer avec précision.

Le doigt moyen d'un adulte mesure environ 10 mm de large. Google recommande donc une taille minimale de cible tactile d'environ 7 mm, soit 48 pixels de large, du moins pour les cibles tactiles les plus importantes, telles que les boutons fréquemment utilisés, les liens de navigation, les barres de recherche et les champs de formulaire.

Les cibles moins fréquemment utilisées peuvent être plus petites, mais doivent toujours être suffisamment espacées pour qu'un utilisateur essayant d'en appuyer une ne touche pas accidentellement une autre cible à la place. L'espace recommandé autour des petites cibles tactiles est d'au moins 5 mm.

N'utilisez pas les fenêtres contextuelles en plein écran

Les pop-ups et les superpositions de grande taille ou en plein écran, également appelés "interstitiels", tels qu'un formulaire d'inscription à une liste de diffusion ou une promotion d'application, peuvent être très perturbateurs sur un appareil mobile.

Alors qu'un grand pop-up accrocheur peut sembler une bonne idée du point de vue d'une entreprise, Google reconnaît que ceux-ci interfèrent avec l'expérience de navigation sur un site sur mobile et pénaliseront les sites qui les utilisent.

Au lieu d'une fenêtre contextuelle plein écran, Google recommande d'utiliser une bannière ou de mettre en œuvre l'indexation des applications, ce qui permettra au contenu de votre application d'apparaître dans les résultats de recherche, ce qui en fait une méthode de promotion très efficace.

Effectuez une vérification avec les outils de Google

Le moyen le plus simple de vérifier si votre site atteint toutes les bonnes cibles pour la convivialité mobile est d'utiliser les outils fournis par Google pour effectuer une vérification.

La console de recherche de Google, anciennement connue sous le nom d'outils pour les webmasters, comporte une section "utilisabilité mobile" qui diagnostiquera tout problème persistant avec votre site, généralement l'une des erreurs répertoriées ci-dessus.

Vous pouvez également vérifier la santé mobile de pages Web individuelles en collant l'URL dans Google Mobile-Friendly Test. Et Google Developers a une section répertoriant les erreurs courantes commises lors de la conception pour mobile, qui contient des détails supplémentaires sur des choses comme le contenu illisible, les redirections défectueuses et les 404 et comment les corriger.

Le besoin de rapidité

Dans ses recommandations pour travailler avec un développeur afin de créer un site adapté aux mobiles (si vous n'êtes pas en mesure d'apporter vous-même les modifications nécessaires à son site Web), Google suggère de demander à votre développeur de "s'engager sur la vitesse".

Bien que Google n'inclue pas une vitesse de chargement lente comme l'un de ses problèmes de convivialité mobile, nous savons que la vitesse est un facteur de classement, et les statistiques montrent qu'une vitesse de chargement lente peut fréquemment amener les utilisateurs à abandonner des pages Web.

Donc, si vous souhaitez offrir la meilleure expérience utilisateur et donner à votre site adapté aux mobiles les meilleures chances d'un meilleur classement, envisagez de l'accélérer autant que possible.

PageSpeed ​​Insights de Google a un onglet "mobile" qui donnera à votre page une note de vitesse mobile sur 100, avec des conseils sur la façon de corriger les éléments qui pourraient la ralentir.

Cela donnera également à votre page mobile un classement de l'expérience utilisateur sur 100 et signalera tout problème de convivialité mobile de la même manière que les autres outils de Google.

Il existe également des pages mobiles accélérées, les pages Web mobiles ultra-rapides de Google qui s'exécutent sur une version réinventée de HTML. La création d'une version AMP de votre site pour mobile est un autre moyen de s'assurer qu'il est rapide et adapté aux mobiles, bien que de nombreux référenceurs hésitent encore à mettre en œuvre AMP pour un certain nombre de raisons. C'est une option, mais pas une nécessité pour avoir un site mobile rapide et compatible avec Google.

___
par Rebecca Sentance