Une liste de contrôle adaptée aux mobiles à suivre sur chaque site Web que vous créez

Créer un site Web qui fonctionne bien sur mobile n'est pas facile, mais c'est possible . Tant que vous vérifiez soigneusement votre site avant de l'expédier, il n'y a aucune raison pour que les utilisateurs mobiles ne bénéficient pas d'une excellente expérience. Cependant, vous vous demandez peut-être quels éléments nécessitent le plus votre attention.

Dans cet article, nous allons vous fournir une simple liste de contrôle de sept critères auxquels votre site doit répondre. Si c'est le cas, vos utilisateurs auront probablement une excellente expérience mobile, et si ce n'est pas le cas, nous vous dirons comment changer les choses. Commençons par le point numéro un !

L'importance d'avoir un site Web adapté aux mobiles

Avoir un site Web adapté aux mobiles est plus important que jamais de nos jours.

Le terme « mobile-friendly » semble un peu vague. Pour faire simple, un site peut être considéré comme adapté aux mobiles si vous pouvez facilement consommer son contenu et interagir avec lui à l'aide d'appareils mobiles de toutes sortes.

Comme vous le savez probablement, la navigation mobile est en hausse, ce qui signifie que de nombreuses personnes les utilisent comme principal moyen de naviguer sur le Web. Si votre site n'est pas facile à utiliser, les utilisateurs peuvent chercher une alternative. Heureusement, il existe plusieurs façons de tester si votre site Web est adapté aux mobiles. Par exemple, Google propose un test que n'importe quel site peut utiliser en collant simplement son URL :

Gardez cependant à l'esprit qu'aucun test automatisé n'est parfait - vous devrez donc également faire preuve de bon sens. À cette fin, voici quelques conseils pour vous aider à vous assurer que votre site est aussi convivial que possible pour les utilisateurs mobiles.

Une liste de contrôle en 7 étapes adaptée aux mobiles à suivre sur chaque site Web que vous créez

Compte tenu de l'importance du trafic mobile, il est essentiel que chaque site Web que vous créez soit adapté aux mobiles dès le départ. Cette liste de contrôle vous aidera à vous assurer qu'elle atteint chaque étape. Nous allons jeter un coup d'oeil!

1. Testez votre site Web à plusieurs résolutions

Tester votre site Web à plusieurs résolutions est facile avec le bon outil.

L'une des choses les plus importantes en ce qui concerne les sites mobiles est que votre site ne semble pas avoir été réduit par rapport à sa version de bureau. Cela signifie que chacun de vos éléments doit être beau à plusieurs résolutions.

Si, en revanche, aucun de vos éléments n'a l'air bien sur mobile, cela peut avoir un impact négatif sur votre taux de rebond. La chose intelligente à faire est de tester votre site Web à plusieurs résolutions au préalable et de voir si des problèmes surviennent.

Heureusement, ce processus n'est pas aussi compliqué qu'il y paraît, et vous n'avez pas besoin de posséder plusieurs appareils pour le faire. Il existe de nombreux services qui vous permettent de tester rapidement n'importe quel site Web sur différentes résolutions, tels que :

• Outils de développement Chrome : cette fonctionnalité de navigateur Chrome intégrée comprend une barre d' outils de périphérique que vous pouvez utiliser pour tester votre site à plusieurs résolutions.
• Services tels que Screenfly et BrowserStack : ces services tiers vous permettent de tester votre site sur une plus grande variété de résolutions.

Tous les outils que nous avons mentionnés sont gratuits, donc le budget ne devrait pas être un problème et il n'y a aucune excuse pour sauter cette étape !

2. Assurez-vous que vos menus et votre navigation s'affichent bien sur les petits écrans

S'assurer que vos menus s'affichent bien sur mobile est important pour que votre site reste utilisable.

Dans la plupart des cas, les menus sont le principal moyen par lequel les gens naviguent sur votre site. Si vos liens sont difficiles à cliquer ou à lire à des résolutions plus petites, cela affectera la convivialité. En outre, vous souhaitez également vous assurer que tous vos éléments de menu sont facilement accessibles, quel que soit l'appareil utilisé pour naviguer.

Dans cet esprit, passons en revue quelques étapes pour vous assurer de ne rien manquer au moment de tester vos menus mobiles :

1. Vérifiez que tous les éléments du menu sont visibles. Sinon, vérifiez s'ils peuvent être atteints en faisant défiler.
2. Assurez-vous que chaque lien est aligné et que les sous-menus sont imbriqués.
3. Vérifiez si vous pouvez lire chaque élément de menu et cliquez dessus.

La plupart des thèmes WordPress modernes tels que Divi créeront automatiquement des menus réactifs pour vous. Si vous rencontrez des problèmes avec cet aspect de votre site, il peut être intéressant d'envisager la mise à jour vers un nouveau thème.

3. Vérifiez si vos images sont belles à des résolutions plus petites

Les images de votre site doivent être tout aussi époustouflantes quelle que soit leur résolution.

Les images sont un élément clé de tout site Web, mais parfois vos graphiques peuvent ne pas être à leur meilleur à des résolutions inférieures. Par exemple, si votre logo n'est pas lisible lorsque quelqu'un accède à votre site via un mobile, cela affectera clairement votre image de marque.

Dans la plupart des cas, les gens craignent davantage de « déformer » leurs images, mais leur réduction peut également être un problème. Toutes les images ne peuvent pas être adaptées pour être parfaites à toutes les résolutions, mais vous pouvez prendre des mesures pour les rendre moins problématiques :

1. Concentrez vos efforts sur les images importantes pour votre image de marque.
2. Recherchez des alternatives évolutives aux types d'images populaires, tels que les SVG.
3. Dans la mesure du possible, optez pour des images mieux recadrées, afin qu'elles soient plus belles dans des tailles plus petites.

Tant que vous gardez ces conseils à l'esprit, vous devriez être prêt à partir. N'oubliez pas que lorsqu'il s'agit d'images très complexes, telles que des infographies, il peut ne pas être possible de les adapter complètement aux basses résolutions.

4. Testez la lisibilité de votre contenu

Les petits écrans peuvent avoir un impact sur la lisibilité, mais il est facile de s'y adapter.

L'un des aspects qui a le plus d'impact sur la convivialité des appareils mobiles est la lisibilité. Lorsque vous travaillez avec un facteur de forme plus petit, vous devez compenser en vous assurant que votre texte s'affiche toujours à une taille lisible, au lieu de simplement rétrécir. L'objectif ici est simple : vos utilisateurs ne devraient pas avoir à zoomer et à se frayer un chemin à travers votre site. Après tout, c'est une recette parfaite pour un visiteur agacé.

Heureusement, la lisibilité est un aspect relativement simple à aborder :

• Choisissez une police de base très lisible pour le corps de votre contenu.
• Utilisez des sous-titres chaque fois que possible pour décomposer votre contenu en sections facilement numérisables.
• Optez pour un thème qui vous donne plus de contrôle sur la façon dont votre texte s'affiche.

En ce qui concerne notre dernier point, beaucoup de thèmes modernes devraient vous offrir le contrôle que vous recherchez. Par exemple, Divi vous permet d'affiner la taille de n'importe quel texte de module pour le bureau et le mobile.

5. Assurez-vous que les éléments de votre site sont faciles à interagir avec

Il peut être difficile d'interagir avec des éléments à l'aide de vos doigts, vous devrez donc ajuster vos conceptions.

Cette étape pourrait couvrir beaucoup de terrain, mais soyez indulgents avec nous. Jusqu'à présent, nous avons expliqué à quel point il est important que vos menus soient faciles à utiliser, mais il en va de même pour le reste des éléments interactifs de votre site. Boutons, liens, formulaires et plus encore – ils doivent tous rester utilisables pour les appareils mobiles.

La considération clé ici est, bien sûr, la taille. Au fur et à mesure que nous descendons dans la résolution, la plupart des éléments dont nous avons parlé rétrécissent également. C'est votre travail de tester s'il est trop difficile d'interagir avec eux, car cela peut avoir un impact sur la convivialité de votre site.

Quant à la façon de procéder, nous vous recommandons d'utiliser de vrais appareils mobiles ici au lieu des services que nous avons mentionnés précédemment. Après tout, vous devez savoir si vos éléments sont faciles à utiliser avec vos doigts au lieu d'une souris. Voici ce que vous devez rechercher :

• Assurez-vous que vos appels à l'action (CTA), formulaires et éléments de menu sont faciles à cliquer.
• Vérifiez s'il y a un chevauchement entre les éléments critiques, ce qui pourrait amener les utilisateurs à cliquer sur le mauvais.

Une fois que vous savez quels éléments vous posent problème, il ne vous reste plus qu'à les redimensionner selon vos besoins. Si vous utilisez un thème tel que Divi, vous pouvez le faire depuis l'écran des paramètres de chaque module.

6. Assurez-vous de ne pas trop vous fier aux pop-ups

Les fenêtres contextuelles peuvent être efficaces, mais elles ont également un impact sur la convivialité de votre site.

Les pop-ups opt-in et autres entraînent souvent des augmentations très importantes de la conversion. Cependant, ils ont également tendance à ennuyer au moins autant de personnes qu'ils se convertissent.

Il est difficile de déterminer exactement combien de personnes vous effrayez si vous utilisez des pop-ups mobiles intrusifs, mais nous pouvons vous dire que certains moteurs de recherche – tels que Google – vous pénaliseront pour cela. Si vous utilisez des fenêtres contextuelles qui obscurcissent votre contenu principal ou obligent les utilisateurs à les parcourir avant d'y accéder, votre optimisation pour les moteurs de recherche (SEO) en souffrira.

Nous savons que les pop-ups peuvent être utiles, mais il existe des alternatives moins intrusives, telles que :

• Formulaires opt-in élégants.
• CTA optimisés.

Ce n'est guère révolutionnaire, mais l'optimisation de vos formulaires et CTA peut vous rapporter plus à long terme, car vous aliénerez moins d'utilisateurs. De plus, votre classement dans les moteurs de recherche ne sera pas affecté non plus.

7. Testez les temps de chargement de votre site Web

Si votre site Web se charge en moins d'une seconde, vous pouvez être très satisfait de vos résultats.

Si vous êtes un habitué d'Elegant Themes, vous saurez que nous mettons toujours l' accent sur les performances dans la mesure du possible. Un site à chargement rapide n'est pas quelque chose que beaucoup de gens remarquent, mais ils le remarquent certainement lorsque le contraire se produit.

Les temps de chargement élevés entraînent souvent une augmentation de votre taux de rebond et rendent votre site moins utilisable. De plus, ils sont particulièrement importants pour les utilisateurs mobiles, car certains d'entre eux peuvent naviguer sur votre site en utilisant des connexions moins qu'optimales.

L'optimisation de votre site WordPress est un sujet qui pourrait prendre un article entier à lui seul, mais voici quelques conseils rapides :

• Essayez un thème optimisé pour les mobiles tel que Divi si possible.
• Optimisez vos images pour qu'elles prennent moins de place.
• Implémentez une solution de mise en cache pour votre site Web.

Ce sont toutes des étapes solides, mais ce n'est pas tout ce que vous pouvez faire pour réduire vos temps de chargement. Pour plus d'informations, consultez cet article complet que nous avons publié il y a quelque temps sur la façon d'optimiser votre configuration WordPress.

Conclusion

S'assurer que votre site Web est adapté aux mobiles est plus important que jamais. Si la tendance actuelle se maintient, vous verrez la plupart de votre trafic provenir de sources mobiles au cours des prochaines années (si ce n'est déjà fait). La chose la plus intelligente que vous puissiez faire en ce moment est de fournir une expérience tout aussi substantielle sur les ordinateurs de bureau et les appareils mobiles.

Si vous n'êtes pas sûr que votre site Web puisse être considéré comme adapté aux mobiles, voici une simple liste de contrôle pour vous aider à le découvrir :

1. Testez votre site Web à plusieurs résolutions.
2. Assurez-vous que vos menus et votre navigation s'affichent correctement sur les petits appareils.
3. Vérifiez si vos images sont bonnes à des résolutions inférieures.
4. Testez la lisibilité de votre contenu.
5. Assurez-vous que les éléments de votre site sont faciles à interagir.
6. Assurez-vous de ne pas trop vous fier aux pop-ups.
7. Testez les temps de chargement de votre site Web.

Avez-vous des questions sur la façon de vous assurer que votre site est adapté aux mobiles ? Parlons-en dans la section commentaires ci-dessous!

Image miniature de l'article par 32 pixels / shutterstock.com.