1.
Qu'est-ce que le Responsive Design ?
Le responsive design est une approche de la conception web dans laquelle l'interface s'adapte à la
disposition de l'appareil, ce qui facilite l'utilisation, la navigation et la recherche d'informations.
La réactivité est possible grâce aux media queries, qui permettent à la conception de s'adapter
automatiquement à l'espace du navigateur pour garantir la cohérence du contenu sur tous les
appareils, et aux éléments de conception dimensionnés en unités relatives (%).
La conception réactive présente des avantages considérables, et la conception Web doit par défaut
prendre en charge le changement d'appareil.
Avec le responsive design, vous pouvez :
Atteindre un public plus large : de nos jours, de plus en plus d'utilisateurs accèdent au web via des
appareils mobiles.
Économiser du temps et des efforts de développement puisque les concepteurs et les développeurs
ne se concentrent que sur une seule version du design.
Améliorer le référencement, car les moteurs de recherche récompensent les sites Web adaptés aux
mobiles par de meilleures positions de recherche.
Assurez la cohérence de la marque et du design sur tous les appareils, car il n'y a aucune chance de
devoir modifier les directives pour les adapter à différentes boîtes de design.
Afficher la transcription de la vidéo
Pourquoi le design réactif est si populaire
Au début des années 2010, les concepteurs ont dû faire face à un phénomène historique. De plus en
plus d'utilisateurs commençaient à accéder à des contenus Web sur des appareils portables plutôt
que sur des ordinateurs de bureau. Il existait deux grandes approches de conception pour gérer la
conception sur les différents appareils :
Les concepteurs peuvent créer plusieurs versions d'un design optimisé pour différents appareils et
leur donner des dimensions fixes (approche de conception adaptative). Ils pouvaient travailler sur
une conception unique et flexible qui s'étirerait ou rétrécirait pour s'adapter à l'écran (approche de
conception réactive).
Les organisations et les concepteurs ont eu du mal à ignorer les avantages de la conception réactive.
Plutôt que de travailler avec des unités absolues (par exemple, des pixels) sur des versions distinctes,
les concepteurs se sont concentrés sur un seul design et l'ont laissé couler comme un liquide pour
remplir tous les "conteneurs"."
Comprendre le langage de la conception réactive
La conception réactive repose sur trois principes fondamentaux :
Système de grille fluide
Les systèmes de grille sont des outils utilisés par les concepteurs pour construire, concevoir,
organiser les informations et créer des expériences utilisateur cohérentes. Dans le design
d'interaction, les grilles à plusieurs colonnes, hiérarchiques et modulaires sont les types de grilles les
plus utilisés.

2.
Le principe d'une grille est simple : chaque élément occupe le même pourcentage d'espace, quelle
que soit la taille de l'écran, ce qui signifie que les composants peuvent être mis à l'échelle lorsque
l'utilisateur change de périphérique.
Dans cette image, vous pouvez voir que la version fixe du contenu a la même largeur quel que soit
l'appareil alors que dans la version fluide, le contenu remplit l'espace disponible en fonction de la
taille de l'appareil.
Images fluides
Dans la conception réactive, les images fluides sont des images qui s'adaptent à leur conteneur, ce
qui signifie que lorsque le navigateur atteint un point d'arrêt, l'image s'adapte à la taille actuelle de la
fenêtre.
Pour les images non photographiques, comme les icônes, vous pouvez utiliser des fichiers SVG. Ces
formats de fichiers sont légers et vous pouvez les adapter à n'importe quelle résolution sans perdre
en qualité.
Requêtes multimédias et points d'arrêt
Les requêtes multimédia sont des filtres qui détectent les dimensions de l'appareil de navigation et
font en sorte que votre conception soit appropriée, quelle que soit la taille de l'écran. Pour faciliter
les requêtes multimédia, vous disposez de points d'arrêt : il s'agit des valeurs auxquelles le contenu
de votre site Web sera réorganisé pour offrir à l'utilisateur la meilleure expérience possible.
Les requêtes multimédia et les points d'arrêt vont de pair et peuvent tous deux être définis dans vos
feuilles de style CSS. Pour les concepteurs, un point de rupture est une limite où la conception sera
modifiée pour adapter les fonctionnalités à la nouvelle taille. Les concepteurs utilisent généralement
trois tailles lors de la conception de sites Web réactifs : 1024 et plus, 1023-768, et 767-320 px.
Dans cette image, vous pouvez voir comment le placement des colonnes est réorganisé en fonction
de la surface d'écran disponible. Le contenu est affiché en une seule colonne sur le smartphone, deux
sur la tablette et trois sur le bureau.
Les requêtes multimédia fonctionnent mieux avec une approche "mobile first", qui consiste à définir
ce que vous voulez sur le mobile, puis à augmenter l'échelle à partir de là. Vous devrez tester le
contenu pour voir où se situent les points de rupture et les planifier. À terme, vous pourrez peut-être
prédire les points d'arrêt en fonction de la résolution de l'écran d'un appareil.
Meilleures pratiques et considérations pour le design réactif
Avec le responsive design, la flexibilité est de mise à tous les niveaux : images, textes et mises en
page. Vous devez donc
Adopter une mentalité "mobile-first" : Que vous commenciez à concevoir à partir du plus petit écran
ou de la version de bureau, adopter une mentalité "mobile-first" vous aide à mettre en pratique
l'approche "mobile-first", un principe de conception dont le cœur est la simplicité.
Une mentalité "mobile-first" implique de donner la priorité au contenu, de laisser les graphiques et
les images complexes pour la version de bureau, et de créer des cibles d'effleurement adaptées aux
gros doigts (30px minimum).
Utilisez des graphiques vectoriels évolutifs (SVG). Il s'agit d'un format de fichier basé sur XML pour les
graphiques en 2D, qui prend en charge l'interactivité et les animations. Incluez trois points d'arrêt ou
plus (c'est-à-dire, concevez pour trois appareils ou plus).

3.
Hiérarchisez et masquez le contenu en fonction du contexte des utilisateurs. Vérifiez votre hiérarchie
visuelle et utilisez la divulgation progressive et les tiroirs de navigation pour donner aux utilisateurs
les éléments nécessaires en premier. Placez les éléments non essentiels au second plan.
Visez le minimalisme.
Appliquez des modèles de conception afin de maximiser la facilité d'utilisation pour les utilisateurs
dans leurs contextes et de les familiariser plus rapidement avec le site : par exemple, le modèle de
chute des colonnes adapte le contenu à de nombreux types d'écran.
Visez l'accessibilité avec les tailles/styles de police. Utilisez efficacement le contraste et l'arrière-plan.
Envisagez d'apprendre les échelles typographiques pour harmoniser le corps du texte et les titres.
Comme certains utilisateurs ont recours à des lecteurs d'écran, faites en sorte que tout votre texte
soit "réel" au lieu d'utiliser du texte dans des images.
Le Responsive Design est robuste et économique, mais sa nature "facile" est trompeuse. Vous pouvez
toujours rencontrer des difficultés si vous l'utilisez sans précaution.
Par exemple, elle peut restreindre votre contrôle sur les tailles d'écran de la conception ; par
conséquent, si vous ne définissez pas de requêtes média en amont, les éléments peuvent se déplacer
indépendamment. En outre, il est courant de rencontrer des problèmes avec les formats d'annonce,
en particulier sur les appareils mobiles.
Néanmoins, le design réactif contribue à une excellente expérience utilisateur car, par défaut, il exige
l'uniformité, l'homogénéité et la simplicité de vos efforts de conception. Il est favorable au
référencement, et les multiples CMS et frameworks, tels que WordPress et Bootstrap, le rendent très
économique à mettre en œuvre.
En savoir plus sur le Responsive Design
Suivez notre cours : Mobile UX Design : Le guide du débutant. Lisez l'analyse approfondie de Jerry
Cao sur le Responsive Design, qui présente d'excellents exemples de leaders du secteur. TNW
propose des considérations utiles concernant le Responsive Design, et d'autres conseils pour les
concepteurs attentifs.
Apprenez-en davantage sur la conception réactive et les bonnes pratiques de convivialité dans le
guide de terrain sur la conception Web de Steve Krug, "Don't make me think". Apprenez tout sur les
grilles, pourquoi elles sont importantes et comment les utiliser dans la conception d'interfaces.
Responsive Design : Meilleures pratiques
La conception réactive permet aux utilisateurs d'accéder au contenu à partir de plusieurs résolutions
d'appareils. Comme de plus en plus de personnes interagissent avec les sites Web par le biais
d'appareils mobiles, les utilisateurs s'attendent désormais à ce que les sites Web soient réactifs.
Nous examinerons ici les grands principes de la conception réactive et la manière dont elle prend en
charge l'accessibilité et le changement d'appareil. Le terme "Responsive Design" a été inventé par le
concepteur et développeur web Ethan Marcotte dans son livre Responsive Web Design.
Il s'agit de l'option par défaut pour prendre en charge le changement d'appareil. Les utilisateurs
peuvent commencer à interagir avec votre produit ou service sur un ordinateur de bureau, passer à
un téléphone ou une tablette, puis revenir. Examinons de près les éléments clés du design réactif.
En outre, les directives d'accessibilité aux contenus Web (WCAG) définissent la réactivité du Web
(appelée Reflow) comme l'un des critères de réussite en matière de contenu accessible. Un site

4.
réactif est également mieux classé dans les résultats de recherche et est crucial pour l'optimisation
des moteurs de recherche (SEO).
Qu'est-ce que le Responsive Design ?
La conception Web réactive (aussi appelée "Responsive" ou "Responsive Design") est une approche
visant à concevoir un contenu Web qui s'affiche quelle que soit la résolution régie par l'appareil.
Elle s'effectue généralement à l'aide de points de rupture (seuils de résolution à partir desquels le
contenu s'adapte à la vue). Les fenêtres d'affichage doivent s'adapter logiquement aux tablettes, aux
téléphones et aux ordinateurs de bureau, quelle que soit leur résolution.
Illustration des différentes tailles d'écran et de la façon dont la mise en page se réorganise en
fonction de la taille. En responsive design, vous pouvez définir des règles pour la circulation du
contenu et la modification de la mise en page en fonction de la plage de taille de l'écran.
Les conceptions réactives répondent aux changements de largeur du navigateur en ajustant le
placement des éléments de conception pour qu'ils s'adaptent à l'espace disponible. Si vous ouvrez un
site réactif sur un ordinateur de bureau et que vous modifiez la taille de la fenêtre du navigateur, le
contenu sera réorganisé de manière dynamique pour s'adapter à la fenêtre du navigateur.
Sur les téléphones mobiles, le site vérifie l'espace disponible et se présente ensuite dans la
disposition idéale. Illustration de l'eau prenant la forme de chaque récipient : une tasse, une théière,
une bouteille, un téléphone et un bureau.
Les 3 grands principes du Responsive Design
Trois grands principes régissent le responsive design. D'autres principes peuvent entrer en jeu pour
certaines conceptions, mais ces trois principes lient tous les sites responsive :
Systèmes de grilles fluides
Utilisation fluide des images
Requêtes média
Système de grille fluide
Dans la presse écrite, les éditeurs déterminent la taille de ce qui est affiché (et où) en mesures
absolues. Avec l'arrivée d'Internet, cette tendance s'est poursuivie et les concepteurs ont défini les
sites Web en pixels.
Illustration de différents écrans de résolution : 720p, 1080p et 4K.
Le "p" dans "720p" et "1080p" signifie "progressive scan" (balayage progressif), et le nombre fait
référence aux dimensions en hauteur de l'image en pixels. Pour le responsive design, la méthode de
la taille absolue ne fonctionne pas car la taille des appareils varie. Le responsive design utilise donc
des tailles relatives.
Hiérarchisez et masquez le contenu en fonction du contexte des utilisateurs. Vérifiez votre hiérarchie
visuelle et utilisez la divulgation progressive et les tiroirs de navigation pour donner aux utilisateurs
les éléments nécessaires en premier. Placez les éléments non essentiels au second plan.
Visez le minimalisme.
Appliquez des modèles de conception afin de maximiser la facilité d'utilisation pour les utilisateurs
dans leurs contextes et de les familiariser plus rapidement avec le site : par exemple, le modèle de
chute des colonnes adapte le contenu à de nombreux types d'écran.

5.
Visez l'accessibilité avec les tailles/styles de police. Utilisez efficacement le contraste et l'arrière-plan.
Envisagez d'apprendre les échelles typographiques pour harmoniser le corps du texte et les titres.
Comme certains utilisateurs ont recours à des lecteurs d'écran, faites en sorte que tout votre texte
soit "réel" au lieu d'utiliser du texte dans des images.
Le Responsive Design est robuste et économique, mais sa nature "facile" est trompeuse. Vous pouvez
toujours rencontrer des difficultés si vous l'utilisez sans précaution.
Par exemple, elle peut restreindre votre contrôle sur les tailles d'écran de la conception ; par
conséquent, si vous ne définissez pas de requêtes média en amont, les éléments peuvent se déplacer
indépendamment. En outre, il est courant de rencontrer des problèmes avec les formats d'annonce,
en particulier sur les appareils mobiles.
Néanmoins, le design réactif contribue à une excellente expérience utilisateur car, par défaut, il exige
l'uniformité, l'homogénéité et la simplicité de vos efforts de conception. Il est favorable au
référencement, et les multiples CMS et frameworks, tels que WordPress et Bootstrap, le rendent très
économique à mettre en œuvre.
En savoir plus sur le Responsive Design
Apprenez-en davantage sur la conception réactive et les bonnes pratiques de convivialité dans le
guide de terrain sur la conception Web de Steve Krug, "Don't make me think".
Apprenez tout sur les grilles, pourquoi elles sont importantes et comment les utiliser dans la
conception d'interfaces.
Responsive Design : Meilleures pratiques
La conception réactive permet aux utilisateurs d'accéder au contenu à partir de plusieurs résolutions
d'appareils. Comme de plus en plus de personnes interagissent avec les sites Web par le biais
d'appareils mobiles, les utilisateurs s'attendent désormais à ce que les sites Web soient réactifs.
Nous examinerons ici les grands principes de la conception réactive et la manière dont elle prend en
charge l'accessibilité et le changement d'appareil. Le terme "Responsive Design" a été inventé par le
concepteur et développeur web Ethan Marcotte dans son livre Responsive Web Design. Il s'agit de
l'option par défaut pour prendre en charge le changement d'appareil.
Les utilisateurs peuvent commencer à interagir avec votre produit ou service sur un ordinateur de
bureau, passer à un téléphone ou une tablette, puis revenir. Examinons de près les éléments clés du
design réactif.
En outre, les directives d'accessibilité aux contenus Web (WCAG) définissent la réactivité du Web
(appelée Reflow) comme l'un des critères de réussite en matière de contenu accessible. Un site
réactif est également mieux classé dans les résultats de recherche et est crucial pour l'optimisation
des moteurs de recherche (SEO).
Qu'est-ce que le Responsive Design ?
La conception Web réactive (aussi appelée "Responsive" ou "Responsive Design") est une approche
visant à concevoir un contenu Web qui s'affiche quelle que soit la résolution régie par l'appareil. Elle
s'effectue généralement à l'aide de points de rupture (seuils de résolution à partir desquels le
contenu s'adapte à la vue). Cliquez sur ce lien pour en savoir plus sur le Responsive design.
Les fenêtres d'affichage doivent s'adapter logiquement aux tablettes, aux téléphones et aux
ordinateurs de bureau, quelle que soit leur résolution.

6.
Illustration des différentes tailles d'écran et de la façon dont la mise en page se réorganise en
fonction de la taille. En responsive design, vous pouvez définir des règles pour la circulation du
contenu et la modification de la mise en page en fonction de la plage de taille de l'écran.
Les conceptions réactives répondent aux changements de largeur du navigateur en ajustant le
placement des éléments de conception pour qu'ils s'adaptent à l'espace disponible. Si vous ouvrez un
site réactif sur un ordinateur de bureau et que vous modifiez la taille de la fenêtre du navigateur, le
contenu sera réorganisé de manière dynamique pour s'adapter à la fenêtre du navigateur.
Sur les téléphones mobiles, le site vérifie l'espace disponible et se présente ensuite dans la
disposition idéale. Illustration de l'eau prenant la forme de chaque récipient : une tasse, une théière,
une bouteille, un téléphone et un bureau.
Les 3 grands principes du Responsive Design
Trois grands principes régissent le responsive design. D'autres principes peuvent entrer en jeu pour
certaines conceptions, mais ces trois principes lient tous les sites responsive :
Systèmes de grilles fluides
Utilisation fluide des images
Requêtes média
Système de grille fluide
Dans la presse écrite, les éditeurs déterminent la taille de ce qui est affiché (et où) en mesures
absolues. Avec l'arrivée d'Internet, cette tendance s'est poursuivie et les concepteurs ont défini les
sites Web en pixels.
Illustration de différents écrans de résolution : 720p, 1080p et 4K. Le "p" dans "720p" et "1080p"
signifie "progressive scan" (balayage progressif), et le nombre fait référence aux dimensions en
hauteur de l'image en pixels.
Pour le responsive design, la méthode de la taille absolue ne fonctionne pas car la taille des appareils
varie. Le responsive design utilise donc des tailles relatives.