Phase 8 — Responsive design
Mobile-first n'est pas une mode
En 2026, 60 à 70 % du trafic web mondial vient d'un smartphone. Google indexe les sites en mobile-first : si votre site n'est pas utilisable sur un téléphone, il sera mal classé. Un site responsive n'est pas un bonus, c'est la base attendue.
Objectifs de la phase
Cette phase couvre la section 8 de la checklist finale :
| 🔴 Critique | 🟠 Important | 🟢 Bonus |
|---|---|---|
| Utilisable sur mobile (320px min) | Breakpoints testés | Images srcset selon résolution |
| Pas de scroll horizontal | Menu adapté au mobile | |
Images responsives (max-width: 100%) | ||
| Texte lisible sans zoom |
Le réflexe mobile-first
Mobile-first veut dire : on conçoit pour le plus petit écran d'abord, puis on enrichit pour les écrans plus grands. C'est l'inverse de la démarche historique (« desktop d'abord, on dégrade ensuite »).
Pourquoi mobile-first et pas l'inverse
- Sur mobile, on a moins de place → on est obligé de garder l'essentiel
- Sur mobile, la connexion peut être lente → on charge moins de choses au début
- Ajouter des choses sur grand écran est plus facile qu'enlever sur petit écran
- Google indexe en mobile-first depuis 2019 — la perf mobile compte pour le SEO
/* Mobile-first : styles par défaut = mobile */
.menu {
flex-direction: column;
}
/* Puis on enrichit pour tablette et plus */
@media (min-width: 768px) {
.menu {
flex-direction: row;
}
}min-width plutôt que max-width
En mobile-first, on utilise min-width (« à partir de cette largeur, applique ces règles »). C'est l'inverse de l'approche desktop-first qui utilise max-width (« en dessous de cette largeur, applique »). Les deux fonctionnent, mais min-width est cohérent avec l'esprit mobile-first.
La balise viewport (obligatoire)
Sans cette balise dans <head>, votre site sera affiché en version desktop sur mobile (zoomé), même si vous avez du CSS responsive. Toujours présente, sur tous les projets :
<meta name="viewport" content="width=device-width, initial-scale=1.0">| Attribut | Effet |
|---|---|
width=device-width | La largeur de la page = la largeur de l'écran |
initial-scale=1.0 | Aucun zoom initial appliqué |
Ne jamais ajouter user-scalable=no
Bloquer le zoom utilisateur casse l'accessibilité pour les personnes malvoyantes. Cette pratique est interdite par WCAG.
Les breakpoints
Un breakpoint est une largeur d'écran à partir de laquelle on change la mise en page. Pas besoin d'en multiplier — 2 ou 3 breakpoints suffisent pour 95 % des projets.
| Breakpoint | Largeur | Cible |
|---|---|---|
| (par défaut) | < 768px | Mobile portrait |
| Tablette | ≥ 768px | Tablette / mobile paysage |
| Desktop | ≥ 1024px | Laptop / desktop |
| Large desktop | ≥ 1440px | Grand écran |
Choisir ses breakpoints
Ne copiez pas aveuglément les breakpoints de Bootstrap ou Tailwind. Ouvrez votre maquette : à quelle largeur la mise en page commence à être laide ? C'est là votre breakpoint. Les bonnes valeurs viennent du contenu, pas d'une convention.
Images responsives
Sans CSS, une image de 2000px de large déborde sur un écran de 320px → scroll horizontal → mauvaise note WCAG.
Règle minimale (obligatoire)
img {
max-width: 100%;
height: auto;
}L'image ne dépassera jamais la largeur de son conteneur, et garde son ratio.
Pour aller plus loin : srcset et sizes
Au lieu de servir la même image à un iPhone (375px) et à un grand écran (2560px), srcset permet au navigateur de choisir la bonne version selon la résolution.
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Description"
width="800"
height="600"
loading="lazy">| Attribut | Rôle |
|---|---|
srcset | Liste les versions disponibles avec leur largeur réelle (400w = 400 pixels de large) |
sizes | Indique au navigateur la place que prendra l'image sur la page selon le viewport |
src | Fallback pour les vieux navigateurs |
Le menu mobile
Sur mobile, un menu horizontal classique ne tient pas. Trois patterns courants :
| Pattern | Quand l'utiliser |
|---|---|
| Hamburger ⭐ | Plus de 4 entrées, ou navigation secondaire |
| Tab bar bas | App-like, 3-5 entrées maximum |
| Menu visible | 2-3 entrées seulement, cas rare |
Le hamburger en HTML/CSS sans JavaScript
On peut faire un menu hamburger fonctionnel avec uniquement HTML + CSS, en utilisant un <input type="checkbox"> caché et le sélecteur :checked. Pas besoin de JS pour ouvrir/fermer.
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" class="burger">☰</label>
<nav class="menu">…</nav>
<style>
.menu { display: none; }
#nav-toggle:checked ~ .menu { display: block; }
</style>Outils pour tester le responsive
| Outil | Type | Usage |
|---|---|---|
| Chrome DevTools Device Mode ⭐ | Intégré navigateur | F12 → 📱 ou Cmd/Ctrl+Shift+M |
| Firefox Responsive Design Mode | Intégré navigateur | Cmd/Ctrl+Shift+M |
| Responsively App | Desktop | Voir plusieurs appareils côte à côte — responsively.app |
| Polypane | Desktop payant | Navigateur pro responsive + accessibilité — polypane.app |
Largeurs de référence à tester
| Appareil | Largeur |
|---|---|
| iPhone SE | 375px |
| iPhone 14/15 Pro | 393px |
| Samsung Galaxy S23 | 360px |
| iPad | 768px |
| Desktop standard | 1440px |
Limitation des simulateurs
Le device mode ne remplace pas les tests sur vrais appareils — voir la Phase 9 — Tests réels. Sur un vrai téléphone, vous découvrirez : la chaleur, la batterie qui se vide, le tactile imprécis sous le soleil, le clavier qui mange la moitié de l'écran à la saisie.
Pièges classiques à éviter
| Symptôme | Cause fréquente |
|---|---|
| Scroll horizontal sur mobile | Un élément avec width: 100vw + padding, ou une image sans max-width: 100% |
| Texte trop petit à lire | font-size en px < 16px sans min-width: 16px |
| Boutons impossibles à toucher | Cibles tactiles < 44×44px (recommandation iOS/Material) |
| Mise en page cassée à 320px | Aucun test sous 375px |
| Layout shift au chargement | Images sans width/height — voir Phase 7 |
Checklist de la Phase 8
- Balise
<meta name="viewport">présente - Site utilisable à 320px de largeur (test : DevTools → 320px)
- Pas de scroll horizontal à aucune largeur
- Images avec
max-width: 100%; height: auto - Texte lisible sans zoom (16px minimum sur mobile)
- 2 à 3 breakpoints choisis selon le contenu
- Menu adapté au mobile (hamburger, tab bar, ou visible)
- Cibles tactiles ≥ 44×44px
- Bonus :
srcsetpour les images selon la résolution
Prochaine étape
Le site s'adapte aux écrans. Passez à la Phase 9 — Tests sur appareils réels pour valider sur de vrais smartphones et ordinateurs.