Animation et keyframes dans l’email : Netflix, c’est pour toi, c’est cadeau.

Halloween approche les gens, c’est un fait!

Depuis quelques semaines, je commence à voir énooooooormément de créas passer orientées fantômes, citrouilles et tout le Saint-Frusquin! Et puis ce matin, j’ai reçu un mail de Sendinblue, avec un lien vers une campagne flippante sur Annabelle (pour La Toussaint, y a pas mieux). Là, je me suis dit que quand même, ça serait sympa que Badsender se mette aussi à proposer quelque chose pour cette période si sympathique.

Mais tant qu’à faire, autant joindre l’utile à l’agréable.

Je m’explique: Je suis abonné Netflix, et forcément, je squatte pendant 10 minutes tous les soirs pour trouver un truc à me mettre sous la dent. Et il y a de cela une dizaine de jours, je fus intrigué par la nouvelle série : « The Haunting of Hill House ». Une tuerie , vraiment (et désolé pour le mauvais jeu de mot), que le maître de l’épouvante Stephen King a saluée. Et puis je me suis dit:

« Merde, les mails Netflix, d’habitude, c’est plutôt des tueries eux-aussi, mais j’ai rien vu passer là-dessus… »

Vous en déduisez donc que ?

J’ai entrepris tout à fait d’entremêler les sujets et de faire d’une pierre six coups : en gros, je souhaiterai proposer un mail Netflix sur cette série (on est donc bien sur le thème de l’épouvante et de l’horreur) tout en passant en revue certaines techniques encore un peu hasardeuses, hésitantes, balbutiantes dans le domaine de l’email marketing. Et le 1er mail que je vous propose, mes bonnes gens, codé en un bon nombre d’heures quand même, s’essaie aux :

Animations et keyframes dans l’emailing

Vous voulez voir ce que ça donne? C’est par ici.

Et les résultats des tests me demanderez-vous? Ça tombe bien, on a un petit partage vers le Builder Litmus

Je m’attends pas à ce que le support soit terrible, mais en fait je m’en fous… C’est un peu aussi le principe des tests, des expérimentations. Le but, c’est aussi de s’éclater diantre! N’hésitez pas à faire des tests sur vos adresses mails, à en découvrir un peu plus sur le support sur périphériques physiques, c’est encore le meilleur moyen de tester. Soyons clair: l’idée n’est pas du tout de faire de la pub pour Netflix (ils ont pas besoin de ça d’ailleurs). Mais je me rends compte que le domaine des médias a un pourcentage de consultation sur mobile et iOS sans doute bien plus considérable que d’autres (c’est sans doute une fausse idée, mais c’est mon raisonnement), et dans ce cas de figure, j’estime qu’on peut tenter des choses qu’on n’ose pas plus tenter ailleurs…

Du coup, dans cette proposition, je me risque sur:

  • Une typo exotique (Roboto, de la Google Font quand même, je suis pas fou)
  • Du hover et transition sur cta (c’est léger, mais c’est bien là)
  • Du minimalisme (Je me sens Robert Morris)
  • De l’animation et des keyframes donc.
  • Des dégradés en CSS (c’est pas flag’, et pourtant!)

Donc du coup, cherchez pas un gif animé, y a pas, c’est fermé le dimanche! Netflix met justement régulièrement en tête d’email un p’tit gif animé, simulacre (pas au sens péjoratif du terme) de vidéo pour promouvoir une nouvelle série, film ou programme. Je pense qu’il faut sortir un peu des sentiers battus, et se permettre d’oser!  L’idée est de créer justement des effets simulant la vidéo, avec une seule image et des animations CSS. Allez, pour teaser quand même un peu ce que ça va donner en design, voici une petite capture:

Email Netflix - The Haunting of Hill House

Et pour spoiler, c’est parce que Steven a fait tomber la poubelle dans l’épisode 5… AAHHHH AAAAAAAAHHHHH, VA DANS LE METRO SATANAAAAAASSSSSSS!!!

Sinon, je ne rédige pas que des articles:
J’ai publié un livre blanc sur l’inté HTML email Je m’occupe des formations HTML pour l’email de Badsender

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.

Laisser un commentaire

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