Design adaptatif sans douleur
D'abord petit
Un design qui commence sur le bureau et rétrécit produit toujours des compromis ; un design qui commence sur le téléphone et grandit produit une hiérarchie claire d'importance. Sur un écran étroit, il n'y a pas de place pour ce qui n'est pas essentiel, et c'est exactement l'exercice dont toute interface a besoin.
En pratique : une colonne, une typographie lisible et des zones de toucher suffisamment grandes pour appuyer avec le pouce.
Points de rupture selon le contenu
Ne choisissez pas les points de rupture selon les modèles d'appareils — la liste change chaque année. Élargissez la fenêtre jusqu'à ce que la mise en page commence à sembler mauvaise, et placez le point là.
La plupart des mises en page modernes n'ont besoin que de deux ou trois points de rupture au total. Si vous en avez sept, vous dessinez probablement des écrans au lieu de définir un comportement.
Ce qui se casse vraiment
Les grandes tables, les images avec un ratio fixe, les longs titres hébreux qui se coupent maladroitement et les menus qui disparaissent. Chacun a une solution simple : défilement horizontal déclaré pour une table, un ratio hauteur-largeur défini et un saut de mot contrôlé.
Pour aller plus loin
Vérifiez aussi les axes oubliés : un écran très large avec des lignes trop longues à lire, un zoom à 200 % et le mode paysage sur le téléphone. Tous trois sont plus courants qu'on ne le pense, et tous trois se cassent sur des sites testés seulement à deux largeurs.