Web et frontend · Débutant

Design adaptatif sans douleur

En une ligne : Commencez par le petit écran, laissez le contenu décider où il se brise, et ne designez pas pour une liste d'appareils.

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.