I ranted about the problems with HTML email last week, so here’s a great and bizarre funkiness that I just experienced, and the solution which will hopefully help someone.
Our story begins on a dark and stormy night bright and sunny day, when I was building an email for a client. During Litmus tests, they had noticed a strange lack of padding around a certain content area…
Left: Gmail. Right: AOL. (Client identity obscured)
…but only within AOL.
First thought: Who still uses AOL? Answer: about 1% of people, as of 2014. It’s amazingly still in the top ten, apparently.
Next question: Why?
I mean “why is it breaking?” (though why are people still using AOL is a good question, too). Litmus has a cool new feature called “Builder,” which provides HTML email devs the opportunity to finally do what Dev Tools has allowed web developers to do for years: live tweaking in-engine. So I loaded the HTML up, popped up the AOL renderer…and it wasn’t there.
The email looked fine. Perfect, even. Padding was right on.
So I chalked it up to some sort of hiccup in Litmus or in our server and ran a new test. Right as I was about to send the update to the client, I looked at the AOL result.
No padding again.
So I loaded up the code:
...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding: 25px 20px 30px;"
class="mob" style="">
(...insert stuff here...)
</td>
</tr>
</tbody>
</table>
...
Took me about a half-hour of agonizing before I figured it out. I’d been troubleshooting an error in a different part of the email, and to make things quick, I’d added a new “style” tag.
And apparently AOL, rather than adding all the CSS up before rendering it like everyone else does, just applies the last CSS received by the layout engine. Litmus’ Builder must do some CSS preprocessing before sending it to the AOL rendering engine, so I didn’t see it there.
So I removed the extra, empty ‘ style=”” ‘ and re-ran the test. Good as new.
Thanks, AOL, for contributing to my stress levels.
