Le design web responsive
Le design web responsive ou adaptatif est un concept de l’industrie du web qui émergea au début des années 2010. Le terme fut inventé par le graphiste et essayiste Ethan Marcotte qui révolutionna la façon de réaliser un site. Cette technique se démocratisa surtout grâce à l’apparition des smartphones et tablettes. Auparavant il n’y avait aucun consensus sur la manière de réaliser un site. Certain préconisait les tableaux, d’autres les iframes puis la communauté se mit d’accord sur l’élément div avec quelques recommandations sur les feuilles de styles. Ethan par une réflexion plus poussée, écrivit le livre Responsive Web Design en 2011 posant les fondements du web moderne. Cependant cet essai reste avant tout 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 la même page en s’adaptant aux supports de visualisation de l’utilisateur. Que l’on soit sur un mobile, une tablette ou un ordinateur, la page réorganise les éléments pour un affichage adapté à la largeur de l’écran. 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. C’est un gros travail à réaliser pour les développeurs qui doivent fournir plus d’efforts pour afficher correctement la page sur tous les navigateurs. Heureusement des frameworks comme Bootstrap permettent de simplifier l’intégration 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 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 Responsive Web Design fait référence à de nombreux concepts pour faciliter l’ergonomie sur les différents supports. Par exemple les éléments de la page s’affichent différemment 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 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 pour l’utilisateur sans impacter le référencement.
Les frameworks responsives
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 rapides et donc plus rentables. 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 du responsive web design, 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 les suivantes :
- 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
L’avenir sur responsive
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 les fonctions d’un framework qu’il souhaite utiliser 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 des autres 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 transforment 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. On retrouve par exemple le Material Design de Google ou Fluent chez Microsoft ou encore les évolutions du design de iOS et iPadOS chez Apple. Les applications proposent aussi un design adaptatif en fonction du support de l’utilisateur que ce soit une tablette ou un smartphone. Les web designers peuvent s’inspirer de ces recommandations pour proposer des interfaces web plus innovantes, intuitives et ergonomiques.