📘 Chapitre 4 : Design responsive

🎯 Objectif pédagogique

Comprendre les principes du design responsive et savoir adapter une interface web à différents supports (mobile, tablette, desktop).

📚 Concepts abordés

  • Définition du design responsive
  • Notion de grille et de points de rupture (breakpoints)
  • Media queries en CSS
  • Flexbox et Grid pour la mise en page flexible
  • Bonnes pratiques pour le mobile-first

🧠 Explication théorique

Le design responsive consiste à créer des interfaces qui s’ajustent automatiquement à la taille de l’écran de l’utilisateur.
Il repose sur l’utilisation de grilles fluides, de media queries et de techniques de mise en page modernes comme Flexbox et Grid.

Les breakpoints sont des largeurs d’écran définies où la présentation change pour s’adapter au mieux (ex. : écran smartphone, tablette, desktop).

Exemple de media query CSS : 

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Cette règle ajuste la taille du texte pour les écrans dont la largeur est inférieure à 768 pixels, améliorant ainsi la lisibilité sur mobile.

Flexbox et Grid

  • Flexbox : idéal pour organiser des éléments en ligne ou en colonne de manière flexible, avec contrôle facile des alignements et espaces.
  • Grid : plus puissant pour des mises en page complexes en deux dimensions (lignes et colonnes).

Approche mobile-first

Concevoir d’abord pour les petits écrans (mobile), puis ajouter des styles adaptés aux écrans plus larges. Cela garantit une expérience optimisée et plus légère pour les mobiles.

🛠 Travail pratique

Étape 1 : Mise en page adaptative

  • Créer une page web simple avec un en-tête, une section de contenu et un pied de page.
  • Utiliser Flexbox pour organiser les éléments horizontalement sur desktop.

Étape 2 : Adaptation mobile

  • Ajouter des media queries pour afficher les éléments en colonne sur mobile.
  • Tester le rendu sur différents écrans via les outils développeur du navigateur.

🧾 Résumé et points-clés

  • Le design responsive assure une bonne expérience utilisateur sur tous les supports.
  • Les media queries permettent d’adapter le style CSS selon la taille d’écran.
  • Flexbox et Grid facilitent la création de mises en page flexibles et efficaces.
  • L’approche mobile-first est recommandée pour privilégier la simplicité et la performance.