Tester en un clic si le design de votre site web est « responsive»

La problématique : la multitude des écrans

Jadis (il y a 4-5 ans), la seule problématique d’un web designer était de définir l’optimisation d’un site web pour la profondeur d’écran : 800*600 ou 1024*768 ? Bien sûr, il y avait également la question de la compatibilité entre les navigateurs, et notamment IE6, l’épine dans le pied (pain in the ass comme diraient les anglo-saxons). Et puis s’est ajoutée la problématique mobile, d’abord avec les téléphones, et maintenant avec les tablettes. Et la TV de salon vient complexifier le paysage. Le dilemme : faut-il créer autant de sites que de terminaux ou d’écrans ?

La solution : le responsive design

Le design adaptable ou réactif (je n’ai pas trouvé de traduction idéale) consiste à concevoir un site en assurant un affichage optimal quel que soit l’écran. Concrètement, il s’agit d’une conception fondée sur la flexibilité. L’interface est construite autour de grilles contenant un certain nombre de colonnes : la disposition des colonnes s’adapte à la taille de l’écran. Idem pour les images dont la taille et la disposition sont optimisées pour s’ajuster à l’écran. Au coeur du dispositif, on trouve les media queries : ces requêtes détectent le terminal et ses caractéristiques d’affichage pour servir la version adaptée.