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

1. Sur mobile, on a moins de place → on est obligé de garder l'essentiel
2. Sur mobile, la connexion peut être lente → on charge moins de choses au début
3. Ajouter des choses sur grand écran est plus facile qu'enlever sur petit écran
4. 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 : srcset pour 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.