Aller au contenu

Cours 8: Intro au responsive

Lundi 23 mars / mercredi 25 mars

Fichier PowerPoint du cours

👩‍🏫 Exposé reponsive: Télécharger le PPT

Activité 1: Amorce: le constat du site qui casse

👩🏻‍💻 Activité 1 - 10 min

Les concepts de base

  • Définition qu'est-ce que le responsive
  • Points de rupture (breakpoints)
  • La syntaxe de base d'une requête média (media query)

Responsive

Définition: Un design responsive adapte la mise en page à la contrainte d'affichage courante, peu importe l'appareil.

Breakpoint (point de rupture)

Un breakpoint = là où ton contenu souffre

┌─────────────────────┐        ┌──────────┐
│  ● ● ●             │        │  ● ● ●   │
│  ┌───┐ ┌───┐ ┌───┐  │        │ ┌─┐┌─┐┌─┐│
│  │   │ │   │ │   │  │        │ │ ││ ││ ││
│  │   │ │   │ │   │  │  →→→   │ │ ││ ││ ││
│  │   │ │   │ │   │  │        │ │ ││ ││ ││
│  └───┘ └───┘ └───┘  │        │ └─┘└─┘└─┘│
└─────────────────────┘        └──────────┘
   ✓ Confortable                ✗ Souffrance ← ici le breakpoint

Règle : Ajoute un breakpoint quand ton contenu te le demande — jamais en ciblant un appareil.

Éviter les breakpoints arbitraires

Media query (requête média)

La syntaxe d'une media query

@media (min-width: 768px) {
  .conteneur {
    flex-direction: row;
  }
}
  • @media → Mot-clé — démarre la règle conditionnelle
  • (min-width: 768px) → Condition — s'applique SI la fenêtre est ≥ 768px
  • { ... } → Règles CSS qui s'appliquent seulement si la condition est vraie

Préparation mobile-first vs desktop-first

Mobile-first

Partir du minimum essentiel et ajouter de la complexité au fur et à mesure que l'espace augmente.

/* Mobile-first */
.nav { flex-direction: column; } /* mobile */

@media (min-width: 768px) {
  .nav { flex-direction: row; }
}

↑ On ajoute ds éléments, de l'espace etc. pour les écrans plus larges

Desktop-first

Partir de la version riche et retirer des éléments au fur et à mesure que l'espace diminue.

/* Desktop-first */
.nav { flex-direction: row; } /* desktop */

@media (max-width: 767px) {
  .nav { flex-direction: column; }
}

↑ On retire, on écrase des styles, on simplifie pour les petits écrans

min-width VS max-width

✅ Mobile-first: On part du petit, on ajoute des changements pour les écrans qui un un *min*imum d'une largeur X et +

/* Mobile-first (recommandé) */
/* Styles de base = mobile */
@media (min-width: 768px) { 
  /* ajoute, écrase les styles pour le grand */ 
}

⚠️ Desktop-first: On part du grand, on retire des éléments et on fait des changements pour les écrans qui un un *max*imum d'une largeur X et -

/* Desktop-first */
/* Styles de base = desktop */
@media (max-width: 767px) { 
  /* retire, réduit, écrase les styles pour simplifier pour le petit */ 
}

Activité 2: Analyse de maquettes responsive

👩🏻‍💻 Activité 2: analyse de 3 captures écran d'un site (mobile/tablette/desktop)

Retour et discussion en groupe-classe

Activité 3: Exercice : première media query

👩🏻‍💻 Activité 3: albums de musique

Info

Rappel concernant les exercices : il est primordial de compléter tous les exercices afin de développer les compétences visées dans ce cours.

Par ailleurs, tel que précisé au plan de cours, la complétion de l'ensemble des exercices de la session vous permet d'obtenir la note maximale de 10/10, ce qui représente 10 % de la note finale.

Activité 4: Atelier Zone-Out 🎮

  • 🟢 Niveau 1
  • 🟡 Niveau 2
  • 🔴 Niveau 3

👩🏻‍💻 Activité 4 - Atelier Zone-Out 🎮

DEVOIRS