Certification Litmus et interaction dans l’email

Chers petits amis. Je vais vous compter l’histoire de Chinese Man la certification Litmus. Vous pouvez suivre avec moi dans cet article. Vous saurez que le moment est venu de tourner la page lorsque vous entendrez la clochette, comme ceci. Et maintenant, commençons…

1. Comment tout a commencé.

Nous sommes le 5 mai 2020. Litmus poste ceci :

Et mon esprit s’emballe. A cause (ou grâce, je ne sais plus très bien) du COVID-19, le #LitmusLive n’aura pas lieu cette année. Ou du moins, pas dans sa version traditionnelle. A la place, un #LitmusLiveEverywhere est annoncé, entièrement en ligne, TOTALEMENT gratuit.

Mais surtout, une certification de développeur email (payante, elle) est désormais possible ! C’est une grande annonce, et j’ai peur que mon cœur ne tienne pas la charge émotionnelle. Tout en procédant à une auto-défibrillation, j’évoque instantanément à Jonathan et à Grégory mon souhait (cher, je l’avoue) de pouvoir gagner cette précieuse timbale. Je leur ai dit : « Jonathan, Grégory, c’est l’hermine ou la caravane »… Ils m’ont dit « Banco… »

2. Quel est le déroulement de la certification.

C’est très simple. Pour obtenir la certification, il faut suivre des ateliers en direct qui vont donner aux concepteurs, développeurs et spécialistes du marketing les compétences dont ils ont besoin pour faire « évoluer leur carrière » (je n’invente rien). Ces ateliers seront mensuels et dureront deux heures chacun. Ils seront au nombre de 6 et se détaillent ainsi :

Deeemandez l’programme !

• Lundi 18 mai 2020 :
  • Marketing : Apprendre du passé pour prédire l’avenir (ou comment les spécialistes du marketing email examinent leurs campagnes, leurs performances et les interactions des abonnés pour adapter les initiatives futures en fonction des attentes des clients), par Lauren Kremer.
  • Développement : Création d’emails responsive et accessibles (ou apprendre à coder des campagnes email solides en se concentrant sur l’accessibilité, les composants modulaires, le HTML et le CSS de base et les techniques responsive qui fonctionnent sur la plus large gamme de clients de messagerie), par Jason Rodriguez.
• Lundi 15 juin 2020 :
  • Marketing : Plonger dans les mesures des emails, et les développer (ou comment trouver des indicateurs exploitables et quantifiables pour prendre des décisions commerciales, et comment raconter une histoire cohérente et donner vie aux chiffres), par Lauren Kremer.
  • Développement : Création d’emails interactifs avec HTML, CSS et AMP4email (ou comprendre les principes fondamentaux des emails interactifs, avec un aperçu du HTML et du CSS nécessaires utilisés pour les éléments interactifs courants, et comment créer des e-mails basés sur AMP et créer des solutions de secours pour les clients de messagerie plus anciens), par Jason Rodriguez.
• Lundi 20 juillet 2020 :
  • Définition des processus de collaboration inter-équipes (ou comment être plus efficaces en équipe avec l’utilisation des outils de collaboration), par Lauren Kremer.
  • Utilisation des System Design dans l’email (ou comment bien documenter l’utilisation d’un Design System et comment plaider pour son utilisation), par Jason Rodriguez.

Je ne vous cacherai pas que des sessions de 4 heures d’affilée (2 modules de 2 heures) de 16 à 20, avec un accent ricain à couper au couteau (‘nowouataïemin’!), ça peut faire peur… Heureusement, des replays étaient dispos, et v’là ma geule comment j’me régale en suivant tout particulièrement les ateliers de Jason Rodriguez quand d’autres se matent un PSG-Bayern dans un stade vide à craquer.

3. Validation des acquis

Une fois les ateliers passés arrive un mail de Jason à mon intention (C’est cool, il m’envoie des mails persos et tout, ça y est on est potes ! Ah on me fait signe qu’il s’agit d’un email générique…)

This is Jason, your instructor for the Litmus Email Designer Certification. With the three workshops under our collective belt, all we have left are the final projects and feedback!

Jason Rodriguez, mon instructeur

MERDE!!! Des « projets finaux » ? Qu’est-ce que ça signifie ? On m’avait pas prévenu de ça ? C’est obligatoire ? Deux exercices devront être réalisés, et envoyés avant le lundi 31 août, 17h00, heure locale sur la côte Est de l’Amérique du Nord.

En quoi consiste ces projets?

Très bonne question. Merci de l’avoir soumise. Il me faudra créer deux emails, suivant les critères ci-dessous. Le design, l’esthétique, le choix des images sont complètement libres, pour précision.

Email 01 – Construire un email accessible, responsive.

• Avec les composants suivants :
  • Un header et un footer.
  • Une section « majeure » avec un titre, une image, un paragraphe, et un Call to Action.
  • Une section « deux colonnes » avec des titres secondaires, des paragraphes de texte, des liens.
  • Un lien de désabo, des mentions légales RGPD, une info d’optin.
  • L’email devra être :
    • Responsive aussi bien sur mobile que Desktop.
    • Toutes les images doivent s’adapter sur mobile.
    • La section « deux colonnes » doit ne faire qu’une seule colonne sur mobile.
    • L’email doit s’afficher correctement sur Outlook sans problème de rendu majeur (utiliser, donc, la méthode Fluid-Hybrid et les tableaux fantômes si besoin).
    • Utiliser des balises sémantiques (h1, h2, p, etc.).
    • Renseigner les textes alternatifs des images.
    • Attribuer des effets au survol sur les boutons et liens.

Email 02 – Construire un email interactif simple.

• En utilisant la technique des checkbox :
  • Utiliser des boutons radio ou checkbox, labels, HTML et CSS pour afficher ou cacher du contenu.
  • Proposer un bon fallback pour les clients mail ne supportant pas l’interaction.
  • On peut donc partir sur un carrousel, un quizz, ce qu’on veut…

Ok, baisse ta culotte, c’est moi qui pilote !

Email 01, email 02, même ardeur : je m’attaque à #Deezer.

Pourquoi Deezer ? Parce que je suis abonné à leurs newsletters, et que je suis sûr qu’il y a moyen de faire un truc super sympa, en tout modestie bien sûr… Ça, c’est la raison officielle. La raison officieuse, moins reluisante : c’est parce que je veux imposer à tous ma passion pour Syd Matters, Nick Drake, Yeasayer et Beirut.

Email 01 : du basique, mais avec des petits détails qui n’amusent sans doute que moi.

L’email 01 sera donc plutôt basique, avec la présentation de l’album favori (celui que l’utilisateur aura le plus écouté au cours du mois par exemple. Come on Deezer, je suis sûr que c’est faisable de récupérer cette info !). Puis, plus bas, un petit cross-selling des artistes similaires et des albums conseillés. Un aperçu ? J’arrive tout de suite Monsieur le Directeur !

Ici donc, pas de problématique particulière. L’email est entièrement codé selon la technique Hybrid-Fluid pour garantir un rendu mobile même sur les clients mail ne supportant pas les media queries. J’ajoute quelques media queries juste pour optimiser un peu plus le rendu sur les clients mails supportant ce type de requête. La chose se corse sur des complexités que je me suis moi-même ajoutées (je suis légèrement sado-maso, et pas que sur les bords…) : des bordures avec dégradés de couleurs seront conçues en HTML et en CSS sur le côté gauche de la cover principale, et sur le côté droit du cross-sell.

Pour ne rien arranger, je décide d’amener une animation avec des @keyframes sur ces bordures, pour en faire évoluer le dégradé. Enfin, en plus des effets de survol sur les boutons et les titres d’album et d’artistes, je m’attelle aussi à changer au survol les images des pictogrammes « like » et « play » avec la propriété CSS content:url, parce que c’est toujours sympa graphiquement, et que, comme Cyril Lignac, j’aime quand c’est « piquant-croquant ».

Tous les autres critères sont normalement bien respectés : accessibilité, balises sémantiques, 120dpi, mise en place des attributs role= »presentation », Retina, preheader invisible, Google Font (oui certains critères ne font pas partie du brief initial, mais je suis têtu)… Voici donc mon premier exercice finalisé, et le code est dispo ici !

Email 02 : Pourquoi faire simple quand on peut faire compliqué?

C’est là que tout est parti en vrille. Je n’aime pas faire simple. J’aime les challenges. Et je veux aussi poker « Deezer » sur ce sujet. Je ne me contenterai donc pas d’un seul élément interactif, mais bien de 5 éléments. Pour en faire la liste, et en détailler les origines :

• Une barre de recherche pour accéder directement sur Deezer à un résultat de recherche : cet élément est basé sur l’article des formulaires dans l’emailing qu’Alice Li chez Litmus a publié en mai 2020. Je sais d’avance qu’il pourrait y avoir des messages d’avertissement (sur Thunderbird entre autres), mais fi !
• Un quizz, reprenant le code développé par Rémi Parmentier pour bulletin.fr et remarqué sur ReallyGoodEmails.
• Un effet de défilement de texte selon une technique que j’avais moi-même développée et à partir de laquelle j’avais rédigé un article « Effet Typewriter dans l’emailing » qui mériterait d’être peaufinée (je parle de la technique de codage).
• Un carrousel basé, cette fois, sur une technique repérée dans un email de Breguet dans la catégorie « Interactive » de ReallyGoodEmails.
• Une cover avec infobulles intégrées, suivant la technique des Hotspots dévoilée par Litmus sur leur blog en mars 2020.

Tu te chatouilles pour te faire rire !

Grégory Van Gilsen, COO for Badsender

Et c’est pas faux ! Je me suis vraiment bien compliqué la tâche, mais c’était l’occasion rêvée de tester tous ces éléments interactifs dont nous n’avons pas forcément ni le temps, ni l’occasion d’insérer dans des campagnes habituelles. Il m’a alors fallu indenter correctement mon code, le commenter (en particulier sur les styles CSS pour m’y repérer le mieux possible), tester, encore et encore, pour arriver à un résultat probant.

Le module qui m’a demandé sans doute le plus de temps étant celui du carrousel, pour en comprendre le fonctionnement, et s’assurer de la qualité du fallback. En revanche, je suis assez déçu du fallback du module « Hotspots » qui n’est pas convaincant : l’image n’apparaît pas du tout sur Free.fr, et le rendu est assez mauvais sur Mail.ru, Office 365, Outlook.com, T-Online.de, Web.de… Mais ce qui est assez surprenant, c’est que le code d’origine de Litmus n’est pas vraiment mieux, quand je le prends tel quel et que je le teste sur EmailonAcid ! C’est fou-fou-fou !

Là où j’ai aussi dû bidouiller un peu (mais trois fois rien, donc rien), c’est sur la barre de recherche tout en haut de l’email : les paramètres passent bien en GET, mais j’ai du créer une petite page en php pour récupérer la variable en GET et pouvoir faire une redirection avec une « sorte » de réécriture d’url pour pouvoir atterrir sur la page de résultat de recherche avec le bon paramètre dans l’url. Vous me suivez ?

header('Location: https://www.deezer.com/'.$_GET["recherche"].'');

Bon bref, tout ça pour dire que le code final est disponible ici et que le résultat n’est peut-être pas, en terme de fallback, au top-top mais mazette, qu’est-ce que j’ai kiffé ! Et puis ce petit carrousel, ça me fait des guilis-guilis dans le slip ! Et puis Jonathan Morali en mode Beau Gosse… Et puis, et puis, ET PUIS!!!! ET PUIS Y A FRIDA, QU’EST BELLE COMME UN SOLEIL!!

Et faisez gaffe aux pigeons bourrés à l’indentation dans le code de l’email 02, j’ai du la retirer pour passer sous la barre des 102ko en terme de poids que Gmail impose avant troncature.

04. Conclusion

Je participerai plus jamais à une certification Litmus… Ouhhhhhhhh une nouvelle certification Litmus pour 2021!! Ça m’intéresse ça !!!

Il ne me reste donc plus qu’à attendre le retour de Jason. Je compte sur lui. Quand on a vécu ce qu’on a vécu tous les deux… Je sais que ça ne peut que bien se passer. J’espère donc obtenir ma Certification Litmus et pouvoir aller boire un pinte pour fêter ça. Si vous avez aimé cet article, si vous vous êtes endormi, ou si vous voulez revoir le film, n’hésitez pas à le partager autour de vous, tout autour !

Allez j’m’en vais toquer chez Deezer sur le sujet, et puis chez Syd Matters… Et si vous aussi, vous avez envie d’amener un peu d’interaction, de la nouveauté, de la vie, ou quelque chose qui déglingue dans vos emails, genre un carrousel, un formulaire, des hotspots, ou un quizz que sais-je ! Et bien sachez qu’on est là pour ça ! Et si vous voyiez des optimisations à apporter, des corrections, des conseils, faites-vous plaisir et laissez-moi un petit commentaire ! Cette année, je suis payé au commentaire : un commentaire = 10 centimes d’euros… C’est un contrat précaire, alors je compte sur vous !