Le responsive web design est une expression très usitée ces dernières années, notamment depuis que le taux d’équipement en smartphones et tablettes a considérablement évolué.
Mais la compréhension de ces termes reste assez complexe pour le public.
Il ne s’agira donc pas dans cet article de faire une énième discussion propre aux professionnels du web sur les différences entre design responsive, design adaptatif, design fluide, mais d’expliquer simplement ce que l’on doit attendre au minimum en 2015 lorsque l’on fait concevoir un site internet.
Les appareils utilisés pour surfer sur le web
Il fut un temps où naviguer sur internet nécessitait la possession d’un ordinateur de bureau et… c’est tout.
On peut désormais visualiser un site web à partir de nombreux supports :
Télévision, ordinateur de bureau, ordinateur portable, tablette, smartphone, montre connectée…
A chaque support sa taille d’écran et ses spécificités techniques.
Comme il n’est pas question de faire un site web par support, le responsive web design s’attache à la conception de sites web multi-supports s’adaptant aussi bien au smartphone qu’à l’ordinateur de bureau.
Les résultats obtenus sur mobiles
La question que se pose le futur propriétaire d’un site web n’est pas de savoir comment son site a été conçu (quoique) mais comment être sur que son site est responsive et sera lisible sur tous les supports. La réponse est dans la question : la lisibilité.
La règle est la suivante : un site web doit proposer les mêmes services, la même « expérience utilisateur » pour reprendre une expression du métier, que le site soit vu sur mobile, tablette ou ordinateur de bureau.
La disposition ne sera souvent pas la même, les éléments seront réagencés, les polices souvent agrandies lorsque l’écran se fera plus petit, voire certaines options seront masquées car inadaptées au support, mais les internautes devront s’y sentir aussi bien qu’en consultation grand écran.
Pour en revenir à la question principale « mon site est-il responsive ? », le meilleur des tests reste celui qui consiste à essayer son site sur les appareils concernés. Mais comme il n’est pas possible de tester un site web sur tous les smartphones, tablettes et ordinateurs existants, un test beaucoup plus commun est très fréquemment pratiqué par les professionnels du web : il s’agit de redimensionner son navigateur afin de voir comment le site web réagit à ce redimensionnement.
Le navigateur est le logiciel avec lequel vous surfez sur internet. Il peut s’agir de Firefox, Opera, Internet explorer, Chrome, Safari, et tant d’autres.
Tout navigateur en tant qu’application fenêtrée peut être redimensionné à l’écran : lorsque l’on survole chacun des bords de l’application concernée, une double flèche apparaît, symbolisant la possibilité de saisir le bord en laissant le bouton gauche de la souris cliqué, et de redimensionner la fenêtre. Si ces doubles flèches n’apparaissent pas, c’est que votre navigateur est en mode plein écran. Il suffit alors de double-cliquer sur la barre de titre de la fenêtre (le plus haut) pour passer en position redimensionnable.
Comme une image vaut mille mots, d’autant plus animée, voici trois vidéos montrant le redimensionnement d’une page web sur un navigateur.
Regardez bien les éléments se réagencer, les menus classiques se transformer en menus pour mobile, et vous serez à votre tour capable d’effectuer le même test sur n’importe quel site web.
Si vous ne pouvez pas lire les vidéos, vous trouverez trois gif animés à leur suite.
Premier exemple :
Second exemple :
Troisième exemple :
Comme promis, la même chose en gif animé :
Conclusion
Ne sous-estimez pas le marché du mobile : votre site se doit d’être responsive si vous ne voulez pas passer à côté d’un nombre croissant de clients. N’oubliez pas qu’ils auront plus facilement en leur possession un téléphone qu’un ordinateur, ce dernier étant censé être plus cher. Leur première visite sur votre site web se fera donc peut-être via leur téléphone.
