Maybelline succombe à la mode des mini-sites verticaux en HTML5

Il y a un peu plus de 3 ans, naissait la mode des sites à défilement verticaux, popularisée notamment par Ben the Bodyguard. Cette mode allait préfigurer d’un retour spectaculaire sur le devant de la scène des réalisations en HTML qui sont aujourd’hui la norme (HTML5 se généralise pour les showrooms en ligne). L’inexorable montée en puissance des terminaux mobiles (smartphones, tablettes… qui ne peuvent afficher des contenus en Flash) explique en partie ce revirement de marché.

Aujourd’hui, cette technique de construction de site est largement répandue : les textes et images sont affichés au fur et à mesure que l’internaute fait défiler la page vers le bas, le tout, agrémenté de très belles transitions. Le procédé n’est pas neuf, mais il est toujours autant spectaculaire, surtout s’il est parfaitement exécuté. C’est le cas avec Maybelline qui vient de mettre en ligne une nouvelle campagne : The Girl With the Big Eyes.

Ce mini-site est donc composé d’une timeline à gauche de l’écran et d’un petit menu qui se déplie sur la droite. Une mention “Keep scrolling” vous incite à faire défiler la page vers le bas et à découvrir les séquences qui composent cette page. L’internaute découvre ainsi les différents chapitres de l’histoire qui est racontée, comme autant de scène dans un film.

Chaque séquence est agrémentée d’une transition et d’une animation qui permet d’afficher successivement les éléments en concentrant l’attention. Quand vous arrivez en bas de la page, vous êtes enfin exposé au produit en lui-même.

Ce n’est pas tant le contenu ou l’offre qui sont intéressants, mais plutôt la façon dont l’histoire est racontée et l’ambiance posée. Une très belle réalisation de l’agence Code & Theory dont les explications sont ici : Maybelline New York “The Girl With The Big Eyes” written by Code and Theory. Le plus intéressant dans cette histoire est que ce mini-site fonctionne très bien sur les smartphones et surtout les tablettes.

Je ne peux que me réjouir de la généralisation de l’utilisation de HTML5 dans les boutiques en ligne et mini-sites de campagne, les standards du web sont enfin utilisés à bon escient, sans avoir recours à des technologies propriétaires comme Flash. N’allez cependant pas en conclure que Flash est condamné, mais simplement que son usage sera réservé à des interfaces beaucoup plus sophistiquées. D’autant plus que l’environnement de développement Flash Professional peut maintenant être utilisé pour générer du contenu en HTML5 (Flash: the new kid on the block, all over again).