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 :
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 :
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)
Sympa comme tout
il me tarde de lire les commentaires sur le renouveau de web critiquant l’animation qui n’apporte rien, les temps de chargement avec preloaders … ça me rappelle quelque chose
En passant, le dernier lien est un cauchemard à utiliser sur un ipad, ça lague à mort
Je parie que l’html5 va se voir reprocher les mêmes choses que flash … et le fait que ce ne soit pas propriétaire et compatible w3c ne me consolera pas
@ switcherdav > Effectivement le risque de dérive est grand et il faut nous attendre à une vague de dérapages et autres immondices. Masi l’innovation a un prix et lorsque je regarde la qualité moyenne des usages de Flash par rapport au siècle dernier, je suis confiant quand à la capacité du marché à s’autoréguler.
Mais comme toujours, le problème n’est pas l’outil masi l’usage que l’on en fait.
Merci pour la citation ! L’un des grands avantages est que le site en question est visible sur mobile alors qu’une version Full Flash ne le serait pas…
Je m’étonne un peu de ton affirmation selon laquelle “cette mise en page ne sert strictement à rien”. Est-ce que l’expérience utilisateur et le caractère ludique d’un site ne serviraient à rien ? ;-)
pour le site “cascade” on est un peu au niveau Zéro de l’animation… c’est un effet de fade Out + fade in et rien que pour celà, on a droit à un timer pour nous faire patienter…
Pas convaincu
@ Chob > Ce que je voulais dire c’est que la mise en scène des contenus n’a aucune valeur fonctionnelle, mais plutôt émotionnelle.
@ Frédéric VAVRILLE > Pas tout à fiat le niveau 0, mais plutôt le niveau 1. Et si ça peut être fait avec des technos standards et un code source propre alors c’est un grand progrès, non ?