Améliorer · Guide pratique
Recette responsive : contrôler les proportions sur mobile et desktop
Une méthode pour vérifier titres, colonnes, espaces, photos, tableaux et interactions à plusieurs largeurs.
Réponse directe
À retenir avant de commencer
Un affichage responsive demande davantage que l’absence de barre de défilement. Vérifiez la hiérarchie, la longueur des lignes, les espaces, le cadrage des photos et les tâches importantes. Testez les largeurs intermédiaires, où une grille peut rester trop dense avant de basculer en une colonne.
Construire une matrice de pages et de largeurs
Choisissez une page de chaque gabarit : accueil, service, article, catalogue, fiche et formulaire. Ajoutez les variantes difficiles : titre long, tableau large, légende développée et état d’erreur. Testez les seuils de mise en page ainsi que quelques pixels de part et d’autre.
Attribuez chaque défaut au composant partagé ou à la page. Corrigez les éléments communs puis leurs exceptions. Une correction ponctuelle sur l’accueil ne suffit pas à valider un article avec un sommaire ou une fiche avec un tableau.
Comparer le rythme et la lisibilité
Sur desktop, examinez la largeur du bloc de lecture, la place du titre et la hauteur des photos. Sur mobile, contrôlez les retours à la ligne, le rythme entre les sections et les actions qui demandent une manipulation précise.
Un grand espace peut souligner une transition ; répété après chaque paragraphe, il disperse l’information. Les crédits peuvent être secondaires, mais une condition de service doit rester facile à lire. Comparez la hiérarchie entre les titres, les textes et les légendes.
Examiner les grilles et les médias
Contrôlez les rangées avec un nombre impair de cartes. Réduisez les colonnes avant que les titres ne deviennent trop étroits. Examinez le sujet de chaque photo dans le cadrage réellement utilisé plutôt que d’imposer un format partout.
Les tableaux peuvent défiler dans leur propre conteneur lorsque leurs colonnes sont nécessaires. Ce défilement ne doit pas élargir toute la page. Une image placée au-dessus du texte doit garder des proportions raisonnables sur un grand écran.
Tester les états et conserver des preuves
Ouvrez menus et accordéons, utilisez les filtres, provoquez une erreur de formulaire et zoomez. Vérifiez le clavier et la visibilité du focus. Le chargement de la page à son état initial ne valide pas ses interactions.
Gardez la capture, la largeur, le navigateur et le résultat attendu. Après correction, reprenez le scénario et les autres pages qui utilisent le composant. Un contrôle géométrique complète la recette visuelle ; il ne remplace pas le jugement sur l’équilibre de la page.
Votre tableau pratique
| Situation | Action | Validation |
|---|---|---|
| Titre dominant | Réduire l’échelle et tester les titres longs | Hiérarchie lisible |
| Photo trop grande | Limiter ses dimensions selon l’usage | Texte accessible dans le premier écran |
| Colonnes serrées | Basculer plus tôt en deux ou une colonne | Cartes lisibles |
| Tableau large | Défilement dans un conteneur | Page à la largeur de l’écran |
Avant de passer à l’action
Cochez les points vérifiés pendant votre lecture. Les cases restent locales à cette page et ne sont pas enregistrées.
Sources et portée du guide
Révision éditoriale du guide le 4 octobre 2026. Les méthodes et exemples complémentaires sont des propositions éditoriales de l’agence.
