Aller au contenu principal

Responsive web design

Il y a encore une petite dizaine d’années, avoir un site responsive était le top du top. C’était d’ailleurs une option, presque avant-gardiste. Aujourd’hui, la question ne se pose même plus : un site est responsive ou n’est pas.

Publié le 24 avril 2019

La question du responsive design ne se pose plus

Pourquoi ? Parce que les smartphones se sont glissés dans nos poches il y a une dizaine d’années justement — le premier iPhone, sorti en 2007, a changé la donne. Les usages mobiles se sont déployés à vive allure, avec d’un côté des utilisateurs de plus en plus nombreux et de plus en plus connectés, et de l’autre des annonceurs en quête de visibilité. En 2015, le trafic mobile dépasse celui sur ordinateur. En 2018, le moteur de recherche Google favorise les sites optimisés pour la navigation mobile.

Marque bretagne responsive design

Vous avez dit mobile first ?

Concevoir un site « mobile first », c’est d’abord envisager l’interface d’un site web sur smartphone. Résultat : avec cette approche, les sites conçus sont dépouillés… voire trop. « Côté design, on travaille en parallèle sur les deux versions, desktop et mobile. Nous prenons les deux extrêmes, le plus petit et le plus grand des écrans, et nous imaginons des cas critiques pour certains contenus. », explique Guillaume Genest, notre Lead Designer. D’ailleurs, la notion d’écran ne se suffit plus à elle-même, tant leur taille et leur résolution diffèrent selon les devices utilisés.

Concrètement, « en front-end, nous réfléchissons avec les web designers pour adapter les éléments qui n’auraient pas assez de place en navigation mobile », complète Manuel Taraud, notre responsable Front-End. « On estime qu’un internaute doit avoir le même contenu sur mobile, desktop ou tablette. »

responsive design LJA

D’ailleurs, on ne parle plus vraiment d’adaptatif versus responsive. Le premier visait à prévoir différentes versions selon l’appareil utilisé, alors que le second se module automatiquement. Aujourd’hui, les solutions techniques facilitent le déploiement du responsive, plutôt que de l’adaptatif. À titre d’exemple, les icônes en .SVG, vectorisées, qui s’ajustent au device. Ou l’évolution du HTML, qui permet de laisser le choix aux navigateurs, parmi les différentes tailles d’images mises à sa disposition, selon le contexte de l’utilisateur.

L’enjeu du responsive : le design system

La technique est donc plus accessible, simplifiée. L’outil n’est plus un frein, ou une limite chronophage. Comme souvent dans ces contextes, l’outil fait place à une vision plus « meta ». Pour le responsive, le design system occupe progressivement la place.

En deux mots, le design system est une bibliothèque d’éléments d’interface, des guides de style à la charte éditoriale. En d’autres termes, c’est le camp de base de tous les acteurs en lien avec la ou les interface(s) web d’un annonceur ou d’une marque en particulier.

Design system au service du responsive

« L’idée est de centraliser tous ces outils en un seul et même endroit. Le design system répond à tous les questionnements de tous les interlocuteurs en lien avec la communication de la marque ou du produit — y compris les web designers et les développeurs front-end », précisent Manuel et Guillaume.

« Le design system est en quelque sorte la source unique de vérité du projet ».

Design system Yes we Hack

Lonely PlanetAudi ou encore Yes We Hack se sont essayés au design system. En filigrane, c’est bien la cohérence du contenant et du contenu qui sont en jeu, tout en permettant de répondre à tous les cas d’usages… Et c’est, en somme, la finalité du responsive.