Faire du responsive design ? Oui, mais avec discernement !
Un peu d’histoire
De l’invention des premiers ordinateurs à leur adoption par le grand public, la taille des écrans n’a cessé d’évoluer, et, avec elle, nos façons de concevoir le web.
Dans les années 1990, les premiers ordinateurs personnels arboraient des résolutions très réduites comme 640*480 pixels. La norme a évolué au fur et à mesure des années pour atteindre 1024*768 dans les années en 2000.
En 2007, les iPhone viennent révolutionner le marché avec un format d’écran vertical et tactile. La manière de designer et de développer des sites doit être repensée, obligeant les concepteurs à développer un site par type d’appareil : un travail long et fastidieux.
En 2010, l’arrivée des tablettes multiplie les nouveaux formats d’écrans.
En 2012, le CSS permet enfin d’adapter les éléments d’un site en fonction de la taille de l’écran de l’utilisateur, permettant alors de concevoir un seul site qui s’adapte à tous les formats. C’est à ce moment que le responsive design se popularise.
Depuis, la diversité d’appareils et de tailles d’écran à explosée, et le nombre de consultations de sites sur smartphone a largement dépassé les visites sur ordinateur, rendant le responsive design incontournable.
Alors, par où commencer ?
En consultant screensizemap.com, on accède à un superbe graphique interactif des tailles d’écran les plus utilisées dans le monde, on peut y voir que les formats les plus répandus sont :
- 1920*1080 px ;
- 1366*768 px ;
- 360*800 px…
En voyant ces données, on est tentés de commencer par la taille la plus utilisée, 1920*1080 px, puis de la décliner sur les tailles qui suivent par ordre d’utilisation.
Mais ce serait une erreur. Pourquoi ?
Designer par la contrainte : Commencer par le plus petit
Imaginez partir en vacances avec une contrainte un peu particulière : vous devez faire l’aller avec une valise et revenir avec un petit sac à dos. Lorsque vous préparerez vos affaires, vous les choisirez de manière à être sûr qu’elles rentrent dans le petit sac du retour, car si vous vous basez sur la capacité de votre valise, vous devrez abandonner une partie de vos affaires au moment de tout transférer dans votre sac à dos.
Il en va de même quand on conçoit un site responsive : en commençant par les grands écrans, on risque de se retrouver avec des quantités de contenus beaucoup trop importantes, des composants inadaptés à la taille des petits écrans, des visuels incompréhensibles une fois réduits…
On peut donc en tirer deux enseignements :
- Il faut designer pour les plus petits appareils en premier, c’est ce qu’on appelle le « Mobile first » ;
- Il faut designer pour les plus petites tailles potentielles de chaque appareil : on définit les points de rupture à partir desquels le design changera pour s’adapter à la taille de l’écran de l’appareil, c’est ce qu’on appelle des breakpoints.
Considérer les différents usages : à chaque appareil son comportement
En plus des contraintes de taille, les utilisateurs n’utilisent pas un site de la même manière quand ils naviguent sur un téléphone, une tablette ou un ordinateur.
Si l’on prend l’exemple d’une carte comme Google Maps, sur mobile les utilisateurs préféreront zoomer en « pinçant », alors que sur desktop les utilisateurs chercheront plutôt des boutons +/- ou une réglette à actionner à la souris.
Conclusion : observez vos utilisateurs
Le responsive design est aujourd’hui un indispensable dans la conception d’un site, à condition de le faire correctement. Les outils dont nous disposons aujourd’hui nous permettent de créer des interfaces qui s’adaptent à tous types d’écrans, mais il est crucial de toujours garder en tête les comportements réels des utilisateurs et leurs appareils.
En faisant appel à des experts, vous vous assurez de concevoir un site responsive dans les bonnes pratiques afin de ne délaisser aucun utilisateur, peu importe l’appareil qu’il utilise.
