Le Responsive Design, mais qu’est-ce que c’est ? Est-ce indispensable d’avoir un site web responsive ? A travers ce second volet de notre série nous allons tenter de répondre aux questions que vous vous posez.
Bon, le web design on connaît… mais pourquoi responsive ? Parce que la multitude des tailles d’écran utilisés pour surfer sur le web a rendu impossible l’utilisation d’un format de page unique. Smartphone, tablette, ordinateur portable ou de bureau, télévision connectée, autant de formats différents nécessitant une conception dédiée.
Table des matières
Oui bon, mais le plus important c’est l’ordi non ?
Mais non ! De moins en moins, car le monde est devenu mobile. Aujourd’hui, près de 90 % de la population mondiale possède un smartphone et 67 % n’accèdent au net que par ce moyen. En France, plus de 80 % des résidents ont également un smartphone et 63 % affirment chercher des informations en ligne.
Les chiffres diffèrent d’une source à l’autre, mais on peut affirmer sans se tromper que plus de 50 % du trafic internet mondial arrive sur des téléphones mobiles. Le plus important, pour en terminer avec les statistiques, est sans nul doute que 61 % des utilisateurs préfèrent les entreprises qui offrent une interface mobile.
Ne vous y trompez pas, nous avons sauté à pieds joints dans l’ère du Mobile First ! D’ailleurs les hordes de Smombies* qui déferlent dans nos rues sont là pour le prouver.
Ok, alors je fais quoi de mon site web ?
Quand on parle de Mobile First, on veut dire qu’on pense pour le Mobile et qu’on adapte ensuite pour les écrans plus grands et non le contraire. En même temps c’est logique. Mieux vaut déménager d’un studio vers une maison ou l’inverse ? Si vous me répondez l’inverse, je vous laisse régler le casse-tête que va représenter le fait de caser les meubles d’une maison dans un studio.
Et c’est sans compter sur le fait que les ordinateurs ont un écran en format paysage, alors qu’un smartphone se tient en format portrait. Bien sûr, on peut tourner son téléphone d’un quart de tour, mais vous avez déjà essayé avec un site non optimisé pour le mobile ?
C’est bon, j’ai compris. Mais le responsive ça marche comment ?
C’est magique ! Non je plaisante… mais ça peut paraître magique pour les néophytes. En fait, ce qui est génial, c’est qu’on n’a pas besoin de créer une page distincte par format souhaité. On ne crée qu’une seule page et les feuilles de style (CSS) se chargent du reste.
Il faut quand même créer les feuilles de styles, ça ne se fait pas tout seul. Sans vous assommer de technique indigeste, voyons comment ce petit miracle est possible.
Ouiiii… comment on fait pour s’adapter à tous les formats ?
Le langage de mise en style CSS 3, offre un ensemble de techniques pour les designers afin d’accomplir ce petit miracle de la compatibilité pour tous les devices. Media Queries, Flexbox, CSS Grid programment les ajustements pour chaque écran. On ne rentrera pas dans les détails, le CSS est un langage difficile à maîtriser.
À titre d’exemple, avec les Media Queries, on peut définir que les smartphones vont jusqu’à 425 pixels de largeur et les tablettes de 426 à 767 pixels. De 768 à 1 389 pixels nous sommes dans la plage des ordis portables, puis les ordis de bureau prennent le relais à partir de 1 390 pixels. On appelle « points de rupture » ou breakpoints la taille ou on « switche » d’un format à l’autre. Enfin on attribue des règles spécifiques à chaque format (la taille des polices, celle des images, le positionnement des blocs les uns par rapport aux autres, etc).
Formidable ! Mais je dois vraiment penser à tous les formats ?
Quand on voit le nombre de publicités qui annoncent fièrement « …sur tous vos écrans », clairement oui. Les internautes veulent pouvoir retrouver la même information, présentée sensiblement de la même manière, quelle que soit l’interface qu’ils choisissent pour accéder à votre site.
Ils espèrent aussi que leur expérience utilisateur soit homogène, avec la même facilité d’accès à l’information dans tous les cas de figure. On ne peut pas espérer qu’un visiteur insatisfait de sa visite sur un site depuis son smartphone dans la journée, attende d’être rentré chez lui pour revenir sur la même plateforme via son ordinateur.
Ne pas être en mesure de répondre aux attentes des internautes immédiatement, c’est prendre le risque de les voir partir chez ses concurrents.
Soyez « responsive », votre taux de conversion en dépend !
* Smombie : contraction de smartphone et de zombie, désigne un piéton qui déambule sans lever les yeux de son smartphone sans prêter la moindre attention à son environnement.
