Le design web responsive
Le design web responsive ou adaptatif est un concept de web design qui émergea au début des années 2010. Le terme fut inventé par le graphiste et essayiste Ethan Marcotte qui révolutionna l’industrie du web design. Auparavant on parlait de grilles flexibles et d’éléments à largeur variable. Il y a eu des débats sur la manière de faire une version mobile et desktop. Ethan par une réflexion originale écrivit le livre Responsive Web Design en 2011 posant les fondements du web moderne. Cependant cet essai reste avant théorique et propose un ensemble de règles à suivre, mais il convient à chacun de mettre en place un site Internet à sa façon.
Le design responsive est le fait de présenter une même page aux différents supports de visualisation. Que l’on soit sur un mobile, une tablette ou un ordinateur, la page réorganise les différents éléments pour un affichage adapté sur le support de l’utilisateur. Il y a un réel travail à fournir pour optimiser le code au niveau des balises, des images, de la typographie, de la navigation et des différents éléments composant la page web. Heureusement des frameworks comme Bootstrap permettent de ne pas réinventer la roue en fournissant une base de travail très avancée. Le métier de développeur web et d’intégrateur s’en trouve facilité en réduisant les délais de conception d’une page HTML.
Dans l’année qui a suivi la publication du livre d’Ethan Marcotte, le W3C standardisa les médias queries comme une toute nouvelle fonctionnalité du CSS 3 après plus de 10 ans de travaux. Cette avancée majeure permet aux développeurs et aux intégrateurs d’appliquer du CSS en fonction de la largeur du navigateur ou de tout autre élément. C’est une standardisation allant dans le même sens que l’apparition des navigateurs web modernes dans les systèmes iOS et Android. Le concept de design responsive est donc fortement lié à l’usage du mobile sur Internet, d’ailleurs en 2017 pour la première fois l’usage des navigateurs mobiles sur le net est supérieur à celui des ordinateurs.
Le livre Responsive Web Design fait référence à de nombreux concepts représentant un design responsive. Par exemple certains éléments du site Internet se transforment en fonction de la largeur de la fenêtre. Le menu de navigation est affiché normalement sur un navigateur desktop mais sur mobile il se matérialise par menu burger ouvrant une sidebar quand on clique dessus. Ces différentes concepts peuvent aussi créer des problèmes au niveau référencement par exemple avec un menu différent sur mobile et desktop on peut doubler le nombre de liens dans une page. Il est important de réfléchir à tous les impacts que chaque élément responsive peut engendrer et de mettre en place une solution aussi bien pour l’utilisateur que pour le référencement.
Où en sommes-nous ?
Aujourd’hui tous les frameworks JavaScript / CSS sont basés sur le responsive design. Que ce soit Bootstrap, Tailwind CSS, Foundation ou les autres, ces outils proposent une base de code très poussée pour créer des pages adaptatives sur tous les supports. Ils possèdent une panoplie de fonctionnalités comme les breakpoints, les conteneurs, les grilles, les colonnes, la navigation, etc. Toutes ces fonctionnalités permettent aux développeurs de site Internet d’accélérer leurs développements en étant plus rapide et donc plus rentable. Depuis 2011 ces frameworks open source évoluent et sont devenus des références en responsive design et en développement web.
Il n’y a pas de version de responsive web design car ce n’est pas considéré comme un standard tel quel. C’est un concept qui évolue en fonction des techniques partagée par la communauté des développeurs, des chercheurs et des standards du W3C. Une grande difficulté vient des écrans à très grande résolution comme les écrans 4K et plus. Dans la majorité des cas le site va s’afficher avec une largeur fixe au-delà de 1200 ou 1400 pixels et rester centré à l’écran, mais il est possible d’afficher des zones et des textes plus grands.
Les moteurs de recherche comme Google recommandent l’utilisation du responsive design pour créer des pages HTML et les différentes raisons avancées sont :
- l’utilisation d’une URL unique pour afficher une page
- facilite les algorithmes d’indexation du code HTML
- évite les redirections pour un affichage plus rapide
- diminue le risque de faire des erreurs sur son site
- réduit les ressources des moteurs de recherche
Et où va-t-on ?
Le web est une industrie qui évolue rapidement et il est intrinsèquement lié aux évolutions du secteur informatique. Sans la démocratisation des smartphones et des tablettes, le responsive design n’aurait jamais émergé ou plus tardivement. Cet ensemble de règles n’est pas obligé d’être suivi à la lettre, chaque développeur peut intégrer juste les fonctions du framework qu’il souhaite et les compléter par les siennes. On trouve beaucoup de ressources et des essais en responsive web design fait par des développeurs ou des professionnels.
Tous les templates WordPress ou d’autre CMS incorporent ce concept et le mettent en avant dans leurs communications pour vendre leurs produits. Il existe également des entreprises et des freelances spécialisés en intégration web et qui transforme une maquette en un code CSS utilisant le responsive design.
Enfin des leaders du secteur informatique proposent des chartes et des règles à suivre pour faire évoluer les interfaces web au niveau graphique et interactif en améliorant l’expérience utilisateur. Par exemple Google avec le Material Design ou encore Microsoft avec Fluent. Les web designers peuvent s’inspirer de ces recommandations pour proposer des interfaces web plus innovantes, intuitives et ergonomiques.