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 #ZadigetVoltaire. 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.

effet css email gif01

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 ZadigetVoltaire 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 !

effet css email gif02

« 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.

effet css email zadig et voltaire

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 !

A propos de Thomas Defossez

Thomas a démarré sa carrière en tant qu'intégrateur emailing chez Experian avant de créer sa propre agence web. Aujourd’hui, Thomas a décidé de se focaliser sur l’email afin d’être un spécialiste de l’intégration HTML de ce médium. Depuis fin 2014, Thomas collabore à divers projets de l'Agence Badsender.com.

Check Also

L’intégration HTML dans les différents clients emails

Aujourd’hui, nous allons rentrer dans le détail de la conception du fichier HTML d’un email. …

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *