Comme vous l’avez peut être déjà remarqué, le contenu de ce site s’adapte aux mobiles, aux tablettes et aux écrans d’ordinateur. Trois tailles d’écrans bien distinctes, et pourtant une seule version du site sur tous les supports. Comment-est-ce possible ? C’est la magie du Responsive Web Design (RWD).
Le Responsive Web Design, c’est quoi ?
Le RWD ou site web adaptatif repense la manière de concevoir les parcours de navigation sur le web, puisqu’il ne s’agit plus de concevoir autant de versions de site web qu’il y a de familles de terminaux mais de concevoir une seule interface auto-adaptable. Les sites web responsive sont basés sur des systèmes de grilles fluides souvent dimensionnées non plus avec des unités absolues (fixes) comme des pixels mais avec des valeurs relative comme le pourcentage. Pour pouvoir adapter l’affichage de l’interface en fonction de l’écran, on va utiliser les « media queries ». C’est une fonction du langage CSS permettant d’appliquer des règles CSS différentes en fonction de la taille du terminal.
Le développeur va concevoir le site de manière « responsable », c’est à dire qu’il va penser toute la structure de l’interface pour qu’elle soit accessible à tous les utilisateurs depuis n’importe quel support.
Le Responsive Web Design, depuis quand ?
Les premiers sites s’adaptant en fonction de la largeur de l’écran ont vu le jour en 2001. On parlait de site flexible, fluide ou élastique. Ce n’est qu’en 2010 que le terme de Responsive Web Design a été inventé par Ethan Marcotte. Avant la notion de site adaptatif, les développeurs organisaient leur projet web en deux sites à part entière. Un site destiné aux ordinateurs et un site destiné aux mobiles. Cela impliquait le double de travail mais permettait de structurer le contenu plus ou moins simplement. C’est en 2013 que le RWD a commencé à être adopté comme la solution la plus rentable. Depuis, il est devenu peu à peu un standard. Il est très important au niveau du référencement, notamment sur le fameux moteur de recherche Google. En effet depuis le 21 avril 2015 Google pénalise le référencement des sites web non compatibles avec les mobiles, smartphones ou tablettes.
Le Responsive Web Design, les avantages et les inconvénients ?
Comme vous pouvez le constater, il y a énormément d’avantages à adopter le Responsive Web Design : conception et gestion d’une seule version de son site, plus de réactivité et de flexibilité, une ergonomie optimale, plus de visibilité, une meilleure accessibilité de son contenu, et donc un meilleur référencement.
On distingue cependant deux inconvénients au RWD qui sont d’abord liés à la conception du site. Cela demandera plus de temps pour penser la structure HTML / CSS, qui sera plus compliquée. Les images et les ressources étant les mêmes sur ordinateur ou sur mobile, beaucoup de données seront chargées lors de l’ouverture du site, ce qui peut parfois altérer la rapidité de celui-ci.
Conclusion
Le Responsive Web Design est la meilleure solution à un affichage optimal sur tout support, une solution magique. Les sites adaptatifs sont devenus des standards, c’est pourquoi je l’utilise dans chacun de mes projets !
