Community Contest: Emails Worth Forwarding

Hello everyone,

I really enjoyed the previous contests, so I was really looking forward a new one. Ha. So here's my take on this contest. I made an email that evolves as you forward it between the desktop webmails of Gmail, Yahoo, Outlook.com and AOL. And it's also a game where you need to find the correct order in which to forward it so everything works correctly. I'm super hyped for the release of Super Mario Maker next month, so I've called this… Super Mail Forward !

Here's how it works. When you send it to the expected webmail in the right order (between Gmail, Yahoo, Outlook.com and AOL), a mushroom will appear.

If you send or forward it to a webmail in the wrong order, the block corresponding to this webmail will turn red.

I don't want to spoil the fun for people willing to play along and try this themselves, so I won't include more screenshots here. But you can see a full gallery there.

Now grab the code on Builder and try it for yourself with Putsmail.

Here's how I did this and some of the things I learned along the way. My biggest surprise was that webmails like Gmail, Yahoo, Outlook.com and AOL don't really mess up with your code when you forward an email more than when they display it in the first place. This means that since Yahoo filters attribute selectors in CSS, forwarding an email will forward it with attribute selectors filtered. But other than that, I didn't notice anything more removed when forwarding.

So to build this, I took advantage of what the email clients filter, support, and some of their quirks. I didn't want to bother with hardcore clients like Outlook 2013. So I chose a smoother path and quickly decided to work with Gmail, Yahoo, Outlook.com and AOL. Now because Gmail filters almost everything, I knew it had to be the last client you forward it to. And because AOL is very permissive and doesn't filter much, it was easier to set it as the first client you send it to. I then decided to play with the background property and change its value depending on the webmail. Each block is a 16x16 pixel grid, where each pixel (or <td>) has a class that changes its background color. Here are the quirks I took advantage of to make this work :

• AOL has a bug where it incorrectly replaces a background image path when the background property is used in a <style> tag. When this happens, all following CSS declarations are no longer applied by a browser. So the first step looks like this :

.step1 .A { background:transparent!important; }
.step1 .B { background:#000!important; }
.step1 .C { background:#fff!important; }
.step1 .D { background:#efe3af!important; }
.step1 .E { background:#ee1c25!important; }

.step1 .W { background:url('http://i.imgur.com/6qtuIRR.gif'); background:#fff!important; }
.step1 .X { background:#f8d81f!important; }
.step1 .Y { background:#d89f37!important; }
.step1 .Z { background:#000!important; }

All the magic here is done with the background:url('http://i.imgur.com/6qtuIRR.gif'); property. AOL will correctly interpret the A-E rules (corresponding to the mushroom), but not the W-Z (corresponding to the default block). This means that AOL is the only client to see the mushroom at this point. And because the other styles transformed by AOL are not valid in CSS, they'll be filtered by any of the other webmail you forward it to.

• Yahoo supports only a few media queries declarations, and will filter any other. So when you write @media yahoo { }, any other client or browser will simply ignore it. But Yahoo will transform it into @media { }, thus triggering your styles inside.
• Because of the forwards, every CSS rules get prefixed by each webmail. Thus by the time it gets to Gmail, every rule in the <style> tags will be stripped. So in order to make this work on Gmail, I had to play with inline styles. Gmail supports both background properties with a color or an image. But Outlook.com will strip any declaration containing an image URL. So each cell of my pixel grid contains two background declarations : the first one with only a color matching the final state desired in Gmail. And the second one with a background color matching the default block style, but with a background image (a useless transparent spacer).
• So when the email gets to Outlook.com, both its block and Gmail's block are revealed as mushrooms. But because Outlook.com still supports styles in a <style> tag, I use with to reset the .step4 pixel cells to their default block colors.

Perhaps the most time consuming part of this contest was to optimize the pixel art grid so that the whole email stays below the 100 Kb limit. In one of my first versions, each block was a <table> weighing around 50 Kb. So I did the following optimizations to keep the email weight as light as possible (currently at 67 Kb) :

• Use lang attributes instead of aria-labelledby for Gmail. That's eleven characters shaved off for each cell, so about 8 Kb for each block.
• Use short class names. So I ended up changing .mushroom-black, .mushroom-white, .mushroom-red, etc. to .A, .B, .C, … This saved about 6 Kb for each block.
• But the most useful optimization I did was to try to use as much colspan as I could in order to optimize the grid itself. Here's what it looks like in the final version.

I hope you enjoy this email as much as I enjoyed building it. Let me know if you have any question.