1. Choisissez la mission de la page avant de choisir sa mise en page
Commencez par les pages qui portent une tâche client ou métier : pages de service, fiches produit, formulaires de lead, réservation, saisie de compte, panier et aide. Rédigez une phrase de complétion pour chacune, par exemple : « Un visiteur pour la première fois peut comprendre ce service, voir des preuves pertinentes et demander un appel. » Si la page a plusieurs missions, décidez laquelle apparaît en premier.
Listez son contenu comme essentiel, d’appui ou optionnel. Essentiel ne signifie pas bref ; un visiteur peut avoir besoin du contexte tarifaire, des critères d’éligibilité, des détails de livraison ou d’informations de comparaison. Donnez à ce matériel un chemin clair sur la mise en page étroite. Google recommande un contenu principal équivalent sur mobile et bureau, tout en autorisant une présentation différente comme des onglets ou des accordéons.
À une largeur étroite, un collègue doit pouvoir dire ce que la page propose, qui elle aide et l’action significative suivante.
2. Rendez la base étroite complète
Démarrez par un chemin fonctionnel en colonne unique plutôt que de réduire une mise en page desktop. Utilisez des conteneurs flexibles, laissez le texte s’enrouler et incluez un paramètre viewport qui laisse le navigateur adapter la mise en page à la largeur de l’appareil. Ne bloquez pas le zoom. Vérifiez que menus, notifications, images, intégrations et erreurs de formulaire restent dans la fenêtre d’affichage ; le défilement horizontal non intentionnel au niveau de la page est normalement un défaut.
Utilisez 320 CSS pixels comme un test exigeant de reflow pour la lecture ordinaire et le contenu de tâche. WCAG 2.2 décrit la présentation de contenu vertical à cette largeur sans perte d’information ou de fonctionnalité ni défilement bidimensionnel. Une carte, un graphique ou un tableau de données peut nécessiter sa propre zone de défilement, mais cela ne justifie pas de faire défiler latéralement la page environnante.
Adaptez les images à leur conteneur et fournissez des dimensions pour que le navigateur réserve l’espace avant leur chargement.
3. Ajoutez des améliorations sans fragiliser le chemin de base
L’amélioration progressive signifie que le contenu et la fonctionnalité essentiels fonctionnent en base, tandis que les navigateurs capables et les écrans plus larges reçoivent des extras. L’adresse, les détails produit, les libellés de formulaire, l’explication du prix et le chemin de soumission ne doivent pas dépendre d’animations, de survol ou d’un script tardif. Une mise en page plus large peut ajouter un panneau de comparaison, une navigation persistante ou un filtrage plus riche sans rendre la base incomplète.
Demandez à l’implémenteur d’ajouter un point de rupture (breakpoint) quand le contenu devient écrasé ou gaspillé, pas parce qu’un appareil nommé apparaît dans une liste. Un breakpoint est simplement l’endroit où une règle de mise en page change. N’utilisez pas les mises en page étroites pour supprimer silencieusement le texte d’aide, les conditions, les avis, les métadonnées ou des détails structurés importants.
Afficher d’abord une image de galerie et une description basiques, puis ajouter le zoom ou les contrôles de swipe lorsque leurs scripts sont disponibles.
4. Concevez les contrôles pour le tactile, la clarté et la récupération
L’ergonomie tactile signifie concevoir pour les mains plutôt que pour un pointeur précis de souris. Donnez aux boutons, cases à cocher, icônes de fermeture, sélecteurs de quantité et choix de formulaire une taille et un espacement suffisants pour réduire les mauvaises touches. Étiquetez les icônes quand leur sens n’est pas évident. Ne faites pas du survol le seul moyen de révéler un prix, un sous-menu, une explication ou une action.
WCAG 2.2 inclut un critère de niveau AA de taille cible d’au moins 24 by 24 CSS pixels pour les cibles pointeur, avec des exceptions indiquées incluant l’espacement et les liens en ligne. Traitez cela comme une référence minimale, pas une garantie de confort. Les actions critiques méritent des libellés clairs, un espacement généreux et une étape de confirmation réversible. Sollicitez une revue d’accessibilité qualifiée pour les parcours à haut risque ou les déclarations formelles de conformité.
Conservez les libellés visibles, affichez des retours de validation utilisables et conservez les valeurs saisies après une erreur.
5. Traitez les médias et intégrations comme faisant partie du parcours visiteur
Décidez si chaque image est informative, persuasive ou décorative. Une image informative nécessite une alternative textuelle appropriée et un recadrage pour la mise en page étroite qui préserve le détail nécessaire. Les options d’images responsives laissent les navigateurs choisir une ressource adaptée plutôt que de faire télécharger à tous les visiteurs l’atout desktop le plus lourd. Ne laissez pas une image hero ou une vidéo masquer l’objectif de la page et l’action principale.
Inventoriez les cartes, chat, vidéo, paiement, planification, consentement et widgets d’avis. Sur un écran étroit, vérifiez leur état de chargement, la taille des contrôles, la mise en page bornée et une voie de repli pratique. Pour les paiements, l’identité ou les flux de données régulés, faites intervenir des réviseurs qualifiés en sécurité, confidentialité et conformité ; les tests visuels ne remplacent pas une évaluation de sécurité.
Enregistrez chaque composant externe, son propriétaire, sa fonction métier et le fallback approuvé s’il est lent ou en panne.
6. Testez les chemins de tâche avant la mise en production et planifiez la remédiation
Utilisez le mode responsive du navigateur tôt pour inspecter les largeurs étroite, moyenne et large. Chrome Device Mode peut approximer viewport, tactile, orientation, réseau et conditions CPU, mais Chrome le décrit comme une approximation plutôt qu’une exécution sur un appareil réel. Complétez les parcours critiques sur de vrais téléphones et navigateurs pertinents quand vous le pouvez.
Testez une tâche, pas seulement une capture d’écran : chargement à froid, navigation, soumission de formulaire invalide et valide, changement d’orientation, zoom et retour depuis un écran tiers. Enregistrez l’URL, le navigateur ou l’appareil, la tâche, le résultat attendu, le responsable et la décision de rollback. Pour des changements majeurs de template, checkout, CMS ou dépendance, mettez en scène la mise en production et préparez la restauration du parcours précédent plutôt que d’improviser sous pression.
Approuvez seulement après que la tâche critique fonctionne, que les contrôles sont utilisables, qu’il n’y a pas de défilement horizontal au niveau de la page, et que les dépendances clés ont un fallback.