Un peu d’histoire !

Le design web adaptatif (responsive web design en anglais) est avant tout un concept qui fut inventé par le graphiste et essayiste Ethan Marcotte qui révolutionna l’industrie du web. Auparavant on parlait de grille flexible ou de média queries. Il y a eu des débats sur le fait de faire une version mobile et une version desktop mais Ethan par une réflexion originale mit tout le monde d’accord en écrivant le livre Responsive Web Design en 2011 posant les fondements du web moderne. Cependant cet essai reste avant théorique en proposant un ensemble de règles à suivre mais il convient à chacun de mettre en place un site Internet de la façon qui préfère.

Définition du responsive web design

Le responsive design permet de présenter une même page html 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é. 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 qui composent une page HTML. 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 s’en trouve facilité et cela permet de réduire les délais de développement d’un site Internet.

Création de site Internet avec les règles du responsive web design
Un même design pour tous les supports

Certains éléments du site Internet peuvent se transformer en fonction de la largeur de la fenêtre. Par exemple le menu de navigation est affiché en desktop mais sur mobile il se transforme en menu burger et apparait dans une sidebar quand on clique dessus. Ces différentes astuces 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 les différentes pages. Il est important de bien 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 les moteurs de recherche.

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 pour tous les supports. Ils possèdent une panoplie de fonctionnalités comme les breakpoints, les grilles, les colonnes, la navigation, etc. Toutes ces fonctionnalités permettent aux développeurs de site Internet d’accélérer leur développement en étant plus rentable. Depuis 2011 ces frameworks open source évoluent et sont devenus des références dans le développement web.

Les moteurs de recherche comme Google recommandent l’utilisation du responsive design pour créer des pages web. 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 très 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 fonctionnalités du framework qui souhaite et les compléter par les siennes. Des leaders du secteur informatique proposent des chartes et des règles à suivre pour faire évoluer les interfaces au niveau graphique et interactif. 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 utilisateurs plus intuitives et ergonomiques.