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

Animation & Keyframes

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:
[button color=”orange” size=”medium” link=”https://www.badsender.com/2018/10/04/livre-blanc-integration-html-email/” icon=”” target=”true”]J’ai publié un livre blanc sur l’inté HTML email[/button]

[button color=”orange” size=”medium” link=”https://agence.badsender.com/formations/formation-html-email/” icon=”” target=”true”]Je m’occupe des formations HTML pour l’email de Badsender[/button]

Related Articles

Responses

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

  1. […] Le postulat est le suivant: Quand cela est possible, créer une fausse image de fond, sans utiliser la propriété background. Pour ce faire, il faut maîtriser le principe de positionnement absolu dans un email que Mark Robbins avait tout d’abord évoqué, et que nous avions traduit en français. Foncez consulter ces liens pour assimiler le code à mettre en place. Je me suis donc mis à l’oeuvre pour tester cette technique sur un email Netflix, dans la lignée de notre précédent post 😉 […]

  2. […] consulter le fruit de mes recherches sur les fausses images de fond dans un courrier électronique, l’animation et les keyframes dans un email. N’en déplaise aux mauvaises langues qui me demanderaient si je cherche un emploi dans cette […]

  3. […] peu comme les emails pour les séries The Haunting of Hill House avec les effets d’animation CSS ou de faux background avec des éléments HTML, ou pour Maniac et le travail sur la typographie en […]