Aller au contenu

Séance 5 : Responsive Web Design

🎯 Objectifs de la séance

À la fin de cette séance, vous serez capable de :

  • Comprendre les principes du Responsive Web Design
  • Utiliser les Media Queries pour adapter votre design
  • Créer des images flexibles et responsives
  • Concevoir des grilles fluides avec Flexbox et Grid

📚 Partie théorique

5.1 Qu'est-ce que le Responsive Web Design ?

Le Responsive Web Design (RWD) permet à un site web de s'adapter automatiquement à tous les écrans : smartphones, tablettes, ordinateurs.

"Un seul design qui s'adapte à tous les écrans"

📱 Plus de 60% du trafic web vient du mobile
💰 Meilleur SEO : Google favorise les sites mobiles
✅ Meilleure expérience utilisateur

Les 3 piliers du Responsive Web Design

  1. Media Queries : Adapter les styles selon la taille de l'écran
  2. Grilles fluides : Layouts flexibles avec Flexbox et Grid
  3. Images flexibles : Images qui s'adaptent à leur conteneur

Meta Viewport (OBLIGATOIRE)

⚠️ Sans cette balise, le responsive ne fonctionne pas sur mobile !

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site responsive</title>
</head>

Cette balise indique au navigateur mobile :
- Utiliser la largeur de l'appareil
- Ne pas zoomer par défaut

5.2 Media Queries

Les Media Queries permettent d'appliquer des styles selon les caractéristiques de l'écran.

Syntaxe

@media (condition) {
    /* Styles à appliquer */
}

Exemple simple (Mobile First)

Approche Mobile First : on définit les styles de base pour mobile, puis on adapte pour les écrans plus grands.

/* Mobile (par défaut) */
.box {
    width: 100%;
    padding: 10px;
    background: lightblue;
}

/* Tablette et plus */
@media (min-width: 768px) {
    .box {
        width: 50%;
        padding: 20px;
        background: lightcoral;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .box {
        width: 33.33%;
        padding: 30px;
        background: lightgreen;
    }
}

Autres conditions utiles

/* Largeur maximale (approche Desktop First) */
@media (max-width: 767px) {
    .box { font-size: 14px; }
}

/* Entre deux largeurs */
@media (min-width: 768px) and (max-width: 1023px) {
    .box { background: yellow; }
}

/* Orientation de l'appareil */
@media (orientation: landscape) {
    .box { flex-direction: row; }
}

@media (orientation: portrait) {
    .box { flex-direction: column; }
}

/* Préférence utilisateur pour le thème sombre */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: #ffffff;
    }
}

📚 Documentation complète : MDN - Media Queries

5.3 Grilles fluides avec Flexbox et Grid

Introduction : Flexbox vs Grid

CSS offre deux systèmes puissants pour créer des layouts responsives :

Flexbox Grid
Dimension 1D (ligne OU colonne) 2D (lignes ET colonnes)
Idéal pour Navigation, listes, alignements Layouts de page, galeries
Force Distribution d'espace, ordre flexible Contrôle précis du positionnement 
FLEXBOX (1D)                    GRID (2D)
┌─────┬─────┬─────┐             ┌─────┬─────┬─────┐
│  1  │  2  │  3  │             │  1  │  2  │  3  │
└─────┴─────┴─────┘             ├─────┼─────┼─────┤
                                │  4  │  5  │  6  │
Disposition sur 1 axe           ├─────┴─────┼─────┤
                                │     7     │  8  │
                                └───────────┴─────┘
                                Contrôle lignes ET colonnes

Le secret ? Vous pouvez les combiner ! Grid pour la structure globale, Flexbox pour les composants internes.

💡 Unités adaptées : Pour des layouts fluides, privilégiez :
- % pour les largeurs relatives
- fr (fraction) dans Grid pour répartir l'espace
- gap pour les espacements (remplace margin)
- calc() pour des calculs précis

🎮 Apprendre par la pratique

La meilleure façon d'apprendre Flexbox et Grid, c'est de jouer !

  • Flexbox Froggy (24 niveaux) : https://flexboxfroggy.com/#fr
  • Grid Garden (28 niveaux) : https://cssgridgarden.com/#fr

Ces jeux interactifs vous permettront de maîtriser toutes les propriétés de manière progressive.

📚 Guides de référence

5.4 Images flexibles

Base CSS

Les images doivent s'adapter à leur conteneur sans déborder.

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

Attribut srcset : Images adaptées à la taille d'écran

<img src="image-small.jpg"
     srcset="image-small.jpg 400w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     sizes="(min-width: 1024px) 800px,
            (min-width: 768px) 600px,
            100vw"
     alt="Description">

Explication :
- srcset : liste des images disponibles avec leur largeur réelle en pixels (w = width)
- sizes : indique au navigateur la taille d'affichage de l'image selon la taille d'écran
- Sur desktop (≥1024px) : l'image s'affichera en 800px
- Sur tablette (≥768px) : l'image s'affichera en 600px
- Sur mobile : l'image prendra toute la largeur (100vw)
- Le navigateur choisit automatiquement l'image la plus appropriée dans srcset

Balise <picture> : Contrôle précis selon les conditions

<picture>
    <source media="(min-width: 1024px)" srcset="image-large.jpg">
    <source media="(min-width: 768px)" srcset="image-medium.jpg">
    <img src="image-small.jpg" alt="Description">
</picture>

Utiliser <picture> quand vous voulez changer complètement d'image selon l'écran (recadrage différent, format différent, direction artistique...).

5.5 Techniques complémentaires

Le responsive web design évolue constamment. Voici quelques techniques modernes à explorer :

Container Queries 🆕

Adapter le style selon la taille du conteneur (et non de l'écran).

.card-wrapper {
    container-type: inline-size;
}

.card {
    padding: 1rem;
    background: lightblue;
}

/* Quand le conteneur dépasse 400px */
@container (min-width: 400px) {
    .card {
        padding: 2rem;
        background: lightcoral;
    }
}

Avantage : Le composant s'adapte à son conteneur, pas à l'écran ! Parfait pour des composants réutilisables dans différents contextes.

Fonction clamp()

Créer des tailles fluides avec des limites.

h1 {
    /* min, idéal, max */
    font-size: clamp(1.5rem, 5vw, 3rem);
}

Aspect Ratio

Maintenir un ratio d'aspect.

.video-container {
    aspect-ratio: 16 / 9;
}

.thumbnail {
    aspect-ratio: 1 / 1;  /* Carré */
}

📚 En savoir plus : MDN - Responsive Design

💻 Partie pratique

Les exercices suivants vous permettent de pratiquer les techniques essentielles du Responsive Web Design.

Exercice 6 : Card Pokémon Responsive 🎮

Exercice 7 : Navigation Pokémon Responsive 🧭

Exercice 8 : Layout avec Sidebar 📐

📝 À retenir de cette séance

✅ Meta viewport obligatoire : <meta name="viewport" content="width=device-width, initial-scale=1.0">
✅ 3 piliers : Media Queries, Grilles fluides (Flexbox/Grid), Images flexibles
✅ Mobile First : styles de base pour mobile, puis adaptation avec min-width
✅ Flexbox = 1D, parfait pour cards (column/row) et navigation (alignement)
✅ Grid = 2D, parfait pour galeries et layouts complexes
✅ repeat(auto-fit, minmax(250px, 1fr)) = grille auto-responsive
✅ grid-template-areas = définir visuellement les zones d'un layout
✅ Apprendre en jouant : Flexbox Froggy et Grid Garden !

📚 Pour aller plus loin

Guides de référence

Outils pratiques

  • Chrome DevTools : Testez différentes tailles d'écran (F12 > Toggle Device Toolbar)