Aller au contenu

Responsive Web Design

Le Responsive Web Design (RWD) est une approche de conception web qui vise à offrir une expérience de visualisation optimale sur une large gamme d'appareils, des ordinateurs de bureau aux smartphones. L'objectif est qu'un même site web s'adapte automatiquement à la taille de l'écran ou de la fenêtre du navigateur de l'utilisateur.

Le terme a été proposé par Ethan Marcotte en mai 2010, autour de trois ingrédients techniques : des grilles fluides, des images flexibles et des media queries.

Principes clés

  • Flexibilité des éléments visuels : Les éléments de la page (images, grilles, blocs de contenu) se redimensionnent et se réorganisent selon la largeur disponible (ex. trois colonnes sur ordinateur, une seule sur smartphone). Flexbox et Grid, vus en A08, sont conçus pour cela.
  • Utilisation des media queries : Les media queries (détaillées dans la page CSS - Media Queries) permettent de définir des règles CSS spécifiques selon les caractéristiques de l'appareil (largeur, hauteur, résolution, orientation, etc.). Ainsi, un même site peut adopter différents styles selon qu'il est affiché sur un téléphone, une tablette ou un ordinateur.
  • Mise en page fluide : Les largeurs utilisent des unités relatives (%, vw) plutôt que des valeurs fixes en pixels, et les tailles de texte s'expriment de préférence en rem (voir les unités de mesure en CSS et la page Font size). Cela rend la mise en page plus adaptable et cohérente sur divers écrans.
  • Images adaptatives (responsive images) : Les images s'ajustent en taille et en résolution selon l'appareil, garantissant à la fois performance (chargement rapide) et qualité visuelle (voir Images et densité de pixels).
    • Ex. max-width: 100% empêche une image de dépasser de l'élément qui la contient.
  • Tests et ajustements : Le RWD nécessite des tests sur plusieurs appareils et navigateurs pour assurer un rendu homogène et facile à utiliser (ergonomique). Les outils de développement des navigateurs proposent un mode qui simule différentes tailles d'écran.

Sources :

Le contenu est comme l'eau : il prend la forme du récipient qui le contient (tasse, bouteille, tablette ou écran d'ordinateur).

rwd.png

Source image

Processus de conception

Deux approches principales sont utilisées en Responsive Web Design : Mobile First et Desktop First. Elles diffèrent selon le point de départ de la conception et la logique d'adaptation du design.

Mobile First

L'approche Mobile First consiste à concevoir d'abord pour les petits écrans (smartphones), puis à enrichir progressivement le design pour les écrans plus grands.

  • Approche : conception initiale pour mobile.
  • Priorité : fonctionnalités essentielles et contenu simplifié.
  • Amélioration progressive (progressive enhancement) : on part d'une version simple qui fonctionne sur tous les écrans, puis on ajoute des styles et des éléments pour tablettes et ordinateurs.
  • Résultat : design épuré, rapide et centré sur l'utilisateur mobile.

Source : MDN Web Docs - Mobile first (Glossary)

rwd-mobile-first.png

Source image

Desktop First

L'approche Desktop First adopte la démarche inverse : on conçoit d'abord pour les grands écrans (ordinateurs), puis on adapte le design pour les appareils plus petits.

  • Approche : conception initiale pour ordinateurs de bureau.
  • Priorité : expérience riche et complète sur grand écran.
  • Dégradation gracieuse (graceful degradation) : on part de la version complète, puis on la simplifie et on l'adapte pour les mobiles.
  • Résultat : design souvent plus complexe, parfois moins optimisé pour mobile.

rwd-desktop-first.png

Source image

Chaque approche a ses avantages : le choix dépend du public cible, du contexte du projet et des priorités de conception.

Desktop First est l'approche historique. Mobile First est aujourd'hui une approche courante pour concevoir un nouveau site.

Exemples

Les sites ci-dessous sont classés selon leur implémentation, et non selon leur apparence. A l'écran, le résultat est comparable : chaque site s'adapte aux trois largeurs. Seul le code CSS révèle l'approche utilisée, selon que les styles de base visent le mobile ou l'ordinateur (voir l'encadré "Implémentation" ci-dessous).

Note

Classement établi en novembre 2026 à partir du CSS de la page d'accueil de chaque site. Il peut changer avec une nouvelle version du site.

📱 Mobile First : Journal du Geek

rwd-jdg.png

📱 / 🖥 Mixte : HEIA-FR

rwd-heia.png

🖥 Desktop First : BBC

rwd-bbc.png

Implémentation

La différence technique entre les approches Mobile First et Desktop First réside principalement dans la logique d'utilisation des media queries en CSS.

Mobile First

  • Les styles de base sont définis pour les petits écrans (mobiles).
  • Les media queries utilisent width >= (notation équivalente : min-width), ce qui applique des styles supplémentaires lorsque la largeur atteint ou dépasse un certain seuil (breakpoint).
/* Styles de base : une seule colonne (mobile) */
main {
  display: block;
}

/* A partir de 768 px : plusieurs colonnes */
@media (width >= 768px) {
  main {
    display: flex;
  }
}

Desktop First

  • Les styles de base s'appliquent aux grands écrans (ordinateurs).
  • Les media queries utilisent width <= (notation équivalente : max-width), permettant d'adapter le design aux écrans plus petits.
/* Styles de base : plusieurs colonnes (ordinateur) */
main {
  display: flex;
}

/* Jusqu'à 767 px : une seule colonne */
@media (width <= 767px) {
  main {
    display: block;
  }
}

La syntaxe des media queries est détaillée dans la page CSS - Media Queries, et le choix des seuils dans Breakpoints. Sur smartphone, les media queries ne fonctionnent correctement que si la page contient la balise meta viewport.

Source : W3C - Media Queries Level 4 (2.4.4 Using "min-" and "max-" Prefixes On Range Features)

rwd-joke.png

Source image