Conçu pour le mobile

Silktide charge chaque page sur un appareil mobile simulé et vérifie si elle a été conçue pour y fonctionner du tout - si elle s'adapte à un écran étroit ou affiche simplement une page de bureau réduite.

Pourquoi c'est important

Plus de la moitié du trafic web est mobile, donc une page qui ne fonctionne que sur ordinateur échoue auprès de la majorité de son audience dès le premier appui. Confrontés à un texte minuscule et à un pincement-zoom sans fin, les visiteurs partent ; les moteurs de recherche, qui indexent d'abord la version mobile des pages, classent le site en conséquence.

Ce contrôle détecte l'échec fondamental - une page sans aucun design mobile - plutôt que des problèmes de finition. Une page qui réussit peut encore avoir de plus petits problèmes sur mobile, couverts par d'autres contrôles.

Comment corriger

La solution pérenne est le design web adaptatif (), afin que la même page s'adapte à toute largeur d'écran. Si votre site est antérieur au design adaptatif, cela implique généralement une refonte ou un nouveau thème - la plupart des thèmes de modernes sont adaptatifs par défaut. Concrètement :

Déclarez un mobile dans l'élément head de chaque page :

<meta name="viewport" content="width=device-width, initial-scale=1">

Utilisez des mises en page flexibles et des requêtes média pour que le contenu se réorganise en une seule colonne sur les écrans étroits, plutôt que de figer la page à une largeur de bureau.
Conservez un corps de texte lisible sur mobile - évitez les conceptions qui réduisent toute la page pour la faire tenir.
Testez sur un vrai téléphone ou avec l'émulation d'appareil de votre navigateur, jusqu'à des largeurs d'environ 320 pixels.

Comment Silktide teste cela

Charger la page sur un appareil mobile simulé.
Vérifier que la page déclare un viewport exploitable. Un viewport manquant, ou figé à une largeur supérieure à 480 pixels, fait échouer la page - c'est le strict minimum pour la prise en charge mobile.
Mesurer le texte visible : si plus de 35 % s'affiche à une taille illisible (inférieure à 10 pixels après zoom), la page échoue.
Vérifier la réduction appliquée pour faire tenir la page à l'écran : un zoom inférieur à 60 % de la taille normale indique une mise en page de bureau, et la page échoue.
Une page réussit lorsqu'aucun de ces problèmes n'est présent. Silktide indique également, au fil du temps, combien de pages ne sont pas conçues pour le mobile.

Dépannage

Ma page a l'air correcte sur mon téléphone

Certaines pages paraissent acceptables tout en échouant à l'un des signaux ci-dessus - par exemple, une balise viewport générée par un outil ancien avec une largeur fixe. Affichez le code source de la page et vérifiez que la balise <meta name="viewport"> correspond à la forme recommandée.

Le contrôle est réussi mais mon expérience mobile est médiocre

Réussir signifie que la page répond aux exigences de base, pas qu'elle est optimale. Voir les contrôles associés pour le texte trop petit, les cibles tactiles trop petites et le zoom désactivé.