Le responsive web design

Il vous faut un site web responsive. Bien, d’accord, mais… qu’est-ce que c’est et pourquoi devriez-vous en avoir un? Un site web responsive est un site qui s’adapte à toutes les tailles d’écran, de l’ordinateur au smartphone en passant par les smart TV. De cette façon, votre site peut être consulté de manière optimale, quelle que soit l’appareil utilisé.

Sachant que moins de 50% de vos visiteurs¹ seront sur un ordinateur ou un laptop, et que ce chiffre ne va qu’en diminuant, l’importance du responsive saute aux yeux. En outre, les moteurs de recherche accordent désormais une importance toute particulière à cette capacité adaptative. C’est donc également nécessaire pour un bon référencement.

Comment ça marche?

Pour qu’un site web soit considéré comme responsive par les moteurs de recherche, il faut que le serveur qui l’héberge retourne systématiquement le même code (html, css et js), quel que soit l’appareil qui le demande. Techniquement, il faut appliquer quatre grands principes pour créer un site responsive:

Il faut définir la balise Meta viewport. Elle permet de déterminer la surface d’affichage (le viewport) de votre page web et son zoom. Par exemple, sur un ordinateur ou une tablette, le zoom sera possible, mais pas sur un smartphone.
Il faut utiliser une mise en page flexible. L’affichage de votre site se mesure en pixels, correspondant à ceux dont votre écran est équipé. En responsive, on utilisera plutôt des unités de mesure flexibles, comme des pourcents ou des (r)em, au lieu de pixels. De cette façon, on peut dire à un bloc de texte d’occuper 100% de la largeur du viewport plutôt que de faire 900px de large (ce qui ne fonctionne pas sur un écran de smartphone de 360px de large).
Dans le même ordre d’idée, les médias et les images seront flexibles également. Il est bien sûr possible de conserver le ratio de l’image, de façon à ce que sa hauteur s’adapte automatiquement à sa largeur et qu’elle ne soit pas déformée. En outre, on peut également spécifier plusieurs liens pour la même image, afin de ne pas télécharger une ressource démesurément grande pour un appareil mobile.
Enfin, il faut mettre en place des media queries. Ce sont les règles qui définissent le comportement de votre mise en page en fonction de « breakpoints » (points de rupture). Par exemple, en dessous de telle largeur/hauteur, le texte s’affiche en 14pt aligné au centre, au dessus en 18pt aligné à gauche, etc…

Impact sur le développement

Ces techniques compliquent évidemment la mise en oeuvre d’un site web. En effet, il faut prendre en compte plusieurs types d’affichage, plusieurs appareils et plusieurs navigateurs. S’assurer que tout est cohérent partout (cross-compatibility) est un travail conséquent. Toutefois, il existe des outils et des frameworks (cadre de travail) qui peuvent faciliter et accélérer ces processus.

Un studio web se doit de maîtriser ces problématiques efficacement, parce que le responsive n’est plus un gadget optionnel, mais bien une nécessité.

Les avantages d’un site reponsive

Le référencement naturel sur Google

Google ne souhaite pas indexer plusieurs sites (un pour les tablettes, un pour les smartphones, un pour les laptops, …) quand il peut se contenter d’un seul. Par conséquent, un site responsive aura un meilleur référencement naturel que son équivalent scindé par cible.

De plus, l’algorithme de Google prend en compte l’expérience utilisateur. Au travers de plusieurs métriques (vitesse de chargement, backlinks cohérents, lisibilité des textes, …), Google évalue votre UX. Bien évidemment, un design responsive propose une meilleure UX sur différents type d’appareils. De meilleurs résultats influeront votre positionnement positivement.

Des conversions plus efficaces

Si, en surfant sur votre smartphone, vous tombez sur un site non responsive, que faites-vous? Le texte est trop petit pour être lu, il faut zoomer en permanence, les boutons sont difficilement cliquables, et la navigation n’est pas adaptée. Vous partez voir ailleurs, évidemment. De plus, vous penserez probablement que ce site n’est pas sérieux, fiable, sécurisé ou aux normes récentes, puisqu’il n’est même pas capable d’être seulement adaptif…

Il n’y a aucun intérêt à avoir des visiteurs sur votre site si ceux-ci s’en vont immédiatement. C’est une bonne pratique que de fournir la meilleure expérience utilisateur possible pour vos acheteurs et clients potentiels. Cela diminue le taux de rebond, et favorisera la conversion et l’engagement. En proposant une interface responsive, vous vous assurez que tous vos visiteurs, quels que soit leur façon de surfer, retirent une expérience positive de leur visite sur votre site.

Facilité de gestion

Cela tombe un peu sous le sens. Vous n’avez qu’une seule version de votre site à gérer. Vous ne devez pas mettre à jour le site desktop, puis l’app mobile, et la version pour tablettes. Le tout est centralisé au sein d’une seule et unique administration, et c’est votre site qui se charge d’adapter votre contenu à l’appareil de votre visiteur.

En résumé

Un site web responsive s’adapte parfaitement aux habitudes de navigation de vos utilisateurs. Il est mieux référencé, convertit plus efficacement en offrant une meilleure UX et se gère facilement. Toutefois, il requiert plus de travail lors de la conception et de la phase de test.

1 Statistiques mise à jour concernant les principaux appareils utilisés pour naviguer sur le web: https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet