Qu’est-ce que le Responsive Design ?

Le Responsive Web Design consiste à développer un site Web qui s’affiche de manière optimale sur tous les appareils. Le terme Responsive Design est aussi vieux que le Web mobile et a commencé à être connu en 2013.

Avant l’avènement du Web mobile, le paysage des appareils compatibles avec Internet était très homogène : il y avait les ordinateurs de bureau ou les ordinateurs portables, qui étaient assez similaires en termes de supports d’entrée et de sortie. Les deux types d’appareils étaient dotés d’un clavier et d’une souris ou d’un trackpad, ainsi que d’un écran de 1 000 à 2 000 pixels de large.

À l’époque, nul besoin de déployer des efforts excessifs pour développer un site Web qui s’afficherait correctement sur la majorité des appareils utilisés. La solution la plus simple consistait à limiter la largeur des pages au plus petit dénominateur commun. Pour cela, on faisait en sorte d’avoir des pages centrées ou alignées à gauche, avec une largeur de 800 pixels. Sur les écrans plus grands, cela révélait un peu plus d’espace blanc que nécessaire, mais les pages étaient facilement lisibles sur tous les appareils.

Avec l’avènement des appareils mobiles, la situation a changé et on a assisté à une profonde diversification des supports. Les écrans de smartphones et tablettes diffèrent sur plusieurs points : la taille des pixels joue un rôle important, ainsi que la résolution (« pixels par pouce » ou ppi) apparue les écrans Retina. De plus, ces appareils ne se commandent pas avec une souris, mais avec le doigt. Aujourd’hui, on retrouve également les grands écrans à haute résolution, de sorte qu’un site Web moderne doit pouvoir s’adapter à des largeurs d’écran allant de 320 pixels à plus de 4 000 pixels.

Un Responsive Web Design s’adapte à l’espace disponible sur l’écran. On parle également de « screen real estate » (« espace disponible à l’écran » en français). Le site Web doit être agréable à regarder sur tous les appareils et offrir une expérience utilisateur (UX) optimale.

Le Responsive Web Design englobe une variété de techniques et d’approches qui permettent de développer un site Web entièrement réactif. Nous retrouvons, par exemple :

• Des éléments HTML5 comme picture et des attributs comme srcset et sizes
• Des requêtes médias CSS
• Des unités CSS
• L’utilisation de plusieurs assets dans une même ressource
• L’approche « mobile-first »

Le développement d’un Responsive Web Design offre plusieurs avantages. L’expérience utilisateur est au premier plan. En principe, vous n’avez pas besoin du Responsive Design pour une bonne expérience utilisateur. Mais cela nécessite soit un site mobile spécifique, soit l’utilisation de JavaScript. Cette approche est donc beaucoup plus complexe que la solution offerte par le Responsive Web Design basée sur les CSS et entraîne des efforts supplémentaires pour la maintenance des différentes versions du site.

Le design d’un site Web est un facteur décisif : il influence la façon dont un visiteur perçoit les informations présentées sur un site. Un bon design reflète l’identité de la personne ou organisme qui se cache derrière le site Web et contribue à lier le visiteur à la marque. Il doit se sentir à l’aise sur le site et vivre une expérience positive. Voyons comment le Responsive Web Design contribue à optimiser l’expérience utilisateur à l’aide de deux exemples :

• Imaginons qu’un titre remplisse tout l’écran sur un smartphone. En revanche, le titre est à peine visible sur la version de bureau avec la même taille de police. Sur un ordinateur de bureau, le titre doit être plus grand pour attirer l’attention du visiteur.
• Autre exemple : imaginons un blog où une barre latérale est affichée à droite de l’article. La barre latérale contient des liens vers d’autres articles avec de petites vignettes. Dans la version de bureau, la barre latérale permet de limiter la largeur de l’article, contribuant ainsi à la lisibilité. Toutefois, sur un appareil mobile, la barre latérale couvrirait presque la moitié de l’écran. La mise en page doit être modifiée sur les appareils mobiles afin que le contenu de la barre latérale apparaisse sous l’article.

En principe, un site Web non responsive affichera sur le petit écran d’un appareil mobile la même chose que sur un ordinateur de bureau, mais en plus petit. Cela oblige l’utilisateur à zoomer sur des sections individuelles de la page. Il est donc préférable de proposer une version optimisée. Voici quelques exemples :

• Sur un site Web, un bouton est cliqué avec une souris sur la version de bureau et avec l’index sur la version mobile. Par conséquent, le bouton doit être plus grand et éloigné des autres éléments pour la version mobile.
• Imaginez un formulaire sur une page. Normalement, une marge intérieure (padding) est créée via CSS afin que le texte qu’il contient soit facile à lire et ne touche pas les bords du formulaire. Un padding de 20 pixels à gauche et à droite est normal et parfait pour les grands écrans. Mais sur un appareil mobile dont la largeur d’écran n’est que de 320 pixels, on perd 40 pixels sur 320, soit un huitième. Si le formulaire comporte également une marge extérieure (margin), disons de 20 pixels supplémentaires par page, 25 % de l’espace disponible est déjà perdu sur le dispositif mobile. Pour éviter cela, il est nécessaire de réduire les marges sur la version mobile.

Une majorité d’utilisateurs accède aujourd’hui à des contenus sur Internet via des appareils mobiles. Le fait de ne pas avoir de Responsive Web Design présente de sérieux inconvénients comme :

• De mauvais taux de conversion et des taux de rebond élevés causés par un design et une expérience utilisateur inadaptés
• Un mauvais classement dans les moteurs de recherche, car Google privilégie les sites Responsive Design
• De mauvaises performances à cause du chargement de ressources non optimisées, en particulier sur les appareils mobiles

Le Responsive Design comprend différentes approches et technologies. En général, il existe plusieurs solutions selon les contextes. Les choses ne cessent d’évoluer.

La création de mises en page complexes sur les sites Web est une science en soi depuis les débuts du World Wide Web. Le HTML comprend différents types d’éléments qui se comportent différemment en fonction de leur disposition. Il y a notamment les éléments de type block, inline et inline-block. Les éléments de niveau block occupent toute la largeur disponible et sont empilés les uns sur les autres. Les éléments de niveau inline ne prennent que la largeur requise par leur contenu et se placent côte à côte. Voici un aperçu des types d’éléments les plus importants pour le Responsive Design :

Lors de la mise en page, il faut généralement placer les éléments de block les uns à côté des autres. Pour cela, il existe plusieurs méthodes. Avant l’avènement du CSS, les mises en page basées sur des tableaux étaient la norme. Avec le CSS, le positionnement flottant s’y est ajouté. Aujourd’hui, CSS Flexbox est utilisé pour les mises en page simples à base de lignes ou de colonnes, et le layout de grille CSS pour les mises en page complexes. Dans tous les cas, des dimensions CSS relatives sont utilisées pour faire varier le nombre d’éléments affichés côte à côte.

À titre d’exemple : imaginez une page avec quatre éléments de prévisualisation pour les articles de blog. Ils contiennent chacun une vignette, un titre, une accroche et un bouton « En savoir plus ». Flexbox facilite la création de la mise en page responsive :

• Affichage sur grand écran : tous les éléments de prévisualisation les uns à côté des autres en ligne. Chacun des éléments occupe 25 % de l’espace disponible.
• Affichage sur écran moyen : deux éléments de prévisualisation l’un à côté de l’autre sur deux lignes. Chacun des éléments occupe 50 % de l’espace disponible.
• Affichage sur petit écran : les quatre éléments de prévisualisation se trouvent les uns en dessous des autres sur une même ligne. Chacun des éléments occupe 100 % de l’espace disponible.

Voici un exemple d’implémentation utilisant des classes du cadre CSS responsive Tachyons. Nous définissons les classes ‘w-100 w-50-m w-25-l’ pour chaque conteneur de prévisualisation. Les quatre conteneurs de prévisualisation sont placés dans un conteneur marqué ‘flex flex-wrap’ :

Il est parfois judicieux de n’afficher qu’un élément sur une certaine taille d’écran. Voyons un exemple pratique : les données tabulaires sont affichées sous la forme d’un tableau en HTML à l’aide de la balise <table>. Cependant, en fonction de la taille du tableau, il peut être difficile d’adapter l’affichage à des écrans très petits. Il suffit alors de faire preuve d’ingéniosité en signalant à l’utilisateur de basculer son appareil à l’horizontal afin d’avoir suffisamment de place pour afficher le tableau. Toutefois, ce signal ne doit être affiché que sur un appareil doté d’un petit écran et avec une orientation portrait.

Le masquage d’un élément peut être facilement réalisé avec la propriété CSS display: none;. Avec une requête médias CSS spéciale, nous demandons non seulement la largeur de l’écran, mais aussi l’orientation de l’appareil. Le signal ne doit être affiché que si la largeur de l’écran en orientation portrait est inférieure à 640 pixels. Sinon, nous cachons l’élément :

En combinaison avec le code HTML suivant, la fonction est complète :

Pour une expérience utilisateur optimale, la taille de la police des éléments textuels d’un site Web doit être adaptée à l’espace d’écran disponible. Pour ce faire, on utilise plusieurs typographies dans le Responsive Web Design.

Comme mesure de base, on utilise l’unité CSS rem (« root em ») pour lier la taille de la police d’un élément proportionnellement à l’élément HTML ‘root’. Ensuite, il vous suffit d’ajuster la taille de la police de l’élément ‘root’ par le biais des points de rupture du style CSS afin de mettre à l’échelle toutes les polices de manière cohérente.

Prenons un exemple. Ici, suivant l’approche « mobile first », nous avons d’abord défini les tailles de police pour les petits écrans :

Ensuite, nous ajustons la taille de la police de l’élément HTML pour les écrans plus grands. Comme la taille de la police des rubriques H1 est définie par rem, elle s’adapte automatiquement :

Une autre approche courante consiste à utiliser les unités CSS vh et vw pour un ajustement fluide de la taille de la police à la hauteur ou à la largeur de l’écran. En principe, cette approche fonctionne sans points de rupture, mais la police peut alors être affichée en minuscule sur de petits écrans. Dans ce cas, on peut utiliser des points de rupture ponctuels ou la fonction CSS calc() pour définir une taille minimale.

Pour optimiser les titres plein écran sur les appareils à petit écran, on utilise une approche sans CSS. Les titres doivent attirer l’attention du spectateur. Il est ainsi plus facile pour l’utilisateur de saisir rapidement le contenu d’une page. Cependant, les mots peuvent devenir très longs, ce qui peut entraîner des problèmes d’affichage. C’est là que les entités HTML « Espace insécable » (&nbsp;) et "Trait d’union conditionnel" (&shy;) s’avèrent utiles. Elles permettent de spécifier précisément où les mots d’une rubrique peuvent être séparés.

Outre la mise en page et la typographie, l’optimisation de l’affichage des images est au cœur du Responsive Design. De toute évidence, il n’est pas très logique de charger une image dont les bords ont une longueur de 1 920 pixels sur un téléphone portable doté d’un écran large de 400 pixels. D’une part, l’image, beaucoup trop grande, doit ensuite être réduite dans le navigateur, ce qui nécessite des calculs intensifs. D’autre part, la taille du fichier d’une image augmente proportionnellement avec la taille du côté le plus long.

Une image de 1 920 x 1 080 pixels nécessite environ quatre fois plus de mémoire qu’une image de 960 x 540 pixels. Le téléchargement d’une telle image sur un appareil mobile prendra donc plus de temps. L’ensemble de ces facteurs a un effet négatif sur la performance et la fonctionnalité d’un site Web si les images ne sont pas optimisées en fonction des besoins.

Avec l’introduction de HTML5, deux nouveaux attributs ont été introduits pour la balise . Les attributs srcset et sizes spécifient plusieurs fichiers graphiques pour une image ; ils sont également appelés « assets ». Chaque fichier individuel est lié à une demande de requête média CSS. Cela permet au navigateur de charger, à partir de la liste des assets disponibles, un asset optimal pour l’appareil en question.

Voici un exemple rapide. Le code HTML suivant définit une image pour laquelle il existe deux attributs définis par srcset : un avec une longueur de 480 pixels et un avec une longueur de 800 pixels. Il précise également, via sizes, que l’image de 480 pixels doit être utilisée jusqu’à une largeur d’écran de 600 pixels. Sinon, le navigateur doit charger l’image avec 800 pixels :

Auparavant, les écrans étaient tous plus larges que hauts et les images en format paysage. De nos jours, les écrans de téléphones portables sont en format portrait. Une image en format paysage sur un appareil qui les affiche en format portrait apparait toute petite. Pour un meilleur résultat, il convient d’utiliser une image carrée ou un portrait recadré sur mesure. Le choix des différents recadrages des images est appelé « direction artistique ». Elle peut être mise en œuvre avec l’élément HTML5 <picture>. L’élément <picture> permet la définition complexe de plusieurs images équivalentes pour différents cas d’utilisation.

Prenons un exemple. Le code HTML ci-dessous définit un élément <image> qui spécifie différents assets pour le format paysage et portrait. Dans les deux cas, il existe plusieurs versions optimisées pour différentes tailles d’écran :

Traditionnellement, la navigation est affichée en haut de la page. Il s’agit souvent d’une liste horizontale d’éléments de menu, avec des sous-menus qui s’affichent lorsque vous les survolez. Cette mise en page n’est pas possible sur les appareils mobiles : il n’y a pas assez de place pour le menu sur les petits écrans et aucun pointeur de souris.

Il existe différentes approches pour afficher les menus de navigation sur les appareils mobiles. Ils sont tous peu encombrants et ne nécessitent pas de souris. L’activation de la navigation est souvent accompagnée d’une animation pour attirer l’attention de l’utilisateur. Parmi les approches les plus utilisées dans la navigation responsive, on peut citer :

• Le menu « hamburger » ou menu à tiroir (trois lignes horizontales) : l’icône sert d’élément de contrôle central pour l’activation du menu
• Le design « Off Canvas » : le menu apparait à l’écran que lorsque l’utilisateur le décide via un volet caché.