D’ailleurs, si vous opérez dans le secteur du e-commerce ou du marketing digital, vous avez forcément aperçu ce terme sur un site web spécialisé ou entendu des développeurs en parler au détour d’une conversation avec leurs clients.
Force est de constater qu’en 2022, le responsive design est sur toutes les lèvres, et nous allons tenter de comprendre pourquoi dans la suite de cet article.
Voici cependant quelques éléments de réponse pour commencer.
Depuis quelques années, le trafic web mobile a largement dépassé celui des desktops/ordinateurs de bureau, à tel point qu’il représente la majorité du trafic observé sur les sites web du monde entier.
De plus, on considère qu’aujourd’hui, la grande majorité des requêtes sur les moteurs de recherche sont effectuées à partir d’appareils mobiles.
Enfin, le smartphone est aussi devenu le canal publicitaire privilégié par les entreprises et les spécialistes du marketing.
C’est d’ailleurs l’un des rares canaux à avoir tiré son épingle du jeu dans le domaine de la publicité en ligne lors de la pandémie de COVID-19.
C’est un fait : que vous comptiez sur le trafic organique avec Google ou sur le Paid Media avec les Facebook Ads pour attirer des leads sur votre plateforme de vente en ligne, la grande majorité de votre trafic proviendra des utilisateurs mobiles.
Il n’est donc plus possible en 2022 de concevoir des sites internet adaptés à un seul appareil.
Imaginez-vous, en tant que propriétaire de site e-commerce, proposer à vos leads et clients des pages web conçues pour un ordinateur de bureau ou un laptop, alors que plus de la moitié d’entre eux utilisent un appareil mobile pour naviguer sur internet ?
Leur apparence sur l’écran mobile serait de mauvaise qualité et l’expérience utilisateur des internautes s’en trouverait sans aucun doute altérée.
Dans le cas de vos pages d’atterrissage, cela peut être désastreux pour vos conversions.
Si elles ne sont pas optimisées pour les appareils mobiles, tous vos efforts de marketing sont vains et vous pouvez dire adieu à un quelconque ROAS (retour sur investissement publicitaire).
Avant d’entrer dans les détails du responsive design, commençons par définir le terme.
I- Définition
C’est le concepteur web américain Ethan Marcotte qui a inventé le terme de « Responsive Web Design » — souvent abrégé en « RWD » — en 2011 pour décrire une nouvelle technique de conception web.
Ses livres principaux livres publiés à ce sujet — « Responsive web Design » et « Responsive Design : Patterns and Principles » — ont eu un énorme impact dans le monde de la conception web, mais pas seulement, puisque toutes les entreprises qui vendent en ligne peuvent tirer parti de cette innovation pour proposer à leur audience des pages web au design et à l’UX impeccables, à la fois sur mobile, tablette et ordinateur de bureau, et tous types d’écrans connectés.
Mais alors, de quoi s’agit-il ?
le RWD/Responsive web Design, appelé « Responsive Design » ou parfois même « Design Responsive » en français, s’apparente à une technique de conception d’interface digitale qui permet à l’affichage d’une page d’un site internet de s’adapter de façon automatique à la taille de l’écran du terminal qui le prend en charge.
C’est une technologie légèrement différente de l’Adaptative Design, dont nous reparlerons plus loin dans cet article, mais les deux ont la même ambition : améliorer l’ergonomie des sites web sur n’importe quel type d’appareil.
C’est pour cette raison que l’on parle même de web design « auto-adaptatif », pour illustrer de façon parlante les capacités de cette technologie à s’afficher impeccablement à la fois sur l’écran d’une tablette, d’un ordinateur de bureau ou d’un appareil mobile, afin de rendre la navigation et la lecture plus faciles pour les internautes, et ce, quel que soit le type de terminal utilisé.
Ainsi, grâce au responsive web design, toutes les pages web que vous ouvrez sur votre smartphone, tablette, ou même sur votre télévision connectée apparaissent dans leur totalité, de la même façon qu’elles se dévoileraient sur votre PC, sans que vous ayez besoin de zoomer ou de faire défiler la page pour en profiter pleinement.
Comment cela fonctionne-t-il ?
Nous y reviendrons en détail plus tard, mais en gros, c’est le code du site internet qui est conçu pour adapter sa mise en page en fonction de chaque type d’écran sur lequel le contenu des pages apparaît. Tout s’effectue de manière automatique, du redimensionnement des blocs de contenus textuels et graphiques jusqu’au réagencement de chacun des éléments qui constituent la page.
Cette évolution vient principalement en réponse à la tendance actuelle qui voit les internautes utiliser de plus en plus leur téléphone mobile pour naviguer sur internet, d’où l’expression « Mobile first », qui est régulièrement associée à la notion de responsive web design, et qui été rendue possible grâce aux Media Queries de CSS3, dont nous reparlerons plus tard.
Le secret de cette technologie « auto-adaptative » repose sur un code HTML identique pour les différents types de terminaux, un système de grilles fluides, des graphiques dotés de caractéristiques et des résolutions adaptatives, et pour finir, les CSS3 Media Queries chargés de gérer les feuilles de style.
Tout ce jargon parait bien compliqué si vous n’avez aucune notion de codage, mais nous aurons l’occasion d’expliquer toutes ces notions dans la partie III de cet article, avant de voir concrètement comment se passe la création d’un site web responsive design.
Mais pour l’instant, voyons la différence entre deux types de conception web souvent confondus : le responsive design et l’adaptive design.
II- Responsive Design Vs. Adaptive Design
Le design responsive et le design dit « adaptive » figurent parmi les méthodes de conception de site web les plus courantes et les plus employées par les développeurs web aujourd’hui, et elles peuvent être facilement confondues.
Or, elles sont radicalement différentes dans leur principe même.
C’est pour cette raison que nous allons brièvement expliquer la différence entre ces deux techniques de conception.
Nous avons déjà évoqué le cas du responsive design, une technique de conception qui consiste à créer des mises en page web uniques dont le contenu et les dimensions s’adaptent en fonction de la taille du navigateur.
Sur un site web responsive design, vos contenus peuvent ainsi s’organiser et s’agencer de manière dynamique et automatique, en fonction de l’espace disponible dans la fenêtre du navigateur, en vue d’afficher une interface optimisée pour n’importe quel type d’appareil.
Dans ce modèle, c’est la largeur du navigateur qui influe sur l’interface graphique du site.
L’adaptive design vise le même résultat que le responsive design, mais il emprunte un cheminement différent.
Le design adaptatif consiste ainsi à concevoir des mises en page adaptées à chaque type d’écran, en utilisant plusieurs mises en page fixes de tailles différentes, et en laissant le soin au navigateur de détecter la taille d’écran du support de l’utilisateur afin de sélectionner la mise en page la plus appropriée pour la taille de l’écran.
Vous l’aurez compris, l’adaptive design permet de concevoir des interfaces web sur mesure qui s’affiche de façon optimale sur chaque type d’appareil, et il n’est donc pas nécessaire que le contenu des pages s’adapte automatiquement en fonction des différents appareils utilisés.
Cette solution fonctionne donc sur la base de plusieurs mises en page fixes, et c’est le site qui choisit automatiquement la mise en page la plus adaptée parmi celles qui sont disponibles, en fonction de la taille d’écran de l’appareil utilisé, qu’il s’agisse d’une tablette, d’un téléphone mobile ou d’un ordinateur de bureaux.
C’est donc une philosophie de conception entièrement différente : on crée en amont plusieurs mises en pages pouvant répondre aux caractéristiques de tailles d’écrans différentes, pour assurer un niveau de performance d’affichage optimal dans tous les cas.
C’est là tout le problème de l’adaptive design ; il faut développer autant de versions qu’il existe de résolutions d’écran.
On en compte 6, à ce jour : 320 pixels, 480 pixels, 760 pixels, 960 pixels, 1200 pixels, 1600 pixels
L’adaptive design est donc une solution de conception plus coûteuse et plus difficile à mettre en place.
Elle vous vous oblige à développer plusieurs versions d’une même page pour être sûr d’offrir une interface de qualité, quelle que soit la taille de l’écran utilisée par les internautes.
Un tel mode de conception demande donc beaucoup plus de travail et coûte beaucoup plus cher que le responsive design.
Cette dernière solution permet aux propriétaires de sites web de développer une mise en page unique capable de s’adapter automatiquement à tous les types de supports.
Il n’est donc pas nécessaire de créer une version spéciale pour tablette, une version mobile, etc. pour votre site internet.
III- Les éléments clés à connaitre pour mieux comprendre le responsive design
Sans entrer dans les détails, nous allons maintenant passer en revue les quelques notions fondamentales sur lesquelles repose tout le système de conception RWD/responsive web design.
Le CSS et le HTML
Ce sont ces deux langages de programmation, le CSS (Cascading Style Sheets) et le HTLM (HyperText Markup Language) qui forment la base du responsive web design. Ils ont pour tâche de contrôler les éléments de contenus et de présentation des pages de votre site internet au sein d’un navigateur web donné.
Le HTML est en charge du contrôle de la structure et du contenu d’une page web.
Si vous souhaitez par exemple ajouter une image sur l’une de vos pages web, il faut utiliser un code HTML.
Ce langage sert aussi à contrôler ce qu’on appelle les « attributs primaires » en matière de conception, comme la hauteur et la largeur de page.
Le CSS est utilisé quant à lui pour modifier le design et la mise en page des éléments que vous incluez dans une page web avec du HTML. Le code CSS est en général inclu dans une section de type <style> à l’intérieur d’un document HTML, ou dans un fichier de feuille de style séparé.
Le CSS vous permet aussi de contrôler des éléments de design autres que la largeur, la hauteur et la couleur.
Couplé à une technique qu’on nomme « media query », le CSS donne naissance à un design web « responsive ».
À l’heure actuelle, la majorité des développeurs utilisent le CSS3, la dernière version du CSS.
La Media Query
La Media Query fait partie des spécifications CSS3 incontournables dans la conception d’un site web responsive design, qui permet de modifier l’affichage d’une page web en fonction de la hauteur et la largeur de l’écran utilisé pour la navigation.
La Media Query fonctionne de la même manière qu’une clause « if » dans certains langages de programmation, c’est-à-dire qu’il vérifie si la fenêtre de visualisation d’un écran est suffisamment grande ou trop large avant d’exécuter le code approprié.
Les points de rupture responsives
Pour utiliser des spécifications de type media query, il faut impérativement définir ce qu’on appelle des « points de rupture responsive » (breakpoints) dans votre feuille de style.
Un point de rupture correspond à la largeur de l’écran dans laquelle vous utilisez un media query pour mettre en place de nouveaux styles CSS.
Pour mettre en place un point de rupture, il suffit d’écrire une media query pour les tailles supérieures et une media query pour les tailles inférieures.
Énormément de développeurs utilisent aujourd’hui le framework de frontend gratuit Bootstrap, et ses points de rupture spécifiques qui utilisent les media queries pour cibler les téléphones en mode paysage (576px), les tablettes (768px), les ordinateurs portables (992px) et les écrans de bureau extra larges (1200px).
La vitesse de chargement
La vitesse de chargement des pages web est une priorité pour tout site internet à vocation commerciale.
Les pages qui prennent plus de 2 secondes à se charger présentent un taux de rebond de quasiment 10 %, et au-delà de 5 secondes, ce taux de rebond monte à près de 40 %.
Rappelons que le taux de rebond (bounce rate, en anglais) est un indicateur qui indique le pourcentage de visiteurs qui accèdent à une page web et la quittent presque immédiatement, la plupart du temps parce que le temps de chargement est trop long.
C’est pour cette raison que pour la vitesse de chargement doit être une de vos priorités.
Pour améliorer la vitesse de chargement de vos pages, il existe plusieurs solutions, comme la mise en cache, la minification (réduire la taille du code), l’optimisation de vos images, l’utilisation d’une mise en page CSS plus efficace, etc.
Une mise en page fluide
Le concept de mise en page fluide repose sur des valeurs dynamiques qui prennent en compte la largeur de la fenêtre de visualisation, et c’est un facteur essentiel dans la conception responsive design.
Il permet de diminuer ou d’augmenter les différentes tailles des éléments du conteneur en fonction de la taille de l’écran et de manière dynamique.
La mise en page Flexbox
Flexbox est un module CSS qui facilite grandement les tâches de mise en page. C’est une solution de mise en page qui fonctionne à partir d’un axe principal, et qui permet de disposer les différents éléments de votre page web en ligne ou en colonne. Ces éléments vont s’élargir ou se rétracter pour occuper l’espace disponible.
Flexbox est donc un moyen efficace de disposer plusieurs éléments, même lorsque la taille du conteneur est inconnue.
Les images responsives
La mise en page des images responsives utilise une unité dynamique pour contrôler la largeur ou la hauteur.
Voici un exemple de codage des plus élémentaires qui permettra à votre image de prendre toujours 100 % de la largeur de son parent :
img {
width: 100%;
}
L’unité % correspond à un pourcentage unique de la largeur (ou de la hauteur) de la fenêtre de visualisation et permet de s’assurer que l’image reste proportionnelle à la taille de l’écran.
Cette technique pose tout de même un problème : les utilisateurs doivent télécharger l’image en taille réelle, même sur leur téléphone mobile.
Grâce à l’attribut HTML « srcset » intégré dans vos balises img (un attribut HTML qui permet de faciliter l’intégration des images dans les sites responsive design), il vous sera possible de spécifier différentes tailles d’image.
C’est d’ailleurs cette fonctionnalité que le CMS WordPress utilise automatiquement pour les images que vous incorporez à vos articles de blog ou dans vos pages web.
IV- Comment rendre votre site web responsive en 5 étapes
Maintenant que vous possédez les bases en responsive design, voyons concrètement comment procéder pour appliquer ces principes à votre site web :
1- Définissez vos plages de media query (points de rupture responsives)
Vous devez déterminer vos plages de media query selon vos besoins uniques en matière de votre design.
Si vous souhaitez par exemple suivre les normes Bootstrap que nous avons évoquées plus haut, vous devriez utiliser les media queries suivantes :
- 576px pour les téléphones portables (portrait)
- 768px pour les tablettes
- 992px pour les ordinateurs portables
- 1200px pour les écrans de grande taille
2- Définissez la taille des éléments de mise en page via la création d’une grille CSS ou des pourcentages
Ensuite, il est essentiel de définir différentes tailles concernant les différents éléments de mise en page, en fonction de la media query ou du point de rupture de l’écran.
Le nombre de conteneurs de mise en page dont vous disposez dépendra du design, mais la plupart des sites web se concentrent sur les éléments suivants : container (conteneur), header (haut de page), content (contenu), sidebar (barre ou colonne latérale) et footer (pied de page).
Si vous utilisez une approche mobile first, vous pouvez styliser les principaux éléments de votre mise en page de cette manière :
#wrapper {width:95%; margin: 0 auto ;}
#header {width:100%;}
#content {width:100%;}
#sidebar {width:100%;}
#footer {width:100%;}
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
#wrapper {width:90%; margin: 0 auto;}
#content {width:70%; float:left;}
#sidebar {width:30%; float:right;}
Et ainsi de suite pour les écrans plus grands.
Si vous adoptez une approche basée sur le pourcentage, c’est l’attribut « float » qui va déterminer sur quel côté de l’écran un élément doit apparaître.
3- Ajoutez des images responsives
Pour être sûr d’avoir des images qui ne sont pas corrompues ou endommagées sur vos pages web, il suffit d’utiliser une valeur dynamique pour chaque image que vous souhaitez afficher, ce que nous avons déjà évoqué.
Cependant, assurez-vous de toujours inclure un « srcset » avec les différentes tailles des images que vous ajoutez sur vos pages web.
C’est une tâche qui peut s’avérer fastidieuse si elle est effectuée manuellement, mais heureusement, des CMS comme WordPress le font de manière automatique.
4- N’oubliez pas d’adopter une typographie responsive pour vos textes web
Le contenu textuel est souvent considéré comme le parent pauvre de la conception de sites web responsive, qui se concentre principalement sur la mise en page de blocs et d’éléments.
Si vous souhaitez obtenir un site internet 100 % responsive web design, il faut nécessairement prendre en compte cet aspect textuel et ajuster la taille de vos polices de caractères pour qu’elles correspondent aux différentes tailles d’écrans.
Pour y parvenir, ce n’est pas très compliqué. Déterminez une valeur statique pour la taille de la police, par exemple 14 px, et adaptez la pour chaque media query.
5- Vérifiez la qualité et les performances de votre responsive design
Pour finir, il faut tester in situ la qualité de votre responsive design, notamment sur le type d’appareil qui compte le plus aujourd’hui : le mobile.
Google offre un test d’optimisation gratuit ici.
Vous n’avez qu’à entrer l’URL de votre site web et cliquer sur le bouton « tester l’URL » pour obtenir les résultats.
La recherche effectuée par Google peut prendre un peu de temps, mais cela n’a aucun rapport avec la vitesse de chargement de votre site internet.
Lors de cette phase de test, posez-vous les questions suivantes :
- votre contenu s’intègre-t-il bien dans les éléments de mise en page et dans les conteneurs des différents écrans ?
- La mise en page s’adapte-t-elle au nombre correct de colonnes ?
- La taille des caractères est-elle adaptée à chaque écran ?
Ensuite, grâce aux outils de développement Chrome (chrome devtools), vous aurez l’occasion de tester votre site internet sur plusieurs tailles d’écran différentes.
Appuyez sur CTRL + Shift + I pour ouvrir la vue du périphérique concerné, et ensuite, sélectionnez l’appareil de votre choix (mobile, tablette, ordinateur portable, etc.) afin de vérifier si votre design peut vraiment être qualifié de « reponsive ».
V- Les raisons qui font que le responsive design est crucial pour votre business en ligne
Voyons enfin les 7 principales raisons qui devraient vous inciter à adopter le responsive web design pour la conception de votre prochain site internet :
1- Le RWD est rentable
Comme nous l’avons déjà souligné, une conception responsive web design unique s’adapte à tous les formats, il n’y a donc pas lieu de développer plusieurs versions pour répondre aux exigences des différentes tailles d’écran.
Mais, ce qui est intéressant, ensuite, c’est qu’un site RWD va vous faire économiser de l’argent à long terme, par exemple lors des mises à jour ou lorsqu’un nouvelle taille d’écran apparaît sur le marché.
2- Le RWD améliore l’expérience utilisateur
Les utilisateurs s’attendent aujourd’hui à vivre une expérience en ligne cohérente et fluide sur tous les canaux. Dans le domaine du e-commerce, par exemple, un internaute peut très bien commencer son parcours d’achat sur mobile et continuer sur un ordinateur de bureau ou sa tablette à la maison.
Or, le RWD offre aux utilisateurs une expérience cohérente à chaque point de contact.
De plus, le responsive design garantit que vos pages web apparaissent de manière optimale, et qu’il n’est pas nécessaire de zoomer ou de faire défiler la page à chaque instant.
3- Le RWD est bon pour votre référencement
Le responsive web design est à la fois intéressant pour votre référencement naturel, qui améliore votre visibilité sur les moteurs de recherche) et il vous prémunit également contre les risques que courent les sites internet qui ont des sites web mobiles distincts, comme le contenu dupliqué/en double, et la vitesse de chargement.
En utilisant une version de site web mobile, vous prenez le risque d’être sanctionné par une pénalité Google, car les bots du moteur de recherche vont avoir du mal à identifier quelle version de votre site internet doit être indexée ou suivie pour les liens.
Une seule version de votre site web réduit ce type de risque et permet à vos équipes de concentrer tous leurs efforts de référencement sur un seul site.
Ensuite, il y a la vitesse de chargement. Google utilise plus de 200 facteurs de classement dans son algorithme, et la vitesse de chargement en fait partie. Les sites internet responsive design se chargent généralement plus rapidement que les sites spécifiquement conçus pour les appareils mobiles.
4- Le RWD permet d’augmenter votre reach/portée pour les utilisateurs de tablettes et de téléphones mobiles
Lorsqu’un site web est conçu pour répondre aux utilisateurs mobiles, cela se traduit par des expériences client plus durables. On considère que trois quarts des personnes qui visitent un site adapté au format mobile sont plus susceptibles de revenir sur ce site, et que près de 70 % sont plus susceptibles d’effectuer un achat.
À l’inverse, 60 % des utilisateurs qui ne trouvent pas ce qu’ils recherchent sur un site mobile n’y reviendront probablement jamais.
5- Le RWD facilite la maintenance et le développement
Comme indiqué précédemment, le développement d’une seule version d’un site internet sera toujours plus rapide que le développement de plusieurs versions du même site, même avec la tâche supplémentaire de s’assurer que la conception RWD est correctement mise en œuvre.
C’est un facteur important pour les équipes de développement et de marketing, dont le travail consiste à s’assurer que chaque version d’un site web fonctionne efficacement et contient le contenu et les mises à jour les plus récents.
Le choix de développer un site internet responsive simplifie le travail de maintenance, les mises à jour et les améliorations au fil du temps, et vos équipes disposent en conséquence de plus de temps pour les activités génératrices de valeur, telles que le développement de produits, les tests A/B ou le marketing de contenu.
Enfin, le choix d’utiliser une conception web responsive assure que votre site internet est armé contre les nouvelles options de taille d’écran qui peuvent émerger à mesure que les technologies évoluent.
6- Le RWD vous offre de meilleures capacités d’analytics pour mesurer vos performances
Avec du design adaptative, vos équipes informatique et marketing doivent suivre, rassembler et analyser des données sur deux ou plusieurs propriétés web différentes, ce qui rend la tâche beaucoup plus difficile.
Grâce à un seul site web responsive, il est plus simple de mettre en place toutes vos actions analytics et d’obtenir des informations significatives.
7- Le RWD vous offre des taux de conversion plus élevés
On estime qu’en 2022, 65 % du trafic de vente au détail en ligne provient du mobile, mais les taux de conversion sur mobile sont encore bien inférieurs à ceux que l’on observe sur les ordinateurs de bureau.
De nombreux facteurs influencent les taux de conversion sur mobile, notamment la difficulté de navigation (20 %), l’impossibilité de voir les détails du produit (22 %), ou encore la difficulté de navigation (19 %).
Autrement dit, de nombreux sites web ont encore des difficultés à obtenir des taux de conversion satisfaisant, car ils ne sont pas dotés de la technologie responsive design.
À l’inverse, une étude récente indique que le RWD peut entraîner une augmentation de plus de 10 % des taux de conversion d’une année sur l’autre.
Laissez vos commentaires