Effet CSS | #1 Rollover des images

Les gens, je passe en coup de vent ! Je voulais juste vous faire un coucou (heeeyyyyy !) et vous parler effet CSS et nouvelle refonte spontanée d’un emailing (j’ai essayé la combustion mais c’est plus compliqué…Combustion… Spontanée… Poin poin poin).

Aujourd’hui, il s’agit d’un email de la marque Zadig et Voltaire. Alors niveau refonte, en vérité je vous le dis, il n’y a pas beaucoup de changement, autant être honnête ! Je trouvais le design de l’email déjà bien sympathique, j’ai donc seulement passé la totalité des textes en HTML, et réduit la largeur de l’email de 684 pixels à 600 pixels. Trois fois rien.

Par contre, j’en ai profité pour tester un effet CSS que je souhaitais depuis longtemps implémenter dans une campagne. Schématisons : je me suis aperçu que nombre de produits présentés dans des newsletters (pas forcément Zadig et Voltaire d’ailleurs, mais bon, là c’est eux… J’y suis pour rien, c’est le hasard, mais le hasard fait bien les choses n’est-ce pas ?) méritaient parfois d’avoir quelques visuels supplémentaires pour ajouter de l’intérêt au produit en question.

En fait, c’est tout simplement ce que propose déjà aujourd’hui la plupart des sites e-commerce. Mais siiiiiiiii, vous savez, ce système où on peut admirer un produit sous toutes ses coutures : recto, verso, ouvert, fermé, angle à 180°, cosinus, Pythagore…

Il y a quelques mois de cela, un article d’Emailonacid avait titillé ma curiosité sur la possibilité de proposer le même type d’effet « rollover » au sein d’un email. C’est l’occasion ou jamais de tester !

« Life is always a test. »

Hershel, The Walking Dead

Les produits mis en avant dans la campagne d’origine de Zadig et Voltaire ont justement plusieurs visuels attitrés sur le site de la marque. J’ai donc expérimenté la méthode d’Emailonacid : comme le spécifie leur article, le support de cet effet est assez faible : Gmail Chrome Windows, Gmail Firefox Windows, Gmail Microsoft Edge Windows, Yahoo Mail ! Chrome Windows,  Yahoo Mail ! Firefox Windows, Yahoo Mail ! Microsoft Edge Windows, AOL, Thunderbird, Apple Mail (et apparemment certaines versions d’Outlook.com, mais ça je n’ai pas pu vérifier).

Mais c’est toujours bon à prendre, hein copain ? Car ces supports proposeront une autre expérience utilisateur, et ce n’est pas négligeable ! En soit, cela ne gêne pas la compréhension de l’email et ne déforme en aucun cas son rendu.

De plus, ces visuels supplémentaires ne sont pas indispensables. Ce n’est donc pas dramatique s’ils n’apparaissent pas sur la majorité des webmails et logiciels de messagerie. Alors pourquoi s’en priver ? En plus, ça va vraiment vite à mettre en place ! Pour voir ce que ça donne (parce que quand même, ça envoie du rêve !), rendez-vous ici !

J’en ai profité pour ajouter aussi des petits liens de partage Twitter spécifiques aux trois produits. Aaahhhh j’suis taquin, j’suis taquin ! Je déplore souvent la possibilité de partager directement un article ou un produit directement depuis la newsletter, et je pense que cela pénalise fortement les marques (enfin ce n’est que mon avis bien sûr, et mon avis ne regarde que moi). C’était l’occasion ou jamais de tester le principe : à chaque produit, un « share on twitter » (Twitter n’étant qu’un exemple) : au clic, on obtient une fenêtre de tweet qui s’ouvre avec un texte prérenseigné et l’url du produit concerné. Perso, je pense que c’est toujours bon à prendre et ça ne prend, là-aussi, pas beaucoup de temps à développer.

Pour le reste de l’email, pas vraiment de nouveautés, juste des petits ajustements : l’email devient full reponsive et le gif n’est plus présent… Mais ça c’est juste parce que j’avais la flemme de le récupérer. Donc rien de foufou, mais comme je vous l’ai dit en début de mail. Je passe en coup de vent et je voudrais pas abuser de votre temps ! Bisous !

PS : Si vous voulez récupérer le code de cet article, faites-vous plaisir ! Et n’hésitez pas à partager autour de vous, à tout #emailmarketer ou #emailgeek qui se respecte !