Article published on

and updated on

You're curious about this title, aren't you? It sounds like a new deliverability term... And yet, we won't be talking about DKIM, SPF and all the rest. No. Because there are nights when crazy ideas cross my mind. I then have a lot of trouble sleeping. A little while ago, I wanted to have fun creating an email that was a bit messy, without any real meaning, except for the fun of it (Special thanks to Herbet Léonard, who left too soon).

A bit like the emails for the series The Haunting of Hill House with CSS animation effects or false background with HTML elementsor for Maniac and the work on typography in CSS or the tests on colorpicker for visuals in an email... In short, to experiment, without constraints, without shirt and without pants.

So, I've been dying to think outside the box and give up for a while on perfect rendering on all mail clients. Because if that's what you expect, then you're stifling your own creativity and imagination, and I wasn't born to be silenced! No, sir, I'm not. (or Mrs., or non-binary).

What was the trigger? (I ask myself the questions, it will be easier)

Well that's a very good question, thanks for asking! Once again it was a Netflix series that gave me inspiration. Maybe you've seen the latest season of Black Mirror? The first episode takes us into the world of video games (well, it's not really the subject of the episode in question, but it's part of it).

And then I remembered those evenings spent with my buddies playing Street Fighter on the NES (for Nintendo Entertainment System, you ignoramus!). Blanka, Mr Bison, Ken, Dhalsim (hence the title of this article)... and so many others! All these characters suddenly appeared in my mind, like a madeleine of Proust...

So why not push it to the limit (does it even say that?) I suddenly feel like embarking on a particular adventure: an email with a "gaming" typeface (like pixelated)effects with the appropriate CSS properties, background images in animated gifs (we all remember those 2D landscapes with the bloodthirsty local population) and on top of that, other animated gifs of the characters in transparent background, combined with two carousels, to be able to choose his fighter... The carousel is not a technique I developed by the way (unfortunately) but which comes directly from the carousel generator created by Freshinbox, on which we had already written an article.

"I'm conccentrating and jumping in the wateruu, haha..."

Edmond de Chardasser, professional actor.

"Go for it! You can do it! You'll avoid all the pitfalls. You'll get good results on the rendering. No worries. Go for it!" My brain is trying to kill me... And so I stepped into the breach. Then followed a long series of hours of hard work, without any respite. And finally, the result... There is only one way to access live email from Boston: You click here (and you'll get the code as a bonus).

streetfighter email

I was slightly worried about the rendering (even if when you realize a project like this, you know from the start that it might be complicated to have something clean on all mail clients, and that you immediately abandon the preview on Outlook 2007, 2010, 2013 or 2016)I must admit that I am rather surprised in a good way about the final support :

  • For the typography used (the superb Google Font VT323)It's not surprising that it is well supported on iOS and OSX devices. It becomes more complex on Windows where it will tend to be replaced by a Monospace typeface, which will cause the text to be on two lines... On the other hand, for the first two texts of the design, the support of the horizontal gradient is perfect everywhere, since it is a trick (or a detour) consisting in applying a span with a specific color to each letter (and the color is taken from the gradient in question). I did not invent anything (unfortunately bis)the concept comes from this generator.
  • Fade in text at the top of the email and the effect applied on the Street Fighter logo, I fear, as the Campaign Monitor CSS support guidethat only (again) iOS Mail and Apple Mail are the only ones to display them, with maybe some versions on Android, Thunderbird, and AOL Mail. Which isn't so bad after all!
  • For the visuals in animated gif format of the proposed Street Fighter characters, I must first thank this site ! I probably wouldn't have been able to find animated gifs of all these characters so easily if they hadn't been gathered in one place. Still, as it is a well interpreted format, it is not a problem (except on Outlook where, as you know, only the first state of the gif will be displayed).
  • The life bars as well as the character names and the score have been designed in HTML/CSS, so there is no problem with their display...
  • Shadows on the texts will be correctly displayed on iOS Mail and Apple Mail, on AOL Mail, Android Mail, Outlook for Mac... That's about it...
  • As for the carouselsThey will display their thumbnails correctly mainly on iOS Mail, Samsung Mail, Apple Mail, Yahoo! Mail, AOL. Well, I can't do miracles here either, but there is always a fallback display to show a fixed visual in cases where the carousels don't work.

Don't ask me what it looks like in response, that wasn't the purpose of my intervention... I might as well be honest.

Small aside: I took the opportunity to test on this HTML email integration 2-3 things that were running through my mind in the background: the fact of filling all the table widths in a style= "width:(value)px; " rather than in a width attribute. I also put in each <table> a role="presentation" attribute and filled in my texts in <hn> and <p> when necessary (also to be connected with what we adviseit's the least we can do).

And I have included my entire email in a <div role=" »article »" aria-label=" &quot;subject &quot;" lang=" »en »"> as advocated by Mark Robbins in one of these recent tweets to improve the accessibility of the email and its reading by a screen reader.

Second little aside: the day after I had finished creating this email, Rémi Parmentier was going out on his own an email with interactive animation. I then decided to stop bragging, definitely.

You wish to receive this email on your mailbox ?

No worries, just fill in the fields below, and zou! It's received!

Did you like this article? Share it!

The news

Want to receive the newsletter, invitations to the lives and other news of Badsender by email ?

9 Responses

  1. Remarkable!
    Your email had the Kiss-Kool effect on me: you made me go back to childhood and at the same time I got a slap in the face about the quality of execution of your work!
    Thank you for sharing your knowledge with us and providing us with the elements to draw inspiration from.

  2. Excellent! Funny and generous (thanks for sharing!)
    :) it's a feel-good email. Inspiring to start experimenting yourself!

  3. @raphael : Ahhhhh I'm glad I could provoke this effect ! And if you approve of the quality of the work, then I'm delighted! ???? I hope indeed that this kind of experimentation can be used on other occasions, don't hesitate to adapt it and let me know if one day you decide to implement it! I'll be happy to see it!

  4. @gzine: Thanks for your comment, I'm more motivated than ever to share my ideas when I see this touching feedback! Don't hesitate to experiment, to test, again and again, and most importantly: keep having fun! ????

  5. Hello Thomas and congratulations for this great email that I discovered on the emailgeeks slack!
    It smells good nostalgia, and also madness, this little something that animates, I think, each #emailgeeks (especially in the north, let's not be chauvinistic :D )
    I think I'm going to let this simmer, I hope I can come up with something as nice as your rendering!
    Thank you for sharing and for your madness

    PS : Herbert is not dead

  6. @Aurélie: and thank you so much for your encouragement and your comment, it makes me so warm! And long live the North! By the way, Herbert had already said it well in advance, in his most beautiful piece: "Les gens du Nord"...

  7. @Thomas mdr you do it on purpose confesses ! It's Enrico who sang the people of the north. Review your discography urgently ;) or it is the heat, all this pressure #LaCiteDeLaPeurAPeuPres

  8. @Aurélie I've been waiting for a woman like you. I'll pick you up tonight and take you out for pork gums at Laplo's, with little clapiottes as appetizers.

Laisser un commentaire

Your email address will not be published. Les champs obligatoires sont indiqués avec *