Are you already wondering about the title of this article, that sounds like a new word for deliverability? Yet we’re not going to talk about DKIM or SPF. But truth is, at times I can barely sleep at night owing to all the weird ideas that cross my mind. Not long ago, I thought about amusing myself writing a rather messy email, one that would not really make sense, just for fun, just for pleasure (as the romantic French singer Herbert Léonard would put it!).
I fancied creating an email like the ones for series like The Haunting of Hill House and their CSS animation effects or fake backgrounds including HTML elements, or for Maniac and the work on CSS typography or the proofs on colorpicker email visuals… In short, I simply aimed to try out things without any constraints.
I did look forward to getting off the beaten track, and leave aside polished copy for my emails clients for a while. To stop restraining my imagination and creativity… No, the one who’ll shut me up isn’t born yet!
What was the triggering factor? Yes, let me ask the questions, this will make things easier.
Well, that’s an excellent question, thanks for asking! Once again, I was inspired by a Netflix series. Have you seen the last season of Black Mirror? The first episode takes us to the world of video games (this isn’t the main intention, but part of the plot).
It reminded me of those nights spent with some friends playing one game of Street Fighter after another on the NES. Blanka, Mr Bison, Ken, Dhalsim (hence the title of this email) and so many others! All those characters sprang to my mind… Ah, memories from my youth (sigh).
So, I thought: why not acting like a diehard? I felt like throwing myself into a peculiar adventure: creating an email gathering a sort of ‘gaming’ (pixelated) typo, ‘apparition’ effects with nice CSS attributes, animated GIF background images (do you remember these 2D landscapes figuring the bloodthirsty local population?), and upon all this, some animated GIFs representing characters with GIF transparent background, combined with two carousels, allowing you to pick up your fighter… The carousel technique being one I haven’t developed myself – sadly – but which directly comes from the carousel generator created by Freshinbox, about which we already had dedicated an article.
“I focusss, and take the pluuunge, ah ah…”
Edmond de Chardasser, professional actor.
“Go for it! You can do it! You’ll manage to avoid all pitfalls. The results and rendering will look good, no worries. Just have a try.” Looked like my brain was trying to kill me… So, I stepped into the breach. And here’s the result of hours after hours of relentless hardwork: the only way to access this email live from Boston is to click here (and you’ll get the code into the bargain).
I was a bit worried about the rendering – even knowing from the start that this kind of project can hardly result in something that is absolutely tidy for the whole of the email clients, and that of course you cannot count on the preview offered by Outlook 2007, 2010, 2013 or 2016. Well, I must confess I’ve been quite surprised by the good rendering in the end:
- Typography (the beautiful Google Font VT323) – As always, it is well supported by iOS and OSX devices. But it’s more difficult with Windows: it tends to be replaced by a monospace typo, thus spreading the copy over two lines. On the other hand, for the first two texts, the format of the horizontal color gradient is perfect. Indeed, there is a trick consisting in applying a span with a color that is specific to each letter (the color coming from the color gradient). Again (and unfortunately), nothing new here as it comes from this generator.
- Shading appearance of the copy at the top of the email and effect on the Street Fighter logo – Once again, as confirmed by Campaign Monitor CSS support guide, these can only be displayed on iOS Mail and Apple Mail devices, and maybe on some versions of Android, Thunderbird and AOL mail. Which is not too bad!
- Animated GIF imagery of the Street Fighter characters – I must thank this site as I certainly would not have been able to retrieve animated GIFs of these characters so easily, hadn’t they all been gathered in one place. As the format is very good, there’s no issue with the display (except on Outlook where, as you well know now, only the first state of the GIF will appear).
- Life bars, characters names and score – They’ve all been created in HTML/CSS, so no problem with the display.
- Shadows on the text – They’ll appear correctly on iOS Mail and Apple Mail, AOL Mail, Android Mail, Outlook for Mac… And that is all!
- Carousels – Their vignettes will be correctly displayed mainly on iOS Mail, Samsung Mail, Apple Mail, Yahoo! Mail and AOL. I can’t do wonders, but there is always a fallback display to display a fixed imagery when carousels don’t work.
And don’t ask me what you’ll get in responsive as let’s be honest, that’s not our point here.
One little aside: I took the opportunity to try with this email HTML integration one or two things that were running through my mind, like filling in all the tables widths in a style=”width:(value)px;” rather than in a width attribute. I also put in place for each <table> a role attribute(role=”presentation”) and filled in my text into the tags <hn>and<p> when necessary(as the least I could do was to follow our advice!).
Then, following Mark Robbins’ recommendation in one of his recent tweets, I encompassed my whole email into a <div role=”article” aria-label=”subject” lang=”en”> in order to improve the email accessibility and reading on a screen reader.
Last little aside: one day after I created this email, Rémi Parmentier released an email with interactive animation. And that’s when I stopped boasting.