Que vous soyez Directeur marketing, Responsable de la communication d’une société ou même auto-entrepreneur la présence digitale de votre entreprise est entre vos mains. Le fait est que aujourd’hui la plupart de vos visiteurs vous consultent à partir d’un smartphone. Vous devez leur offrir la meilleure expérience utilisateur. Découvrez quelques points importants que peu de gens savent, ou respectent lors de la création de votre site internet d’entreprise créent leur site web d’entreprise.
1. Mobile, encore mobile, toujours mobile
Oui, je sais, certains me diront c’est évident, tout le monde le sais. Je leur répondrai alors ceci : entre ce qui se sait et ce qui se pratique il y a un fossé de la taille du Grand Canyon.
A l’heure actuelle beaucoup de sites web de grandes entreprises ne sont pas parfaitement adaptés au mobile. Or, la consultation de votre site web se fait maintenant majoritairement via un périphérique mobile (Smartphone, Tablette). Optez pour le « mobile-first » : optimisez votre site internet en priorité pour le mobile avant de l’adapter au desktop.
Selon Statista, la part du trafic mobile sur le web est estimé à 52,6% du trafic mondial durant le dernier trimestre de 2019. Si votre site n’est pas « responsive design », vous risquez de perdre plus de la moitié de votre trafic. Et ce taux grimpe rapidement d’année en année.
Par ailleurs, 8 visiteurs sur 10 cessent de s’engager sur un site qui ne s’affiche pas correctement sur le mobile. Même google classe mieux les sites qui sont adaptés au mobile.
La check-list pour adapter mon site ?
- Bien se renseigner les tailles d’écran
Voici les tailles d’écran les plus fréquemment utilisées :
– 360x640 (petit smarthphone) : 22,64%
– 1366x768 (ordinateur portable moyen) : 11,98%
– 1920x1080 (grand desktop) : 7,35%
– 375x667 (smarthphone moyen) : 5%
– 1440x900 (desktop moyen) : 3,17%
– 720x1280 (tablette) : 2,74%
- Éliminer le maximum de friction :
Se concentrer sur ce qui permet à votre visiteur d’atteindre son objectif principal sans trop grincer les dents. Les objectifs secondaires doivent être relégués au second plan sur le mobile. Il faut ignorer certaines étapes intermédiaire et autre micro-interaction causant des friction inutiles. (Ex : Pour un site de cours en ligne, l’inscription à une formation est plus important que l’inscription à la Newsletter)
- Privilégier l’accessibilité du pouce :
L’ideal c’est que votre interface soit entièrement manipulable avec le pouce (surtout le pouce droit) Le schéma ci-dessous illustre le niveau de facilité avec lequel le pouce droit peut atteindre les différentes zones de votre smartphone. Placez les éléments clés dans des zones accessibles au pouce
- Tirer profit des applications natives des appareils mobiles
Le responsive-design ne consiste pas seulement à adapter la version desktop de votre site pour le mobile. Les nombreux avantages du mobiles de sont pas réservés uniquement aux app. Votre site web doit titrer partie de ces dernier pour améliorer l’expérience utilisateur (Appareil photo, GPS, etc)
- Faire des mises en page fluides
Travaillez de préférence avec unités en pourcentage pour rendre vos interfaces fluide afin de tenir compte de toutes les tailles intermédiaires. Les formats d’image SVG peuvent être agrandis et réduits sans perte de qualité et sont indépendants de la résolution. Vous devez aussi penser à l’orientation paysage sur le mobile au risque de perdre en convivialité.
- Le responsive-design concerne également les polices de caractères
En effet sur le web, un point n’est pas toujours égal à un pixel, car différents appareils ont des résolutions différentes. Vous pouvez à la place du pixel utiliser l’unité em pour vos tailles de police, ce qui les rend réactives. Sinon un texte peut sembler plus petit ou plus grand selon le type de téléphone de l’utilisateur.
- Optimisation du chargement et de l’affichage des images
Ne pensez surtout pas que le responsive-design s’intéresse seulement à l’apparence du site. Sa performance sur mobile doit être bien gérée, particulièrement le temps de chargement. Pour cela vous pouvez utilisez la technique dite du "chargement paresseux". Elle consiste à retarder le chargement d’éléments lourds et non importants pour améliorer les performances de la page.
Le contenu en dessous de la ligne de flottaison peut être chargé seulement si, et lorsque l’utilisateur défile en dessous de cette dernière. Les médias bloquant le rendu doivent être téléchargés après la mise en page et le contenu.
Conception de site web d’entreprise
Un projet de création de site internet, prenez rendez-vous avec moi pour en discuter autour d’un savoureux café, ou d’un thé si vous préférez.
(Discutons ensemble de votre projet)