Il y a quelque temps j’avais parlé d’un site institutionnel édité par Linksys (Where Life Connects qui n’est plus en ligne) qui faisait une utilisation particulièrement intéressante des transitions : Vive les transitions. Oui mais voilà, à l’époque pour réaliser ces effets de transition il fallait utiliser du Flash. Oui je sais, utiliser du Flash pour animer des blocs de texte est une drôle d’idée…
Nous sommes maintenant presque en 2011 et les choses ont beaucoup changé, notamment avec l’évolution des technologies web (HTML5, cSS3 et javascript). Il est maintenant possible de réaliser un grand nombre de raffinements graphiques et de petites animations tout en respectant les standards web (cf. CSS3 et javascript seront-elles les technologies RIA du future ?) et l’exemple que je vous propose ne fait que confirmer une tendance grandissante.
Ainsi, la brasserie Cascade propose un site à l’interface très avant-gardiste, mais n’utilisant que du javascript et des CSS3 :
La page d’accueil de Cascade Brewery
Cette page d’accueil se présente en fait comme un plan du site où chaque page est représentée par une boite. Si vous modifiez les manettes du menu, les boites se réorganisent pour faire remonter le contenu qui correspond le mieux à vos réglages :
Une page d’accueil différente pour Cascade Brewery
Dans l’absolu, je suis bien d’accord avec vous : cette mise en page ne sert strictement à rien, un plan du site plus traditionnel serait bien plus efficace. Il n’empêche, ce site peut être considéré comme un message adressé au marché. Un message qui dit : « Nous n’avons pas peur d’innover pour nous différencier, et nous pouvons le faire sans dépendre d’une solution propriétaire« .
Bon OK, je ne pense pas que leurs revendications vont jusque-là, mais ce site nous prouve que les mentalités sont petit à petit en train d’évoluer et que la déferlante HTML5 est en marche (lire à ce sujet Why We Should Start Using CSS3 and HTML5 Today et HTML5, Mozilla and the Future of the Web).
Tout ceci nous amène donc au sujet réel de cet article : la mise en scène des contenus textuels. Jusqu’à présent, les technologies standards ne remplissaient qu’une seule fonction : l’affichage. Avec l’avènement des navigateurs de nouvelle génération (dont IE9 fait partie), de nouvelles possibilités vont voir le jour en ce qui concerne l’animation et surtout les transitions. Les CSS3 et Javascript (jQuery pour l’exemple cité plus haut) permettent ainsi de réaliser des petites animations à l’ouverture des pages pour guider l’oeil et scénariser l’affichage de l’information. Ce qui nécessitait le recours à des technologies riches (en l’occurrence, Flash pour l’exemple cité en début d’article) est maintenant possible avec les standards web.
J’ai déjà eu l’occasion de m’exprimer sur ce sujet, mais je réitère mon enthousiasme et mes prédictions : 2011 va être l’année du renouveau pour les interfaces web avec la possibilité de choisir n’importe quelle typographie et de l’animer à loisir (ou du moins de faire des animations et transitions de premier niveau). Il existe quantité d’autres exemples (comme ce très beau carrousel : CSS3 Transition Demo) qui illustrent cette transition de Flash vers HTML.
Un dernier exemple pour la route ? Ben The Bodyguard.
(via Choblab)
Voir les 5 commentaires