Cours RWD - IPM Alizé

Le Responsive Web Design (RWD) est une approche de conception web qui vise à offrir une expérience utilisateur optimale sur tous les appareils, des écrans de bureau aux smartphones.

📚 Historique du web responsive

Avant 2010, les sites web étaient conçus pour des écrans de taille fixe (généralement 1024×768 px). Avec l'explosion des smartphones et tablettes, les développeurs ont dû adapter leurs approches. En 2010, Ethan Marcotte a inventé le terme "Responsive Web Design" dans un article célèbre d'A List Apart, proposant une nouvelle approche utilisant les media queries CSS3.

📱🔍 Exemple interactif : Layout responsive

Redimensionnez la fenêtre ou utilisez les boutons pour voir le layout s'adapter :

👁️ Aperçu responsive

🧭 Header (100%)

📄 Content (100%)

� Sidebar (100%)

🔻 Footer (100%)

Code HTML :

<div class="row">
  <div class="col-12 col-md-12 col-lg-12">Header</div>
  <div class="col-12 col-md-8 col-lg-9">Content</div>
  <div class="col-12 col-md-4 col-lg-3">Sidebar</div>
  <div class="col-12 col-md-12 col-lg-12">Footer</div>
</div>

📱 < 768px
1 colonne

📱 768px - 991px
Content 8/12 + Sidebar 4/12

💻 ≥ 992px
Content 9/12 + Sidebar 3/12

🏛️ Les trois piliers du RWD

Les layouts utilisent des pourcentages plutôt que des pixels fixes. Un conteneur de 100% s'adapte à toute taille d'écran, tandis que ses enfants peuvent occuper des proportions relatives (50%, 33%, etc.).

.container { width: 100%; max-width: 1200px; }

Permettent d'appliquer des styles CSS conditionnels selon les caractéristiques de l'appareil (largeur, orientation, résolution). C'est le cœur technique du responsive design.

@media (min-width: 768px) { ... }

Les images et vidéos doivent s'adapter à leur conteneur sans dépasser. La règle CSS max-width: 100%; height: auto; est essentielle pour cela.

img { max-width: 100%; height: auto; }

⚖️ Mobile-first vs Desktop-first

Approche	Philosophie	Requête média	Avantage
Mobile-first ⭐	Commencer par le mobile, ajouter pour desktop	`min-width` (progressif)	Performances, priorité au contenu essentiel
Desktop-first	Commencer par desktop, retirer pour mobile	`max-width` (régressif)	Approche plus intuitive pour certains designers

Recommandation : L'approche mobile-first est aujourd'hui la norme car elle force à prioriser le contenu essentiel et offre de meilleures performances sur les appareils mobiles (souvent avec connexion limitée).

🔧 La balise Meta Viewport - ESSENTIELLE

Sans cette balise dans le <head>, le navigateur mobile va simuler un écran de bureau et réduire la page. La page ne sera PAS responsive !

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width : Largeur = largeur de l'écran
initial-scale=1 : Zoom initial à 100%
user-scalable=no (optionnel) : Empêche le zoom utilisateur (déconseillé pour l'accessibilité)

📊 Statistiques et contexte (2024)

58%

Trafic web mobile mondial

3.8Mds

Utilisateurs de smartphones

📝 Exercice pratique 1.1

Créez une page HTML simple avec un titre centré et un paragraphe. La page doit s'adapter à tous les écrans en utilisant la balise meta viewport et des unités relatives.

Voir la solution → 🧠 Testez vos connaissances →

Durée : 45 min 1 exercice + 1 quiz

Les grilles fluides sont la base de tout design responsive. Elles permettent de créer des layouts qui s'adaptent automatiquement à la taille de l'écran, des smartphones aux écrans 4K.

📐 Pourquoi une grille de 12 colonnes ?

Le nombre 12 est mathématiquement pratique car divisible par 2, 3, 4 et 6. Cela permet de créer facilement des layouts variés :

12 colonnes = 100%

6 + 6 = 50/50

4 = 33%

3 = 25%

🎯 Le système de grille Bootstrap

Breakpoint	Dimensions	Classe	Utilisation
XS (Extra Small)	< 576px	`col-*`	Mobile portrait
SM (Small)	≥ 576px	`col-sm-*`	Mobile paysage
MD (Medium)	≥ 768px	`col-md-*`	Tablette
LG (Large)	≥ 992px	`col-lg-*`	Laptop
XL (Extra Large)	≥ 1200px	`col-xl-*`	Desktop
XXL	≥ 1400px	`col-xxl-*`	Écrans larges

💡 Approche Mobile-First avec Bootstrap

Bootstrap utilise l'approche mobile-first. Les classes sans suffixe (juste col-*) s'appliquent à tous les écrans, puis on surcharge avec des breakpoints plus larges :

<div class="row">
  <!-- Mobile: 12 colonnes (100%) | Desktop: 6 colonnes (50%) -->
  <div class="col-12 col-lg-6">...</div>
  
  <!-- Mobile: 6 colonnes (50%) | Tablette: 4 colonnes (33%) -->
  <div class="col-6 col-md-4">...</div>
</div>

🔧 Unités CSS relatives essentielles

%

Pourcentage du parent. Base des grilles fluides.

width: 50%;

vw / vh

Viewport width/height. 1vw = 1% de la largeur écran.

width: 100vw;

em

Relatif à la taille de police du parent.

padding: 2em;

rem

Relatif à la taille de police racine (html).

font-size: 1.5rem;

📏 Gestion des espacements (Gutters)

Bootstrap fournit des classes utilitaires pour les espacements entre colonnes :

gx-* : Espacement horizontal (gutter-x)
gy-* : Espacement vertical (gutter-y)
g-* : Espacement des deux côtés
Valeurs : 0, 1, 2, 3, 4, 5 (de 0 à 3rem)

<div class="row g-3">...</div>

🆚 Flexbox vs CSS Grid

Flexbox

Usage : Alignement 1D (ligne OU colonne)

Centrer verticalement
Distribution espace
Navbar, cards

CSS Grid

Usage : Layouts 2D (ligne ET colonne)

Grilles complexes
Templates de page
Dashboards

📝 Exercice pratique 2.1

Créez une grille de 4 cards qui passe de 1 colonne (mobile) à 2 colonnes (tablette) puis 4 colonnes (desktop). Utilisez Bootstrap ou CSS Grid.

Voir la solution → 🧠 Testez vos connaissances →

Durée : 60 min 1 exercice + 1 quiz

Les media queries sont le cœur technique du responsive design. Elles permettent d'appliquer des styles CSS conditionnels selon les caractéristiques de l'appareil, créant ainsi des expériences adaptées à chaque contexte.

🔧 Syntaxe complète des Media Queries

/* Syntaxe de base */
@media (condition) {
  /* styles à appliquer */
}

/* Exemples concrets */
@media (min-width: 768px) { /* Tablette et + */ }
@media (max-width: 767px) { /* Mobile uniquement */ }
@media (min-width: 768px) and (max-width: 991px) { /* Tablette uniquement */ }

⚔️ Mobile-First vs Desktop-First

Mobile-First ⭐ Recommandé

Commencer par le mobile, ajouter pour les grands écrans.

@media (min-width: 768px) { ... }

✅ Plus performant
✅ Priorité au contenu essentiel
✅ Approche progressive

Desktop-First

Commencer par desktop, retirer pour mobile.

@media (max-width: 767px) { ... }

⚠️ Moins performant
⚠️ Approche régressive
⚠️ Plus complexe à maintenir

📱 Breakpoints standards 2024

Nom	Breakpoint	Devices ciblés	Usage Bootstrap
XS	< 576px	Mobiles portrait	`col-*`
SM	≥ 576px	Mobiles paysage	`col-sm-*`
MD	≥ 768px	Tablettes portrait	`col-md-*`
LG	≥ 992px	Tablettes paysage / Laptops	`col-lg-*`
XL	≥ 1200px	Desktops	`col-xl-*`
XXL	≥ 1400px	Écrans larges	`col-xxl-*`

🔄 Media Queries avancées

@media (orientation: portrait) { ... }

Utile pour les tablettes et les vidéos plein écran.

@media (hover: hover) { /* desktop */ }
@media (hover: none) { /* touch devices */ }

Différencier les appareils tactiles des desktop.

@media (prefers-color-scheme: dark) { ... }

Adapter le thème selon les préférences système de l'utilisateur.

@media (576px <= width <= 991px) { ... }

Nouvelle syntaxe CSS4 pour cibler une plage précise. Support moderne.

💡 Bonnes pratiques

Utilisez des breakpoints de contenu, pas de devices : Adaptez quand le layout casse, pas à des tailles d'appareils spécifiques.
Limitez le nombre de breakpoints : 2-3 suffisent généralement.
Testez sur de vrais appareils : Les émulateurs ne remplacent pas le test réel.
Commentez vos media queries : Indiquez ce qu'elles corrigent pour la maintenance.

📐 Exemple pratique complet

/* Base mobile (mobile-first) */
.card {
  width: 100%;
  margin-bottom: 1rem;
}

/* Tablette */
@media (min-width: 768px) {
  .card {
    width: 48%;
    float: left;
    margin-right: 4%;
  }
  .card:nth-child(2n) {
    margin-right: 0;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .card {
    width: 32%;
    margin-right: 2%;
  }
  .card:nth-child(2n) {
    margin-right: 2%;
  }
  .card:nth-child(3n) {
    margin-right: 0;
  }
}

📝 Exercice pratique 3.1

Créez une navbar responsive avec un menu hamburger sur mobile et les liens affichés sur desktop. Utilisez les breakpoints Bootstrap ou des media queries CSS.

Voir la solution → 🧠 Testez vos connaissances →

Durée : 50 min 1 exercice + 1 quiz

Les images et médias représentent souvent plus de 60% du poids d'une page web. Leur optimisation responsive est cruciale pour les performances et l'expérience utilisateur sur mobile.

🎯 La règle d'or des images responsives

img {
  max-width: 100%;   /* L'image ne dépasse jamais son conteneur */
  height: auto;      /* Les proportions sont conservées */
  display: block;    /* Élimine l'espace sous l'image */
}

⚠️ Sans max-width: 100%, une image de 3000px de large créera un scroll horizontal sur mobile et détruira votre layout responsive !

📐 Gestion des ratios d'aspect

Pour éviter les décalages de layout (CLS - Cumulative Layout Shift), fixez les ratios d'aspect :

16:9

Vidéos, hero sections

aspect-ratio: 16/9;

4:3

Photos classiques

aspect-ratio: 4/3;

1:1

Avatars, logos

aspect-ratio: 1/1;

🖼️ Images adaptatives avec srcset

Servez différentes tailles d'images selon l'écran pour optimiser le chargement :

<img srcset="
  photo-320.jpg 320w,
  photo-768.jpg 768w,
  photo-1200.jpg 1200w"
  sizes="
  (max-width: 600px) 100vw,
  (max-width: 1000px) 50vw,
  33vw"
  src="photo-1200.jpg"
  alt="Description">

srcset : Liste des images avec leur largeur (w) ou densité (x)
sizes : Indique au navigateur l'espace que l'image occupera
src : Fallback pour les anciens navigateurs

🚀 Formats d'image modernes

Format	Taille vs JPEG	Transparence	Support
WebP ⭐	-25% à -35%	✅ Oui	95%+ (2024)
AVIF	-50%	✅ Oui	85% (croissant)
JPEG	Référence	❌ Non	100%
PNG	+50% à +200%	✅ Oui	100%

Fallback avec picture element :

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

⏳ Lazy Loading natif

Chargez les images uniquement quand elles entrent dans la viewport :

✅ Lazy (différé)

loading="lazy"

Pour les images sous la ligne de flottaison. Améliore LCP et économise data.

⚡ Eager (immédiat)

loading="eager"

Pour les images hero/above-the-fold. Charge immédiatement.

🎥 Vidéos et iframes responsives

<video controls preload="metadata" loading="lazy">

    <source src="video.mp4" type="video/mp4">

</video>

Technique du ratio padding :

.video-container {

    position: relative;

    padding-bottom: 56.25%; /* 16:9 */

    height: 0;

    overflow: hidden;

}


.video-container iframe {

    position: absolute;

    top: 0; left: 0;

    width: 100%; height: 100%;

}

💡 Checklist optimisation images

✅ Redimensionnez : Ne servez jamais une image plus grande que nécessaire
✅ Compressez : Utilisez WebP avec fallback JPEG
✅ Lazy load : Toutes les images below-the-fold
✅ Dimensions : Spécifiez width/height pour éviter CLS
✅ CDN : Utilisez un service d'optimisation (Cloudinary, Imgix)
✅ Art direction : picture + source media pour crop différents

📊 Impact performance : Une image non optimisée peut représenter 70% du poids d'une page mobile. Avec les bonnes pratiques ci-dessus, vous pouvez réduire de 50-80% le temps de chargement.

📝 Exercice pratique 4.1

Créez une galerie d'images responsive où les images s'adaptent sans déformation. Ajoutez le lazy loading et des ratios d'aspect fixes.

Voir la solution → 🧠 Testez vos connaissances →

Durée : 40 min 1 exercice + 1 quiz

Bootstrap 5 est le framework CSS le plus populaire au monde, utilisé par plus de 20 millions de sites. Il permet de créer des interfaces responsive professionnelles en un temps record grâce à son système de grille robuste et ses composants prêts à l'emploi.

🚀 Pourquoi choisir Bootstrap 5 ?

⚡

Rapide

Prototypez en heures, pas en jours

📱

Responsive

Mobile-first par défaut

🎨

Consistent

Design uniforme garanti

🔧

Customizable

Sass variables faciles

📦 Installation de Bootstrap 5

<!-- CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">


<!-- JS avec Popper -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

npm install bootstrap@5.3.3

Puis importez dans votre Sass/JS.

🎯 Système de grille Bootstrap - Rappel

Container → Row → Col

<div class="container">           <!-- Conteneur centré avec max-width -->
  <div class="row">               <!-- Ligne flexbox -->
    <div class="col-md-6">...</div>  <!-- Colonne 50% sur md+ -->
    <div class="col-md-6">...</div>  <!-- Colonne 50% sur md+ -->
  </div>
</div>

.container : Max-width fixe (responsive), centré
.container-fluid : 100% width tout le temps
.row : Display flex avec gutters négatifs
.col-* : Divise en 12 colonnes égales

🧰 Composants essentiels Bootstrap 5

Navigation

navbar, navbar-expand-lg, navbar-dark

Responsive avec hamburger automatique

Cards

card, card-body, card-header, card-footer

Conteneur flexible avec header/body/footer

Boutons

btn, btn-primary, btn-lg, btn-outline-*

8 variants de couleur, 3 tailles

Formulaires

form-control, form-label, input-group

Styles cohérents pour tous les inputs

📏 Utilitaires de spacing

Classes puissantes pour gérer les marges et paddings sans écrire de CSS :

Syntaxe : `{property}{sides}-{size}`

Property : m (margin) ou p (padding)
Sides : t (top), b (bottom), s (start/left), e (end/right), x (horizontal), y (vertical), blank (4 côtés)
Size : 0 à 5 (0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem), ou auto

mt-3
margin-top: 1rem

px-4
padding-left/right: 1.5rem

mb-auto
margin-bottom: auto

p-0
padding: 0

🎨 Classes utilitaires display & flexbox

Classe	Effet	Responsive
`d-none`	display: none	`d-md-block`, `d-lg-flex`...
`d-flex`	display: flex	Oui
`justify-content-center`	Centre horizontalement	Oui (ex: `justify-content-md-between`)
`align-items-center`	Centre verticalement	Oui
`text-center`	text-align: center	Oui
`w-100`, `h-100`	width/height: 100%	Non

🎭 Personnalisation avec Sass (optionnel)

Bootstrap 5 est entièrement personnalisable via ses variables Sass :

// Custom variables
$primary: #007bff;
$enable-shadows: true;
$enable-gradients: true;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

⚡ Bootstrap 5 vs Bootstrap 4 - Changements majeurs

✅ jQuery supprimé : Plus besoin de jQuery, JavaScript vanilla pur
✅ API utilitaires étendue : Générez vos propres classes responsive
✅ Icones Bootstrap : Bibliothèque d'icônes SVG gratuite intégrée
✅ Form améliorés : Layout plus flexible, states visuels améliorés
✅ XXL breakpoint ajouté : Support des écrans ultra-larges (≥1400px)
✅ Support RTL natif : Right-to-left languages support

📚 Documentation officielle : getbootstrap.com/docs/5.3/ - La référence complète avec exemples interactifs.

📝 Exercice pratique 5.1

Créez une landing page complète avec hero section, features cards, pricing table et footer. Utilisez uniquement des classes Bootstrap 5.

Voir la solution → 🧠 Testez vos connaissances →

Durée : 90 min 1 exercice + 1 quiz

Le Cours RWD

Programme complet

📱 Module 1 : Introduction au RWD

📚 Historique du web responsive

📱🔍 Exemple interactif : Layout responsive

Code HTML :

🏛️ Les trois piliers du RWD

1. Grilles fluides (Fluid Grids)

2. Media Queries

3. Images & Médias flexibles

⚖️ Mobile-first vs Desktop-first

🔧 La balise Meta Viewport - ESSENTIELLE

📊 Statistiques et contexte (2024)

58%

3.8Mds

📝 Exercice pratique 1.1

🎨 Module 2 : Grilles fluides et layout

📐 Pourquoi une grille de 12 colonnes ?

🎯 Le système de grille Bootstrap

💡 Approche Mobile-First avec Bootstrap

🔧 Unités CSS relatives essentielles

%

vw / vh

em

rem

📏 Gestion des espacements (Gutters)

🆚 Flexbox vs CSS Grid

📝 Exercice pratique 2.1

📐 Module 3 : Media Queries essentielles

🔧 Syntaxe complète des Media Queries

⚔️ Mobile-First vs Desktop-First

📱 Breakpoints standards 2024

🔄 Media Queries avancées

Orientation (portrait / paysage)

Capacités d'interaction (hover)

Mode sombre / clair

Plages de valeurs (range syntax)

💡 Bonnes pratiques

📐 Exemple pratique complet

📝 Exercice pratique 3.1

🖼️ Module 4 : Images et médias flexibles

🎯 La règle d'or des images responsives

📐 Gestion des ratios d'aspect

16:9

4:3

1:1

🖼️ Images adaptatives avec srcset

🚀 Formats d'image modernes

Fallback avec picture element :

⏳ Lazy Loading natif

✅ Lazy (différé)

⚡ Eager (immédiat)

🎥 Vidéos et iframes responsives

Vidéo HTML5 responsive

Iframe (YouTube, Maps) responsive

💡 Checklist optimisation images

📝 Exercice pratique 4.1

⚡ Module 5 : Bootstrap 5 en pratique

🚀 Pourquoi choisir Bootstrap 5 ?

Rapide

Responsive

Consistent

Customizable

📦 Installation de Bootstrap 5

Option 1 : CDN (plus rapide)

Option 2 : NPM (pour projets avancés)

🎯 Système de grille Bootstrap - Rappel

🧰 Composants essentiels Bootstrap 5

📏 Utilitaires de spacing

Syntaxe : {property}{sides}-{size}

🎨 Classes utilitaires display & flexbox

🎭 Personnalisation avec Sass (optionnel)

⚡ Bootstrap 5 vs Bootstrap 4 - Changements majeurs

📝 Exercice pratique 5.1

Syntaxe : `{property}{sides}-{size}`