Dans le passé, les concepteurs créaient des versions de bureau et mobiles distinctes des sites Web, ce qui signifiait deux conceptions et URL. Désormais, la norme est un site unique, réactif et adapté aux mobiles, qui s’adapte à la taille de l’écran. Les mobiles sont configurés pour que le code du site modifie le style des images, du texte et des boutons en fonction de l’appareil.
Table des matières
Éléments clés de la conception mobile
Si vous êtes sur le point de créer un nouveau site Web ou si vous gérez un site Web actuel, il est important de vous assurer que la conception est adaptée aux mobiles. Les styles créés pour les petits écrans se concentrent sur l’expérience utilisateur mobile, qui doit être prise en compte afin de créer une conception mobile efficace.
Les défis uniques de la navigation sur un petit écran doivent être pris en compte lors de la conception de sites adaptés aux mobiles.
- La navigation adaptée aux mobiles doit être claire et facile à suivre, ne nécessitant que quelques clics pour amener les utilisateurs à l’écran dont ils ont besoin.
- La conception doit inclure des fils d’Ariane qui indiquent clairement aux utilisateurs où ils se trouvent sur un site à tout moment.
Interface utilisateur
La simplicité est la clé d’une interface adaptée aux mobiles.
- Le site doit s’appuyer sur des éléments de conception simples qui mettent l’accent sur la facilité d’utilisation et évitent l’encombrement sur le petit écran. Clutter comprend du texte, des images et des vidéos.
- Les boutons et autres éléments de l’écran tactile doivent être suffisamment grands pour un tapotement efficace.
- Si votre site est un site de commerce électronique ou comprend des formulaires, simplifiez-les le plus possible. Réduisez la saisie qu’un utilisateur doit faire si vous le pouvez.
Éléments à éviter
Il existe un certain nombre de choses à ne pas faire lors de la conception pour mobile.
- Les pop-ups sont un énorme ennui pour les utilisateurs fréquents du Web mobile. Leur utilisation doit être évitée pour garder l’expérience de l’utilisateur transparente.
- La vidéo Flash, qui est toujours utilisée sur de nombreux sites Web, ne peut pas être lue sur de nombreux appareils mobiles. Pour cette raison, il doit être évité.
- Les fichiers de grande taille prennent plus de temps à télécharger sur un appareil mobile sans la puissance de traitement d’un ordinateur de bureau. Une grande vidéo flashy sur votre page d’accueil peut sembler frappante, un utilisateur mobile peut être dissuadé d’utiliser votre site si cette vidéo prend trop de temps à charger et rend la navigation sur le site difficile.
Créer un site Web adapté aux mobiles
De nombreux outils sont disponibles pour simplifier le processus de création d’un site adapté aux mobiles.
Thèmes et cadres adaptés aux mobiles
Il existe des frameworks adaptés aux mobiles que vous pouvez utiliser, tels que Bootstrap. Si vous utilisez WordPress, recherchez des thèmes adaptés aux mobiles et comprenant des outils pour vous aider à personnaliser votre conception pour mobile.
Optimisation d’image
Il est important de vous assurer que vos images sont optimisées pour le Web avec tout type de site. Ceci est particulièrement critique pour une conception adaptée aux mobiles. Si vous n’avez pas accès à un programme d’édition d’image tel que Photoshop, vous pouvez utiliser des optimiseurs d’image en ligne tels que Kraken.io et Optimzilla.
Lecteur vidéo HTML5
Étant donné que tous les appareils mobiles ne peuvent pas exécuter Flash, assurez-vous que toutes les vidéos du site fonctionnent avec un lecteur vidéo HTML5. JW Player est un lecteur populaire qui peut être utilisé sur de nombreux types de sites, y compris WordPress. Une autre option consiste à diffuser vos vidéos via YouTube ou Vimeo et à les intégrer à votre site.
Requêtes médias
Les requêtes multimédias sont des codes écrits pour votre fichier CSS qui indiquent à votre site Web de s’afficher de différentes manières en fonction de la taille de l’écran qui visualise le site Web. C’est ainsi que vous créez un site Web unique optimisé pour les versions mobiles et de bureau sans avoir besoin d’URL différentes.
Code de mise à l’échelle
La balise meta viewport est un autre élément de code important à utiliser. Il aide le navigateur à déterminer comment faire évoluer votre site.
Outils de test de la taille de l’écran
Il est important de savoir comment votre site apparaîtra sur des écrans de différentes tailles. Cela peut être un jeu d’enfant si vous utilisez des outils de développement Web, tels que ceux trouvés sur Chrome ou Firefox, pour les tests. Activez simplement l’outil et faites glisser votre écran jusqu’à la taille que vous souhaitez tester.
Conception et recherche adaptées aux mobiles
Si vous souhaitez élaborer une solide stratégie d’optimisation des moteurs de recherche pour votre site, une conception adaptée aux mobiles est indispensable. Google a fait savoir en 2015 que les sites qui n’étaient pas adaptés aux mobiles seraient pénalisés dans les recherches. Par conséquent, si votre site n’est pas optimisé pour le mobile, il sera difficile de le promouvoir sur les moteurs de recherche.
Rendre votre site Web adapté aux mobiles
Que vous utilisiez un framework comme Boostrap, des plugins WordPress ou HTML et CSS, il existe des outils disponibles pour vous aider dans la tâche complexe de conception adaptée aux mobiles. Si le codage ne fait pas partie de vos compétences, il existe de nombreux créateurs de sites Web que vous pouvez utiliser pour créer un site adapté aux mobiles. Quelle que soit la façon dont vous créez votre site, assurez-vous que le mobile est votre première considération lors de la planification de votre stratégie et de votre conception.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
