Introduction : concevoir pour tous les écrans
Un site peut être agréable à consulter sur un grand écran et difficile à utiliser sur un smartphone : texte trop petit, boutons impossibles à viser, menus encombrants ou contenu qui déborde. Le responsive design consiste à organiser les pages pour qu’elles restent lisibles et pratiques quelle que soit la taille de l’écran.
Durant ces deux jours, vous apprendrez à observer les besoins des utilisateurs, à structurer une mise en page flexible et à adapter progressivement les composants d’une page. Les notions sont expliquées avec des exemples concrets, puis mises en pratique dans des exercices guidés. L’objectif n’est pas d’obtenir une page simplement réduite sur mobile, mais de proposer une expérience cohérente sur chaque appareil.
Module 1 : comprendre les usages et les contraintes des écrans
Écran, contexte et expérience utilisateur
Vous découvrirez pourquoi la taille de l’écran ne suffit pas à déterminer la manière dont une page sera consultée. Une personne peut naviguer au doigt dans les transports, utiliser une tablette pour comparer des offres ou consulter un site sur ordinateur pour effectuer une tâche longue. Ces contextes influencent la taille des éléments, la quantité d’information visible et la facilité de navigation.
Nous repérerons les problèmes fréquents : défilement horizontal, textes difficiles à lire, zones tactiles trop petites et contenu essentiel relégué trop bas. Vous apprendrez à examiner une page en vous posant les bonnes questions : quelle action doit être facile à trouver ? Quelles informations sont prioritaires ? La navigation reste-t-elle compréhensible ?
Exemple et exercice pratique
À partir d’une page de présentation d’un service, vous comparerez les besoins d’une personne sur smartphone et sur ordinateur. Vous dresserez une courte liste des difficultés d’usage possibles et proposerez les trois améliorations les plus importantes à apporter à la version mobile.
Module 2 : poser les bases d’une approche mobile-first
Partir du contenu essentiel
Vous apprendrez à commencer la conception par les petits écrans, où l’espace disponible oblige à clarifier les priorités. Cette approche, appelée mobile-first, aide à éviter les pages surchargées et les adaptations réalisées trop tard. Elle ne consiste pas à ignorer les grands écrans : on enrichit ensuite la mise en page lorsque l’espace le permet.
Nous verrons comment ordonner les blocs, simplifier les menus et mettre en évidence l’action principale. Vous identifierez également les éléments qui peuvent changer de position ou de présentation selon l’écran, sans perdre leur sens. Par exemple, une fiche produit peut afficher d’abord le nom, le prix et le bouton d’achat sur mobile, puis présenter davantage d’informations côte à côte sur un ordinateur.
Exemple et exercice pratique
Vous recevrez le contenu d’une page d’accueil comprenant un titre, un texte, une image, plusieurs liens et un formulaire. Vous classerez ces éléments par priorité, puis dessinerez une version mobile simple en indiquant leur ordre de lecture et l’action que le visiteur doit repérer en premier.
Module 3 : créer des mises en page flexibles en CSS
Largeurs, espacements et organisation
Vous découvrirez comment éviter qu’une page soit figée à une seule largeur. Le module aborde les largeurs fluides, les limites de largeur pour préserver le confort de lecture, les marges et les espacements qui s’adaptent. Vous travaillerez aussi les principes de mise en page avec Flexbox et CSS Grid, afin d’organiser des éléments en ligne ou en grille selon l’espace disponible.
Les exemples porteront sur des situations courantes : une rangée de cartes qui passe sur plusieurs lignes, un contenu qui reste centré sur grand écran ou une image qui ne dépasse pas de son conteneur. Vous apprendrez à choisir une solution simple et à comprendre pourquoi une mise en page rigide crée des problèmes sur certains appareils.
Exemple et exercice pratique
À partir d’une liste de cartes de services, vous réaliserez une mise en page qui s’organise en une colonne sur petit écran et en plusieurs colonnes lorsque l’espace le permet. Vous vérifierez que les cartes conservent une largeur lisible et que les espacements ne deviennent ni trop serrés ni excessifs.
Module 4 : adapter le contenu et les composants avec les points de rupture
Choisir quand la mise en page évolue
Les points de rupture, ou breakpoints, permettent de modifier une présentation lorsque la largeur disponible ne suffit plus. Vous apprendrez à les choisir en observant le contenu plutôt qu’en vous limitant à une liste d’appareils. Si un menu devient difficile à parcourir ou si une grille de cartes se tasse, c’est le signe qu’une adaptation peut être nécessaire.
Nous verrons comment les règles CSS conditionnelles, notamment les media queries, peuvent faire évoluer une navigation, une grille ou la taille des textes. Vous étudierez aussi les images et les contenus visuels : une image doit s’intégrer au conteneur sans déformation et rester pertinente sur mobile. L’adaptation doit conserver une hiérarchie claire, sans supprimer à la légère une information utile.
Exemple et exercice pratique
Vous partirez d’un menu horizontal et d’une grille de contenus. En testant plusieurs largeurs, vous déterminerez à quel moment leur présentation ne fonctionne plus. Vous proposerez ensuite une adaptation en CSS et expliquerez les indices qui justifient vos choix de points de rupture.
Module 5 : tester, corriger et livrer une page responsive
Une vérification sur plusieurs formats
Une page responsive ne se valide pas en vérifiant uniquement deux tailles prédéfinies. Vous apprendrez à redimensionner progressivement la fenêtre, à utiliser les outils de développement du navigateur et à contrôler les zones importantes : navigation, formulaire, images, titres et boutons. Le test doit aussi porter sur l’usage : peut-on lire, comprendre et effectuer l’action attendue sans difficulté ?
Vous établirez une méthode de contrôle pour repérer les débordements, les chevauchements, les textes trop longs et les éléments tactiles peu pratiques. Vous verrez comment corriger les problèmes en remontant à leur cause, plutôt qu’en ajoutant des ajustements ponctuels qui rendent le code difficile à maintenir. Une courte vérification sur des appareils réels peut compléter les tests effectués dans le navigateur.
Exemple et exercice pratique
Vous testerez la page construite pendant la formation à plusieurs largeurs. À l’aide d’une liste de contrôle, vous noterez les anomalies, corrigerez les plus importantes et présenterez les choix effectués. L’exercice vous permettra de repartir avec une méthode réutilisable sur vos propres projets.
À retenir
Un bon responsive design commence par le contenu et les besoins des utilisateurs, puis s’appuie sur des mises en page flexibles et des adaptations testées. Il ne s’agit pas de reproduire la même page en plus petit, mais de rendre chaque information et chaque action accessibles dans le contexte de consultation.
Pour aller plus loin
Après la formation, appliquez la méthode à une page existante : observez son usage sur mobile, classez les informations par priorité, ajustez sa mise en page et testez-la à différentes largeurs. Vous pourrez ensuite approfondir les pratiques d’accessibilité, l’optimisation des images et la conception de composants réutilisables pour améliorer l’ensemble de votre site.
