La prolifération des interfaces ne simplifie pas le travail d’ergonomie et de web design. Encore moins celui de l’intégrationHTML, qui « organise » des blocs dans un schéma souvent figé.
La solution à des affichages 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.
Jeu de briques
Snake
Pacman
Bubble