Les internautes utilisent désormais plusieurs écrans presque quotidiennement: téléphones portables, tablettes, ordinateurs portables, ordinateurs fixes… et nous avons tous besoin de quantités toujours grandissantes d’informations pour réaliser nos projets à un rythme soutenu. Et même lorsque l’on est chez soi et que l’on regarde la télévision, que l’on joue à un jeu sur son téléphone, ou qu’on lit le journal sur la tablette, il existe plusieurs raisons pour lesquelles il est nécessaire de s’assurer que les designs des sites web correspondent à ces 3 tailles d’écran.
Depuis le début de l’année 2014, des rapports montrant que les gens utilisent plus volontiers leurs téléphones et tablettes pour surfer sur le web que leurs PCs commencent à émerger. Les ventes de PCs ont également beaucoup baissé, tandis que les dépenses sur les appareils mobiles et les applications mobiles atteignent des sommets.
La plupart des logiciels de statistiques vous diront le pourcentage de visiteurs accédant à votre site à partir d’un appareil mobile (si vous avez installé Google Analytics, le nombre de visiteurs est divisé entre « Ordinateurs », « Mobiles » et « Tablettes »). Si vous avez un site B2B, vous verrez peut-être 1 visiteur sur 3 utilisant un appareil mobile plutôt que 1 sur 2, mais malgré tout, il s’agira sans doute d’un pourcentage conséquent, qui devrait vous faire envisager de convertir votre site pour le rendre mieux adapté aux plateformes mobiles.
Comment adapter votre site pour les mobiles
Un style simple et épuré est désormais une bonne base de réflexion lorsque l’on considère des idées de design pour un site web, car cela permet d’éviter les confusions et rend la navigation plus simple, plus claire et plus agréable.
Donc, en termes de design, que pouvons-nous faire pour offrir à l’utilisateur d’un site web une expérience plus agréable sur petit écran ?
-
L’idéal est d’utiliser un thème ou template réactif, où la taille et l’ordre des différents éléments changent en fonction de l’appareil utilisé – voir la section à droite pour plus d’informations sur les thèmes réactifs.
-
Des écrans plus petits impliquent plus de défilement: les gens ne veulent pas s’embêter à essayer de toucher un minuscule icône sur l’écran, faire défiler est beaucoup plus simple.
-
Maximisez l’utilité de chaque page, surtout la page d’accueil. Cela offrira une expérience simplifiée à l’utilisateur. Les lightboxes, recouvrements (overlays) et des blocs pouvant être redimensionnés / repositionnés peuvent réduire le nombre de clics.
-
Envisagez d’utiliser des menus ou sous-menus déroulants qui n’apparaissent que sur les pages concernées.
-
Vous pourriez ajouter un fond dynamique à votre design de site web afin d’enrichir l’expérience de l’utilisateur grâce à une combinaison de texte, d’images, de vidéos et de fonctionnalités interactives.
-
Si vous utilisez une image qui attire fortement l’attention, plutôt que de spécifier une largeur fixe (ex : 800px), si elle doit prendre toute la largeur de la page, spécifiez simplement que la largeur doit être de 100% ou donnez-lui une largeur maximale. Cela lui permettra d’être réduite sur les appareils mobiles. N’oubliez pas que le texte doit être suffisamment gros pour rester lisible une fois l’image rétrécie.
-
Simplifiez vos associations de couleurs en choisissant une ou deux couleurs complémentaires, par exemple dans différentes nuances. Trop de couleurs ne font que réduire le message sur un écran plus petit.
-
Si votre site est riche en images, envisagez de tout simplement supprimer les couleurs dans votre template pour mieux faire ressortir les images. Le blanc, le noir, et toutes les nuances de gris sont désormais très appréciés, et on peut y ajouter une petite touche colorée pour plus d’impact – ou tout détail qui attirera l’attention avec goût.
-
Convertissez vos diaporamas ou menus Flash au format JavaScript et, si vous utilisez des animations Flash, choisissez des images qui pourront les remplacer pour les visiteurs dont le téléphone n’est pas compatible avec Flash. La plupart des téléphones Apple ne montrent pas les animations Flash.
-
Utilisez le même template sur l’intégralité du site. Avoir un template et des menus standardisés aide les utilisateurs à mieux se repérer sur le site quand ils ne peuvent en voir qu’une petite portion à la fois.
