Créer un site Web qui fonctionne bien sur mobile n’est pas facile, mais c’est une tâche possible. Tant que vous vérifiez votre site avant de l’envoyer, il n’y a aucune raison pour laquelle les utilisateurs mobiles ne devraient pas avoir une excellente expérience. Cependant, vous pouvez vous demander quels éléments ont le plus besoin de votre attention.

Dans ce tutoriel, nous allons vous fournir une liste simple de critères que votre site devrait remplir. Si tel est le cas, vos utilisateurs auront probablement une excellente expérience mobile, et si cela ne l’est pas, nous vous dirons comment changer les choses. Commençons par le point numéro un!

1 – Testez votre site Web sur plusieurs résolutions

L’une des choses les plus importantes en matière de sites mobiles est que votre site ne doit pas sembler être une version réduite de la version de bureau. Cela signifie que chacun de vos éléments devrait être à l’affût de multiples résolutions.

Si, d’autre part, aucun de vos éléments ne se voit bien sur le mobile, cela pourrait avoir un impact  négatif sur votre  taux de rebond. La chose intelligente à faire est de tester votre site Web sur plusieurs résolutions préalablement et de voir si tout s’affiche correctement.

Heureusement, ce processus n’est pas aussi compliqué qu’il le semble 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 tout site Web sur différentes résolutions, telles que:

Chrome Dev Tools : cette fonctionnalité du navigateur Chrome intégrée comprend une  barre d’outils de périphériques que  vous pouvez utiliser pour tester votre site sur plusieurs résolutions.

Des services tels que Screenfly et BrowserStack  : ces services tiers vous permettent de tester votre site sur une variété beaucoup plus large 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 des écrans plus petits

Menu de navigation wordpress blogpascher

Dans la plupart des cas, les menus sont le principal moyen de navigation pour vos visiteurs. Si vos liens sont difficiles à cliquer ou à lire sur des résolutions plus petites, cela affectera la convivialité. En outre, vous souhaitez également que tous vos éléments de menu soient facilement accessibles, quel que soit le périphérique utilisé pour naviguer.

Dans cet esprit, passons quelques étapes pour vous assurer de ne rien rater quand il est temps de tester vos menus mobiles:

  • Vérifiez que tous les éléments du menu sont visibles.
  • Assurez-vous que chaque lien est aligné et que les sous-menus sont imbriqués.
  • Vérifiez que vous pouvez lire chaque élément du menu et cliquer dessus.

La plupart des thèmes modernes WordPress créent automatiquement des menus responsives pour vous. Si vous rencontrez des problèmes avec cet aspect sur votre site, vous devez envisager de changer de thème.

3 – Vérifiez que vos images sont bonnes sur de petites résolutions

Blogpascher accueil miniatureLes images sont un élément clé de tout site Web, mais parfois, vos graphiques peuvent ne pas être à des meilleures résolutions. 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 s’inquiètent davantage de «déformer» leurs images, mais la mise à l’échelle peut également être un problème. Toutes les images ne peuvent être adaptées pour être parfaites à chaque résolution, mais vous pouvez prendre des mesures pour avoir moins de problèmes:

Concentrez vos efforts sur les images importantes pour votre image de marque.

Recherchez des alternatives évolutives aux types d’images populaires, telles que les SVG.

Dans la mesure du possible, optez pour des images mieux recadrées, afin qu’elles se retrouvent mieux aux plus petites tailles.

Tant que vous gardez ces conseils à l’esprit, vous devriez être prêt à partir. Rappelez-vous simplement qu’en ce qui concerne les images très complexes, comme les infographies, il se peut qu’il soit impossible de les adapter complètement aux faibles résolutions.

4 – Testez votre contenu pour la lisibilité

Un aspect qui influe le plus sur la facilité d’utilisation des périphériques mobiles est la lisibilité. Lorsque vous travaillez avec un facteur de forme plus petit, vous devez compenser cela en vous assurant que votre texte s’affiche toujours malgré la petite taille des écrans, au lieu de simplement diminuer la police. Le but ici est simple: vos utilisateurs ne devraient pas avoir à faire un zoom pour lire votre contenu. Après tout, c’est la recette parfaite pour ennuyer un utilisateur.

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

  • Choisissez une police de base très lisible  pour le contenu.
  • Utiliser les sous-titres chaque fois que possible pour décomposer votre contenu en des sections facilement lisibles.
  • 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 l’option que vous recherchez.

C’est tout pour ces conseils, j’espère qu’ils vous permettront de mieux optimiser vos blogs pour les appareils mobiles. Si vous avez des questions, n’hésitez pas à les poser.