Dhalsemail.

Ça t’intrigue ce titre hein ? On dirait un nouveau terme de délivrabilité… Et pourtant, on ne parlera pas ici de DKIM, SPF et tout le toutim. Non. Car il est des nuits où des idées saugrenues me traversent l’esprit. J’ai alors beaucoup de mal à dormir. Il y a peu, je souhaitais m’amuser à créer un email un peu foutraque, sans sens vraiment, si ce n’est pour le plaisir (Spécial cassedédi à Herbet Léonard, parti trop tôt).

Un 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 CSS ou les épreuves sur colorpicker pour visuels dans un email… Bref, expérimenter, sans contraintes, sans chemise et sans pantalon.

Donc, je trépignais à l’idée de sortir des sentiers battus et d’abandonner pour un temps les rendus parfaits sur l’ensemble des clients mail. Car si c’est cela qu’on attend, alors on bride sa propre créativité et son imagination, et il n’est pas né celui qui me fera taire ! Non Monsieur (ou Madame, ou non-binaire).

Quel a été le déclencheur ? (je me pose moi-même les questions, ce sera plus simple)

Et bien c’est une très bonne question, merci de la poser ! C’est encore une fois une série Netflix qui m’a donné de l’inspiration. Peut-être as-tu vu la dernière saison de Black Mirror ? Le premier épisode nous plonge dans l’univers des jeux vidéos (enfin c’est pas vraiment le sujet de l’épisode en question, mais ça en fait partie).

Et je me suis alors remémoré ces soirées passées avec mes potes à enchaîner les parties de Street Fighter sur la NES (pour Nintendo Entertainment System, petit ignare !). Blanka, Mr Bison, Ken, Dhalsim (d’où le titre de cet article)… et tant d’autres ! Tous ces personnages apparaissaient soudainement à mon esprit, comme une madeleine de Proust…

Alors pourquoi ne pas pousser la chose jusqu’au boutisme (cela se dit-il seulement ?) J’ai soudainement envie de me lancer dans une aventure particulière : un email réunissant une typo de type “gaming” (genre pixelisée quoi), des effets d’ “apparition” avec les propriétés CSS qui vont bien, des images de fond en gifs animés (on se souvient tous de ces paysages en 2D avec la population locale assoiffée de sang) et par-dessus cela, d’autres gifs animés des personnages en fond transparent, combinées à deux carrousels, pour pouvoir choisir son combattant… Le carrousel n’est d’ailleurs pas une technique que j’ai développée (malheureusement) mais qui provient directement du générateur de carrousels créé par Freshinbox, sur lequel nous avions déjà d’ailleurs rédigé un article.

“Je me concccentre et je me jette à l’eauuu, haha…”

Edmond de Chardasser, comédien professionnel.

“Vas-y ! Tu peux le faire ! Tu éviteras tous les écueils. Tu auras des bons résultats sur le rendu. Aucun souci. Lance-toi !” Mon cerveau essaie de me tuer… Et donc, je me suis engouffré dans la brèche. S’en suivirent alors une longue série d’heures de travail acharné, sans aucune relâche. Et enfin, le résultat… Une seule possibilité pour pouvoir accéder à l’email en live from Boston : Tu cliques ici (et t’auras le code en prime).

streetfighter email

Moi qui m’inquiétais légèrement du rendu (même si quand on réalise un projet comme ça, on sait dès le départ que ça risque d’être compliqué d’avoir quelque chose de propre sur la totalité des clients mail, et qu’on abandonne tout de suite l’aperçu sur Outlook 2007, 2010, 2013 ou 2016), je dois avouer que je suis plutôt surpris en bien quant au support final :

  • Pour la typographie utilisée (la superbe Google Font VT323), sans surprise, elle est surtout très bien supportée sur les devices sous iOS et OSX. Cela devient plus complexe donc sur Windows où elle aura tendance à être remplacée par une typo Monospace, ce qui amènera le texte à passer sur deux lignes… En revanche, pour les deux premiers textes de la créa, le support du dégradé horizontal est parfait partout, puisqu’il s’agit d’une astuce (ou d’un détournement) consistant à appliquer un span avec une couleur propre à chaque lettre (et la couleur est tirée du dégradé en question). Je n’ai rien inventé (malheureusement bis), le concept vient de ce générateur.
  • L’apparition en fondu des textes en haut de l’email et de l’effet appliqué sur le logo Street Fighter, je crains, comme ne l’atteste le guide de support CSS de Campaign Monitor, que seuls (encore une fois) les supports iOS Mail et Apple Mail ne soient les seuls à les afficher, avec peut-être quelques versions sous Android, Thunderbird, et AOL Mail. Ce qui n’est finalement pas si mal !
  • Pour les visuels au format gif animé des personnages Street Fighter proposés, il me faut d’abord obligatoirement remercier ce site ! J’aurai sans doute été bien incapable de pouvoir trouver des gifs animés de tous ces personnages aussi facilement s’ils n’avaient pas été rassemblés à un seul endroit. Toujours est-il que, comme il s’agit d’un format bien interprété, cela ne pose aucun souci (sauf sur Outlook où, comme vous le savez, seul le premier état du gif sera affiché).
  • Les barres de vie ainsi que les noms des personnages et le score ont été conçus en HTML/CSS, donc là, pas de souci sur leur affichage…
  • Les ombres sur les textes seront correctement affichées sur iOS Mail et Apple Mail, sur AOL Mail, Android Mail, Outlook for Mac… C’est à peu près tout…
  • Quant aux carrousels, ils afficheront correctement leurs vignettes principalement sur iOS Mail, Samsung Mail, Apple Mail, Yahoo! Mail, AOL. Bon bah là j’peux pas faire de miracle non plus, mais il y a toujours un affichage de fallback pour afficher un visuel fixe dans les cas où les carrousels ne fonctionnent pas.

Ne me demandez pas ce que ça donne en responsive, c’était pas le but de mon intervention… Autant être honnête.

Petite aparté : J’en ai profité pour tester sur cette intégration HTML d’email 2-3 choses qui me trottaient dans la tête en arrière-plan : le fait de renseigner toutes les largeurs de tableau dans un style=”width:[valeur]px;” plutôt que dans un attribut width. J’y ai aussi mis en place à chaque <table> un attribut role=”presentation” et renseigné mes textes dans des balises <hn> et <p> quand nécessaire (pour aussi être raccord avec ce qu’on conseille, c’est la moindre des choses !).

Et j’ai englobé l’ensemble de mon email dans une <div role=”article” aria-label=”subject” lang=”en”> comme le préconisait Mark Robbins dans un de ces récents tweets pour améliorer l’accessibilité de l’email et sa lecture par un lecteur d’écran.

Seconde petite aparté : le lendemain où j’avais fini de créer cet email, Rémi Parmentier sortait de son côté un email avec animation interactive. J’ai alors décidé d’arrêter de fanfaronner, définitivement.

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.

9 commentaires

  1. Remarquable !!
    Ton email a eu l’effet Kiss-Kool sur moi : tu m’as fait retourner en enfance et simultanément je me suis pris une claque sur la qualité d’exécution de ton travail !!
    Merci de nous partager ta connaissance et nous mettre à disposition les éléments pour s’en inspirer.

  2. Excellent ! Drôle et généreux (merci de partager !)
    🙂 c’est un feel-good email. Inspirant pour se lancer soi même dans l’expérimentation !

  3. Thomas Defossez

    @raphael : Ahhhhh je suis ravi d’avoir pu provoquer cet effet-là ! Et si en plus tu approuves la qualité du travail, alors j’en suis comblé ! 😉 J’espère effectivement que ce type d’expérimentation pourra servir à d’autres occasions, n’hésite pas à l’adapter et à me faire signe si un jour tu décides à la mettre en place ! Je serai heureux de pouvoir voir ça !

  4. Thomas Defossez

    @gzine : Merci pour ton commentaire, je suis plus que jamais motivé à partager mes idées quand je vois ces touchants retours ! N’hésite pas à te lancer dans l’expérimentation, à tester, encore et encore, et le plus important : à continuer à s’amuser ! 🤪

  5. Bonjour Thomas et bravo pour ce superbe email que j’ai pu découvrir sur le slack d’emailgeeks !
    ca sent bon la nostalgie, et aussi la folie, ce petit quelque chose qui anime, je trouve, chaque #emailgeeks (surtout dans le nord, ne soyons pas chauvin 😀 )
    Je crois que je vais laisser mijoter tout ça, j’espère que je vais pouvoir sortir qqchose d’aussi chouette que ton rendu !
    Merci pour le partage et pour ta folie
    Aurélie

    PS : Herbert n’est pas mort

  6. Thomas Defossez

    @Aurélie : merci à toi, je ne savais pas que Monsieur Léonard était toujours vivant ! Je vais tout de suite m’écouter ses plus grands tubes… pour le plaisir… https://www.deezer.com/fr/artist/152068

  7. Thomas Defossez

    @Aurélie : et merci énormément pour tes encouragements et ton commentaire, ça me fait tellement chauzocoeur ! Et vive le Nord ! D’ailleurs, Herbert l’avait dit déjà bien en avance, dans son plus beau morceau : “Les gens du Nord”…

  8. @Thomas mdr tu le fais exprès avoue !! C’est Enrico qui chantait les gens du nord. Revois ta discographie d’urgence 😉 ou alors c’est la chaleur, toute cette pression #LaCiteDeLaPeurAPeuPres

  9. Thomas Defossez

    @Aurélie C’est une femme comme toi que j’attendais. Je passe te prendre ce soir et je t’emmène manger des gencives de porc chez Laplo, avec des petites clapiottes en amuse-gueule.

Laisser un commentaire

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