L’arrivée des smartphones a marqué une véritable révolution dans le monde du web design. Du jour au lendemain, tout le monde voulait être le premier à proposer des sites avec un design web responsive. C’était presque de la magie : redimensionner la fenêtre du navigateur et voir tout le site s’adapter instantanément à la nouvelle résolution, jusqu’à en modifier la structure.
Lorsque nous présentions cela à nos clients – ce qui peut sembler surprenant aujourd’hui – ils étaient généralement stupéfaits. Et pourtant, cela ne remonte pas à si longtemps. Désormais, cette approche est devenue la norme.
Cependant, il reste encore beaucoup à faire en matière de design web responsive ou adaptatif. Il ne suffit pas de s’appuyer sur un framework CSS comme Bootstrap et de penser que tout le travail sera fait. Pour créer un véritable lien avec l’utilisateur final, il faut lui offrir une expérience adaptée à son appareil. Cela implique de comprendre comment il interagit avec son support et d’anticiper ses attentes de navigation.
Sur un ordinateur de bureau, la souris reste l’outil principal de navigation. À l’inverse, sur smartphone, la navigation est tactile : il est donc essentiel de concevoir un design web qui facilite cette interaction.
Les clés d’un bon design web responsive
Menu de navigation
Le menu de navigation doit être simple d’utilisation pour l’utilisateur. Pour cela, il est judicieux d’intégrer un bouton qui affiche le menu de notre design web, que ce soit en le faisant glisser depuis le côté ou en le déroulant vers le bas. Cette solution permet de gagner de la place et d’offrir une interface plus claire.
Images adaptatives et cohérentes
Il est essentiel que les images de votre design soient parfaitement adaptatives. Elles doivent s’afficher correctement autant sur un écran de 27″ que sur un iPhone.
Au-delà de cet aspect fondamental, il est crucial de veiller à la cohérence des proportions. Les images doivent respecter l’orientation de l’appareil ou de l’écran. Par exemple, une image très panoramique pensée pour la version desktop risque, sur smartphone, de n’occuper que quelques centimètres de hauteur pour toute la largeur de l’écran – ce qui n’a souvent pas de sens.
La meilleure solution consiste donc à proposer un format intermédiaire ou à remplacer l’image spécifiquement pour l’affichage sur mobile.
Ordre et hiérarchie
L’ordre dans lequel vous organisez les sections de votre site est primordial. En passant à une version mobile, la plupart des contenus seront affichés en une seule colonne, les uns sous les autres. Il faut donc anticiper l’ordre dans lequel l’utilisateur découvrira vos sections et placer les plus importantes en haut de page.
Moins, c’est mieux
Dans la continuité du point précédent, il est recommandé, lors de la conception pour mobile, de supprimer les sections non essentielles pour les visiteurs sur ces appareils. Par exemple, les pieds de page classiques peuvent être supprimés ou réduits à une simple ligne d’informations de contact.
Exploitez toutes les fonctionnalités disponibles
Pour optimiser l’expérience sur smartphone, il est indispensable de tirer parti des fonctionnalités spécifiques à ces appareils. Par exemple, si la version desktop propose une carte de contact, la version mobile devrait permettre d’ouvrir directement le GPS en un clic. Vous pouvez également intégrer des boutons d’appel direct pour simplifier la prise de contact.
Quelques chiffres clés
Aujourd’hui, les statistiques montrent que la majorité des internautes consultent les sites web depuis un appareil mobile. On compte 51 % de visiteurs sur mobile contre 42 % sur desktop, les 7 % restants utilisant d’autres types de terminaux.
- 51 % de visiteurs sur mobile
- 42 % de visiteurs sur desktop
- 7 % utilisent d’autres appareils
