Responsive Design
Concevoir des interfaces web qui s'adaptent
à tous les écrans — mobile, tablette, desktop
Plan
01
Le problème du multi-écran 02
Définition & concepts clés
Pourquoi le responsive est indispensable
Fixe vs adaptatif vs responsive — les 3 approches
aujourd'hui
03
Les breakpoints standards 04
La balise meta viewport
Mobile, tablette, desktop — les seuils à connaître L'élément HTML qui active tout le responsive
05
Erreurs fréquentes 06
Exercice pratique
Les pièges à éviter dès le début Mise en pratique et validation des acquis
Qu’est-ce que le responsive web design ?
Content is like water
Be formless, shapeless, like water
If you put water into a cup, it becomes the cup.
You put water into a bottle, it becomes the bottle.
You put it in a teapot, it becomes the teapot.
Bruce Lee
Le contenu s’adapte au contenant
Le problème du multi-écran
60% 3+ 320px 2560px
du trafic web mondial appareils différents écran le plus petit résolution des grands
vient du mobile utilisés en moyenne courant (iPhone SE) écrans desktop
Sans Responsive Design : votre site sera illisible sur mobile, les utilisateurs partiront, et Google pénalisera votre
référencement.
Avec le Responsive Design : une seule base de code, un seul site, qui s'adapte parfaitement à TOUS les écrans
automatiquement.
Source : StatCounter Global Stats, 2024
Les 3 approches de mise en page web
Site Fixe Site Adaptatif Site Responsive
À éviter Limité Standard actuel
• Largeur fixe en pixels (ex : • Plusieurs versions distinctes du • Une seule base de code, un
width: 960px) site (ex : 3 templates) seul site
• Ne s'adapte pas du tout aux • Chaque version est figée pour • La mise en page se réorganise
différents écrans un type d'écran fluidement
• Scrollbar horizontale sur • Maintenance complexe : 3x • S'adapte à TOUTES les largeurs
mobile plus de code d'écran
• Expérience utilisateur très • Ne couvre pas toutes les tailles • Recommandé par Google pour
dégradée possibles le SEO
Qu’est-ce que le responsive web design ?
Avantage
✓ 1 site web unique à maintenir
✓ 1 URL
Inconvénient
✓ Images souvent non redimensionnées (utilisation de bande passante)
2 approches
✓ Dégradation gracieuse
✓ Amélioration progressive
Qu’est-ce que le responsive web design ?
Dégradation gracieuse
Approche desktop first : site web classique
Modification du site pour qu’il fonctionne sur mobile en mode dégradé
Inconvénients
✓ Ergonomie non optimale
✓ Mobile charge la version desktop
✓ Parfois suppression de fonctionnalités ou de contenu
✓ Temps de téléchargement pas toujours optimisé pour mobile
▪ images non redimensionnées
▪ blocs HTML masqués
▪ CSS de la partie desktop
Qu’est-ce que le responsive web design ?
Amélioration progressive
Approche mobile first
Optimisé pour mobile
Site au design épuré destiné à la navigation sur mobile
Quand le viewport augmente les informations sont déplacées
Les breakpoints — seuils de taille d'écran
Un breakpoint est la largeur à partir de laquelle la mise en page change. C'est comme un point de bascule.
Smartphones en portrait. Une seule colonne. Menu
Mobile < 768px
hamburger.
Tablette 768px – 1023px Tablettes, smartphones en paysage. 2 colonnes possibles.
Ordinateurs portables et petits écrans de bureau. 3+
Desktop 1024px – 1279px
colonnes.
Grands écrans. Contenu centré avec max-width pour la
Large ≥ 1280px
lisibilité.
La balise meta viewport — indispensable
HTML — à placer dans le <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width Utilise la vraie largeur physique de l'écran de l'appareil — pas une largeur
simulée.
initial-scale=1.0
Démarre sans zoom : affichage à 100% au chargement de la page.
Sans : le navigateur mobile miniaturise la page desktop → illisible Avec : la page s'affiche à la vraie taille de l'écran → lisible
Structure HTML minimale d'une page responsive
[Link]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Ma page</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Bonjour monde !</h1>
</body>
</html>
01 — Le viewport DÉFINITION
Le viewport est la zone visible du navigateur à l'écran. Sur mobile, sans configuration, le navigateur simule un écran large
(~980 px) puis zoom en arrière — rendant la page minuscule et illisible.
Sans meta viewport Avec meta viewport
✗ ~980 px simulés ✓ Largeur réelle appareil
✗ Zoom arrière auto ✓ Zoom = 1 (normal)
✗ Texte minuscule ✓ Texte lisible
La balise indispensable dans chaque <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Ne jamais ajouter user-scalable=no : bloque le zoom utilisateur — interdit par WCAG 2.1 SC 1.4.4
01 — Le viewport ATTRIBUTS
width=device-width
Définit la largeur logique du viewport à la largeur physique de l'écran. Sans cet attribut,
Obligatoire
les navigateurs mobiles utilisent une largeur simulée d'environ 980 px.
initial-scale=1
Fixe le niveau de zoom initial à 1 (aucun zoom). Valeurs > 1 agrandissent, valeurs < 1
Recommandé
réduisent. Ne pas dépasser cette valeur sans raison UX explicite.
minimum-scale / maximum-scale
Fixent les limites de zoom autorisées par l'utilisateur. Limiter maximum-scale peut nuire
Rare
à l'accessibilité — à éviter.
user-scalable=no
Bloque totalement le zoom. Viole le critère WCAG.
INTERDIT
Illégal dans les interfaces publiques soumises aux règles d'accessibilité.
user-scalable=no : des frameworks comme Ionic l'ajoutaient par défaut. Vérifier systématiquement dans les projets existants.
02 — Unités relatives au viewport
1% de la largeur du viewport
vw Typographie fluide, images adaptatives
font-size: 5vw;
1% de la hauteur du viewport
vh Sections plein écran — attention : sur mobile la barre d'adresse change la
height: 100vh;
hauteur !
Hauteur dynamique (2023+)
dvh Remplace vh sur mobile. S'adapte à la présence ou non de la barre d'adresse du
min-height: 100dvh;
navigateur.
min(vw, vh)
vmin Éléments qui doivent rester proportionnels quelle que soit l'orientation
font-size: 4vmin;
(portrait/paysage)
max(vw, vh)
vmax Fonds, éléments décoratifs qui doivent couvrir toute la surface visible
background-size: 100vmax;
Compatibilité dvh : Chrome 108+, Safari 15.4+, Firefox 101+ — prévoir un fallback vh pour les navigateurs anciens.
02 — Unités relatives PIÈGE CLASSIQUE
Le piège du vh sur mobile
Sur mobile, la barre d'adresse du navigateur disparaît en scrollant. Cela modifie la hauteur du viewport en cours de navigation. Un
élément à height: 100vh sera rogné au chargement car vh est calculé sans la barre d'adresse.
PROBLÉMATIQUE SOLUTION MODERNE
.hero { .hero {
height: 100vh; /* Fallback — navigateurs anciens */
/* rogné sur mobile */ height: 100vh;
/* Écrase si dvh supporté */
}
height: 100dvh;
}
svh — Small viewport height — hauteur minimale (barre d'adresse visible)
lvh — Large viewport height — hauteur maximale (barre d'adresse cachée)
dvh — Dynamic viewport height — s'adapte dynamiquement (recommandé)
Chrome 108+ · Safari 15.4+ · Firefox 101+ — utiliser les deux déclarations (vh puis dvh) pour la compatibilité maximale.
Erreurs fréquentes des débutants
✕ Oublier la balise meta viewport
→ Mets-la systématiquement dans le <head> de chaque page. Sans elle, le mobile miniaturise tout.
✕ Fixer une largeur en pixels sur le body
body { width: 960px; } → body { width: 100%; max-width: 1200px; }
✕ Confondre site adaptatif et site responsive
→ Adaptatif = plusieurs versions figées. Responsive = une version fluide. Le responsive est le standard.
✕ Tester uniquement sur son propre écran
→ Ouvre toujours les DevTools (F12) → icône mobile pour simuler différentes tailles.