Design responsive
Définition courte
Le design responsive signifie qu'un site web adapte sa mise en page, la taille du texte et la navigation au mobile, à la tablette et au bureau.
Le même code de page affiche une seule colonne sur mobile, deux colonnes sur tablette et une large grille sur ordinateur. Des grilles CSS flexibles et des règles liées à la largeur d'écran, appelées media queries, rendent cela possible. Images, boutons et texte s'adaptent à l'écran, si bien que le visiteur ne fait jamais défiler la page horizontalement.
Le design responsive est aujourd'hui la norme car la majorité des visiteurs arrivent depuis un mobile, et Google classe les sites d'abord selon leur apparence sur mobile.
On le confond souvent avec le design adaptatif. Le design adaptatif construit une mise en page fixe distincte pour chaque appareil, tandis que le design responsive utilise une seule mise en page flexible qui se transforme elle-même, ce qui est plus simple à maintenir.
L'erreur la plus courante consiste à concevoir la mise en page pour le bureau en premier, puis à la comprimer pour le mobile, ce qui produit des zones tactiles trop petites et des menus imbriqués maladroitement. La bonne approche est le mobile first : vous concevez d'abord pour l'écran étroit, puis ajoutez des colonnes à mesure que la largeur augmente, afin que chaque élément touché reste assez grand et suffisamment espacé.
Pourquoi c'est important
Un visiteur qui ouvre votre site sur son mobile et trouve une mise en page cassée repart aussitôt. Le design responsive évite cette perte : un seul site fonctionne sur tous les écrans, sans le coût d'un site mobile séparé à construire et à maintenir.
Exemple illustratif
Le catalogue produits d'un fabricant de revêtements de sol affiche une large grille sur ordinateur et une seule colonne sur mobile, même page, même contenu, aucune mise en page distincte à construire.
