Web design réactif : Etat de l’art

La prolifération des interfaces ne simplifie pas le travail d’ergonomie et de web design. Encore moins celui de l’intégration HTML, qui « organise » des blocs dans un schéma souvent figé.

La réponse au besoin d’afficher sur des interfaces multiples résidait hier encore dans la multiplication des feuilles de style : une première pour l’écran 17″, une seconde pour le mobile, une troisième pour imprimer, … Cette logique conduit à autant de feuilles de style que d’écrans et n’offre finalement pas la souplesse d’affichage que nous attendons tous de nos sites favoris. Vous savez, un peu à la manière d’une tablette tactile ou d’un ordiphone à la pomme …

Soit donc : Voici la nouvelle génération de design, le « web design réactif » ou responsive design.

Quid ?

Il s’agit pour un site de s’adapter à la taille de l’écran. Oui bon d’accord, mais so what ? Tenez, jouez avec la largeur de l’exemple suivant, vous verrez l’intelligence de la chose … A vous de jouer !

Mais comment est-ce possible ?

Ah mon brave homme, c’est hélas une technique accessible à tous, mais qui requiert cependant une certaine flexibilité : des images, des colonnes, mais aussi des contenus (y compris les menus de navigation). Le tout par un usage extensif des nouveautés de CSS3 : les media queries, des super-appels « conditionnels » à des feuilles de styles

La présentation qui va bien

Et enfin, l’inévitable « Pour en savoir plus »

Consultez la traduction française d’un article d’Ethan Marcotte sur cette technique ou bien cencore le blog Mayfield Digital.