Les sites deviennent plus adaptatifs

Le responsive constitue la base

Les breakpoints réorganisent la page, mais l’adaptation concerne aussi la saisie, l’ordre de lecture et la quantité d’information visible. Une navigation desktop peut devenir plus ciblée sur mobile et un tableau dense demander des libellés répétés.

Commencez par les tâches prises en charge par chaque page dans des largeurs différentes. Un visiteur par téléphone peut avoir besoin d'un itinéraire, d'un prix ou d'un court formulaire de demande, tandis qu'un visiteur par ordinateur peut comparer plusieurs options. Les deux doivent recevoir les mêmes informations essentielles, mais les contrôles et les détails complémentaires peuvent être organisés en fonction de l'espace disponible et de la méthode de saisie.

Testez les téléphones étroits et larges, zoomez les ordinateurs de bureau, l'orientation du paysage et les largeurs intermédiaires où les rubriques ou l'enveloppe de navigation. Utilisez les traductions finales et les messages de validation réels. Un composant peut s'adapter à 390 pixels mais échoue à 430 parce qu'une étiquette reste sur une ligne ou une carte change le nombre de colonnes.

La priorité ne se résume pas à empiler

Prévoir le tactile, le clavier et le pointeur dans un même système de composants.

Le contenu prioritaire doit rester identifiable à toutes les tailles. Si l’action principale passe après plusieurs sections secondaires sur mobile, le parcours change même sans débordement.

Les tableaux, filtres et formulaires en plusieurs étapes méritent leurs propres décisions réactives. La réduction d'un composant du bureau masque souvent les étiquettes ou crée un défilement horizontal. Une version mobile peut répéter le contexte, regrouper des champs associés ou révéler des détails à la demande, à condition que les informations sous-jacentes et les actions disponibles restent cohérentes.

L'ordre de lecture doit rester logique lorsque les colonnes s'effondrent. Le placement visuel sur le bureau peut différer de l'ordre source, ce qui affecte les claviers et les lecteurs d'écran. Consultez la séquence DOM, le mouvement de focus et l'annonce de l'extension du contenu. Répétez les étiquettes lorsqu'une comparaison devient empilée. Une présentation mobile compacte peut cacher une explication secondaire derrière un contrôle intentionnel, mais les informations essentielles sur le prix, la portée ou l'erreur doivent rester disponibles sans geste non divulgué.

Navigation au tactile, clavier et pointeur

Conserver la hiérarchie du contenu lorsque navigation et mise en page changent.

Les cibles tactiles ont besoin d’espace, le clavier d’un ordre de focus visible et les actions au survol d’une solution alternative. Ces modes d’entrée doivent faire partie de la recette.

Les vérifications du clavier et du toucher révèlent différents échecs. Les menus doivent rester ouverts pendant que le focus les parcourt, les boîtes de dialogue doivent être fermées de manière prévisible et les contrôles ont besoin d'étiquettes qui restent compréhensibles sans survol. Tester ces comportements sur des parcours de pages complets est plus utile que de vérifier des composants isolés dans un catalogue.

La méthode d'entrée modifie la conception de l'interaction. Hover peut ajouter de la rétroaction pour les utilisateurs de pointeurs, mais elle ne peut pas être le seul moyen d'ouvrir la navigation ou de révéler les informations requises. Donnez aux commandes tactiles suffisamment de séparation, maintenir la focalisation du clavier visible et garder les menus ouverts pendant que la focalisation se déplace à travers leurs éléments.

Tester des parcours complets avec contenus et traductions réels.

Les vrais textes révèlent ce que les contenus fictifs cachent. Traductions longues, erreurs, états vides et noms de produits sont testés dans les parcours complets avant publication.

Le parcours complet est testé avec les textes définitifs sur ordinateur et mobile.

Si les coordonnées se déplacent vers le haut sur un téléphone, la version de bureau a encore besoin d'un parcours clair. Si une comparaison devient un accordéon, conservez les titres et l'état. Passez en revue les données analytiques ou supportez les données là où elles sont disponibles, puis documentez les différences délibérées. La conception adaptative fonctionne lorsque chaque présentation est utilisable et bien comprise dans le même système d'information.