Analyse de maquettes responsive¶

Activité 2 : Analyse de maquettes responsive (25 min)¶

Format: En équipe de 2.

Apprendre à lire une interface responsive avant d'en coder une.

Trois captures d'écran de la même page (mobile / tablette / desktop).

Ouvre chacun des trois fichiers .png dans Microsoft Photos.
Pour chaque image, règle le zoom à 100% — les trois fenêtres doivent être au même niveau de zoom pour que la comparaison soit valide. Place-les côte à côte à l'écran.
Pour naviguer dans une image (monter/descendre), utilise le cliquer-glisser uniquement. ⚠️ Évite la roulette de la souris: elle modifie le zoom et fausserait la comparaison.
Examine les trois versions et réponds aux questions ci-dessous. Notes tes réponses dans un fichier Word.

1. Qu'est-ce qui change entre chaque version ? (liste au moins 5 éléments)
2. Combien de breakpoints devines-tu ? Justifie ta réponse.
3. Quelle version a été pensée en premier, selon toi ? Comment tu le sais ?
4. Pour chaque changement identifié, essaie de deviner la propriété CSS impliquée. Exemple : "La navigation passe de horizontale à verticale → probablement flex-direction: column"

Partage tes observations avec la classe. Il n'y a pas de mauvaise réponse: l'objectif est d'argumenter.