Comment déterminer si votre site est adapté aux mobiles

Les recherches de Google suggèrent que 53 % des visites sur les sites mobiles sont abandonnées si leur chargement prend plus de trois secondes. Ainsi, si votre site n'est pas adapté aux mobiles, vous passez à côté de clients potentiels.

Vous souhaitez savoir comment vérifier la compatibilité mobile de votre site ? Nous avons tout ce que vous devez savoir ci-dessous.

Quelles sont les différences entre la conception adaptée aux mobiles, la conception axée sur les mobiles et l'indexation axée sur les mobiles ?

Les consommateurs peuvent accéder aux sites via des appareils mobiles (smartphones et tablettes) ou des appareils traditionnels (ordinateurs de bureau et ordinateurs portables). Bien que l'optimisation pour les deux types d'appareils soit essentielle, les moteurs de recherche comme Google accordent la priorité à la convivialité mobile.

Un site Web adapté aux mobiles n'a peut- être pas été conçu pour les appareils mobiles, mais il a l'air bien et fonctionne parfaitement pour les utilisateurs mobiles. En revanche, une conception axée sur le mobile a été conçue dès le départ en pensant aux smartphones et aux tablettes. La version mobile vient en premier, puis les développeurs déterminent à quoi le site pourrait ressembler sur un ordinateur de bureau.

Google semble approuver cette idée. En 2016, le moteur de recherche a commencé à expérimenter l'indexation mobile d'abord. En 2020, ces expérimentations sont devenues partie intégrante des modes opératoires de Google.

Avec l'indexation axée sur les mobiles , Google charge votre site Web à l'aide du navigateur Web d'un smartphone et vous êtes classé dans la recherche Google en fonction des performances de votre page dans ce contexte mobile.

4 façons de déterminer si votre site Web est adapté aux mobiles

Un site mobile doit toujours être :

• Lisible, même sur les petits écrans
• Utilisable, pour que les personnes en déplacement puissent s'attaquer aux fonctions essentielles avec leur téléphone
• Rapide, donc les pages se chargent presque instantanément
• Facile à naviguer, pour que les gens puissent se déplacer rapidement

Les outils suivants peuvent vous aider à déterminer si votre site répond à ces critères :

1. Le test adapté aux mobiles de Google

Vérifiez la fonctionnalité mobile, la vitesse et la conception de votre page en une minute environ à l'aide de l'outil de test adapté aux mobiles de Google. C'est gratuit et vous n'avez pas besoin d'un compte Google Search Console pour l'utiliser.

Pour utiliser cet outil, procédez comme suit :

• Ouvrir le site de test de Google
• Collez l'URL de votre page Web dans la barre de test
• Appuyez sur le bouton "Tester l'URL"

Google ne vous donnera pas d'instructions étape par étape pour corriger votre fonctionnalité, mais vous pouvez toujours en apprendre beaucoup sur le fonctionnement de votre site dans un environnement de petite taille d'écran.

Les résultats potentiels incluent les éléments suivants :

• La page n'est pas utilisable sur mobile. Cela peut signifier que vous utilisez des plug-ins incompatibles comme Flash, que vous enfreignez les règles de conception réactive concernant les fenêtres, que vous utilisez un texte minuscule ou que vous placez des éléments cliquables trop proches les uns des autres.
• L'URL n'est pas disponible. Ce résultat suggère que votre page bloque les robots Google. Si Google ne peut pas explorer votre page, il ne peut pas vérifier votre site Web.
• La page est utilisable. Si vous avez fait tout votre codage correctement, vous obtiendrez un feu vert sans données supplémentaires.

Pour de nombreuses personnes, le test mobile de Google est à la fois précis et facile à utiliser. Mais si vous ne l'aimez pas, vous pouvez également utiliser mobiReady ou Page Speed ​​Insights pour exécuter des tests similaires.

2. Votre navigateur de bureau

Si la conception de votre site Web est réactive, la réduction de la taille de l'écran est un moyen rapide et facile de vérifier la convivialité sur différents appareils. Saisissez simplement un coin de votre fenêtre et tirez-le vers une forme plus petite. Les éléments en ligne devraient changer en conséquence.

Si vous avez des versions strictement mobiles de votre site Web, cette méthode ne fonctionnera pas. Au lieu de cela, vous pouvez utiliser des outils de développement de navigateur tels que Lighthouse.

Google Lighthouse est disponible pour Chrome et Firefox. Cet outil technique est souvent difficile pour les non-codeurs, mais les développeurs peuvent l'utiliser pour exécuter des tests rapides et fournir des rapports d'utilisabilité sur les feuilles de style, les fenêtres contextuelles, etc. Ces rapports peuvent vous aider à orienter le développement futur.

3. Outils de développement Chrome

Chrome DevTools de Google est un outil de développement Web qui permet aux développeurs de visualiser et de modifier des sites Web. Si vous utilisez Google Chrome, installez ces outils en tant qu'extension et vous serez prêt presque immédiatement.

DevTools inclut les éléments suivants :

• Une console, offrant aux développeurs la possibilité de repérer les erreurs de code
• Un inspecteur DOM (Document Object Model) pour une visualisation rapide de tous les éléments de la page
• Outils d'édition pour les styles de feuilles de style en cascade (CSS), le code JavaScript et d'autres éléments en ligne

Pour utiliser cet outil, procédez comme suit :

• Ouvrez Google Chrome et lancez le site que vous souhaitez vérifier
• Survolez n'importe où sur l'écran et faites un clic droit
• Choisissez "Inspecter"
• Basculez la barre d'outils de l'appareil sur "Responsive"

Si votre site se rétrécit, il est réactif et donc adapté aux mobiles.

4. Console de recherche Google

Utilisez un outil gratuit de Google pour rester au courant des erreurs de conception et de codage adaptées aux mobiles de votre site. Vous devez vous inscrire à Google Search Console, mais une fois que vous l'aurez fait, vous obtiendrez une grande quantité de données.

La Search Console vous montrera les performances de votre site, y compris des statistiques sur vos résultats de recherche. Découvrez à quelle fréquence les robots Google explorent votre contenu et obtenez des rapports sur les erreurs et les problèmes de performances.

Améliorez l'expérience utilisateur et vos résultats avec un site Web adapté aux mobiles

Utilisez des outils gratuits pour surveiller votre site Web et travaillez avec un développeur pour corriger les erreurs que vous trouvez. Ne soyez pas intimidé par le langage technique, votre développeur saura quoi corriger. Mais demandez des rapports et des captures d'écran réguliers afin de vous assurer que vous respectez les normes de Google adaptées aux mobiles et que vous ravissez les visiteurs qui naviguent sur mobile.

FAQ sur l'adaptation de votre site Web aux mobiles

Comment rendre les feuilles de style en cascade (CSS) et les images plus légères ?

En termes de codage, quelque chose de "léger" ne nécessite pas beaucoup de puissance de traitement. Les articles légers se chargent rapidement, ce qui est crucial dans l'environnement mobile. Vous pouvez essayer de compresser des images et d'intégrer des vidéos pour alléger ces éléments. Pour optimiser votre CSS, supprimez les styles inutiles et exploitez la compression et la mise en cache.

Que signifie la conception de sites Web réactifs ?

Un site Web réactif est une entité qui s'adapte en fonction de la taille de l'écran. Si un site Web déplace des éléments et se déplace autrement lorsque vous faites glisser la fenêtre d'écran de votre navigateur, vous êtes dans un environnement réactif. Si les éléments deviennent plus petits, vous avez affaire à une conception statique.

Quels sont les principes de base du responsive design ?

Voici les trois grands principes du responsive design, selon l'Interaction Design Foundation :

• Systèmes de grille fluide qui permettent au contenu de remplir l'espace disponible en fonction de la taille de l'appareil
• Des images fluides qui permettent aux images, icônes et vidéos de s'adapter à la taille de l'écran
• Requêtes multimédias qui permettent à la mise en page du site de changer en fonction de la taille de l'écran et d'autres paramètres