Qu’est-ce qu’un « responsive Web design » : la vraie définition, celle d’Ethan Marcotte

Suite aux réactions déplacées d’un lecteur de mon article sur pourquoi les grilles « responsive » sont une mode qui passera, je me suis aperçu que le Web francophone regorge de définitions erronées ou ambigües. Qu’est-ce qu’un design « responsive » ?

Le mot « responsive » a été introduit par le Web designer Ethan Marcotte. Ethan a écrit un livre qui est en passe de devenir un monument : « Responsive Web Design ». Il en existe une version traduite en français chez les éditions Eyrolles. Je recommande chaudement la lecture de ce livre. Il est court (139 pages) et facile à lire. Au fil des pages, avec passion et humour, l’air de rien, l’auteur change (en mieux !) notre manière de voir le design Web.

Je cite le passage du livre qui nous intéresse. Voici ce qu’est un design « responsive » :

  1. Une grille de mise en page flexible,
  2. Des images et des médias flexibles,
  3. Les media queries, un module de spécification CSS 3.

« Flexible », cela veut dire « fluide » ou encore « proportionnel ».

Donc le « responsive » c’est du fluide à la sauce CSS 3.

Fluide, cela signifie que la page Web se compresse ou s’élargit selon la largeur de la fenêtre du navigateur. Rien de bien nouveau sous le soleil, en CSS 2 on pouvait déjà le faire et ce blog en est un exemple (modifiez la largeur de votre navigateur pour visualiser l’adaptation). Cependant la taille des caractères des textes ne peut pas suivre le mouvement de rétrécissement ou d’élargissement, et il y avait donc en CSS 2 une limite à l’élasticité. On définissait alors une fourchette de largeurs dans laquelle l’affichage pouvait être rendu décemment.

Les media queries de CSS 3 apportent la possibilité de définir plusieurs fourchettes. Et donc faire du « responsive », c’est faire du fluide à l’ancienne mais « plusieurs fois », dans plusieurs fourchettes différentes de largeurs. Le site d’Ethan Marcotte donné plus haut, ou encore la partie principale de ce site, sont des exemples de design « responsive ».

Donc « responsive » n’est pas synonyme de : « adapté une multitude d’écrans de mobiles, de tablettes et d’ordinateurs ». « Responsive » c’est adapté à tous ces écrans et fluide.

Voilà. Tout est dit.

Le fluide (« responsive ») n’est pas la seule manière de faire du design adapté à plusieurs largeurs d’écrans. Il reste possible de faire du design non fluide et de l’adapter, toujours grâce aux media queries, à plusieurs largeurs d’écrans. On parle alors de design moderne (à base de CSS 3), mais on ne peut plus parler de design « responsive ». Un exemple : les grilles frameless.

Maintenant que vous, lecteur, avez compris de quoi il retourne, je vous suggère de lire ma critique donnée en premier lien là-haut : pourquoi les grilles « responsive » et les frameworks CSS sont une mode qui passera.

Leave a Reply

Your email address will not be published. Required fields are marked *

Mesure anti-spam. Merci de copier le code « Qzf0qD » dans le champ ci-dessous :