Le design réactif n’est pas une collection de captures d’écran d’ordinateurs de bureau, de tablettes et de mobiles. Il s'agit d'un système qui maintient le contenu compréhensible et les contrôles utilisables sur toute la plage continue entre ces captures d'écran.

Vérifiez d'abord la hiérarchie du contenu

Lorsque les colonnes s'empilent, l'ordre des sources devient visible. Confirmez que les titres introduisent toujours le contenu correct, que le texte de support reste à proximité de l'élément qu'il explique et que les actions principales apparaissent avant les détails secondaires.

Supprimez toute dépendance au survol seul. La navigation, les actions de carte, les info-bulles et les légendes d'images nécessitent également un chemin tactile et un chemin de clavier clair.

Texte lisibleMesure confortable et type de fluide
Commandes tactilesDes objectifs généreux avec des retours visibles
Contenu flexiblePas d'écrêtage, de collision ou de débordement forcé
MouvementDéterminé, performant et réductible

Réviser la typographie et l'espacement en tant que système

Le texte ne doit pas simplement se réduire à un point d'arrêt. Utilisez des plages fluides le cas échéant, protégez les longueurs de ligne lisibles et confirmez que les mots longs, les adresses e-mail, les étiquettes de navigation et les textes traduits peuvent être renvoyés à la ligne sans casser la mise en page.

L'espacement a également besoin de relations. Le remplissage des sections, les espaces entre les cartes, les marges de titre et le rythme du formulaire devraient devenir plus compacts ensemble. Des réductions ponctuelles aléatoires créent une page qui semble compressée plutôt que repensée.

Testez les largeurs peu pratiques

Des problèmes apparaissent souvent entre les points d'arrêt nommés. Faites glisser la fenêtre lentement et observez le moment où un titre s'affiche, un libellé de bouton se clipse ou une grille devient inconfortable.

Concevoir avec des requêtes de conteneur, pas seulement des points d'arrêt de fenêtre

Un point d'arrêt de fenêtre répond à une question : quelle est la largeur de la fenêtre du navigateur ? Il ne peut pas répondre à une question plus utile : de combien d’espace dispose réellement ce composant spécifique ? Une carte placée dans une grille à trois colonnes et la même carte placée dans une barre latérale étroite nécessitent des dispositions internes différentes, même avec exactement la même largeur d'écran.

Les requêtes de conteneur permettent à un composant de répondre à la taille de son propre élément conteneur au lieu de la page dans son ensemble. Cela supprime toute une catégorie de logique de point d'arrêt dupliquée et de remplacements ponctuels pour les composants qui sont réutilisés dans plusieurs mises en page, ce qui représente la plupart d'entre eux dans tout système de conception réel.

CartesMême composant, largeurs de grille différentes
Barres latérales et widgetsRéutilisé dans les fentes étroites et larges
Systèmes de conceptionUne définition de composant au lieu de plusieurs variantes
AssistanceBien pris en charge dans les principaux navigateurs actuels

Les requêtes de conteneur ne remplacent pas les points d'arrêt au niveau de la fenêtre d'affichage ; Les décisions de mise en page au niveau de la page, comme le réduction de la navigation, appartiennent toujours à la fenêtre d'affichage. Ils constituent un complément, idéal lorsqu'un composant doit se comporter différemment en fonction de l'endroit où il est placé plutôt que de la largeur de la fenêtre.

Rendre chaque interaction confortable

  • Gardez les cibles tactiles suffisamment grandes pour pouvoir être sélectionnées sans précision et laissez un espace libre entre les actions voisines.
  • Affichez visiblement les états d'appui, de mise au point, de chargement, de réussite et d'erreur au lieu de vous fier uniquement à la couleur.
  • Gardez les étiquettes de formulaire présentes, choisissez les types de saisie appropriés et empêchez les éléments fixes de recouvrir le clavier ou le bouton d'envoi.
  • Verrouillez le défilement en arrière-plan lorsqu'un menu modal ou mobile est ouvert, puis restaurez la position de défilement précédente à la fermeture.

Donnez aux formulaires leur propre pass réactif

Les formulaires sont ceux où les oublis réactifs coûtent le plus cher, car ils se situent juste au point de conversion. Quelques détails spécifiques aux mobiles sont faciles à manquer lors d'un examen sur ordinateur, mais frustrants en pratique sur un téléphone.

  • Conservez la taille de la police d’entrée à 16 px ou plus. Un texte plus petit déclenche un zoom automatique sur iOS Safari qui perturbe le reste de la mise en page.
  • Définissez le bon type de saisie et la saisie semi-automatique. Les champs e-mail, téléphone et numérique doivent déclencher le clavier correspondant, et les attributs de saisie semi-automatique enregistrent une véritable saisie sur un téléphone.
  • Évitez les mises en page à plusieurs colonnes sur de petits écrans. Les champs côte à côte qui semblaient bien rangés sur le bureau deviennent souvent à l'étroit ou forcent le défilement horizontal sur mobile.
  • Réservez de l'espace pour les messages d'erreur. Le texte de validation qui apparaît après la soumission ne doit pas déplacer le contenu ; réservez l'espace à l'avance pour que la mise en page ne saute pas.
  • Regardez les boutons de soumission fixes près du clavier. Une barre d'action collante peut se retrouver cachée derrière le clavier à l'écran sur certains appareils ; testez-le avec le clavier réellement ouvert, et ne supposez pas simplement qu'il est visible.

Testez ensemble les médias, le mouvement et les performances

Les images nécessitent des recadrages intentionnels à différents rapports hauteur/largeur. Les vidéos ne doivent pas forcer des téléchargements inattendus, le contenu intégré a besoin d'un conteneur réactif et les supports décoratifs ne doivent jamais pousser le contenu principal en dessous d'une attente inutile.

L'animation doit être testée sur du matériel mobile réel. Préférez la transformation et l’opacité, réduisez le travail en dehors de la fenêtre d’affichage et offrez une expérience de mouvement réduit. Un prototype de bureau fluide ne prouve pas que le même effet soit produit sur un téléphone.

Terminez avec une assurance qualité réelle sur les appareils

Examinez sur une petite largeur de téléphone, une grande largeur de téléphone, des tailles de tablette portrait et paysage et au moins une taille d'ordinateur de bureau. Testez ensuite la navigation au clavier, le texte zoomé, la réduction des mouvements, les conditions de réseau lentes et le chrome du navigateur réel sur iOS et Android.

L’objectif n’est pas la similitude pixel pour pixel. Il s'agit d'une hiérarchie cohérente, d'une confiance et d'une facilité d'utilisation partout où le contenu est rencontré.