I've worked on more email apps than I’d care to admit, starting with Claris Emailer and Outlook Express back in those heady days of the dot-com boom in the late 90s. So of course I thought it’d be straightforward to create a simple email newsletter. Oh how naive I was.
The first thing you have to realize about sending email, is that you have no control over what app your recipients use to read it. Heck, some hard-core command line nerds are still using Pine or Elm as their main client. So be sure to have a text only version.
But that pales compared to the bane of any email marketer’s existence: Microsoft Outlook. It is both extremely popular and also completely outdated when it comes to rendering HTML messages. You basically have to start designing using Web 1.0 standards (which means using TABLES for basic layout; think GeoCities), and then you can add responsive CSS overrides on top of that for the more modern apps.
The first lesson is that—despite all the promises of CSS—all styles must be inlined. That means that every single HTML object in your email has to have the style declaration directly on it. Thankfully there are inlining tools out there to help with this, so you can develop your email using standard CSS, and then run it through an inliner. My favorite is Inliner.CM.
Next, Outlook sucks at image handling. It does not respect CSS width and height declarations, instead only using the native resolution of the image, or using old school WIDTH and HEIGHT attributes. Personally I’ve run into so many problems with Outlook that occasionally I just give up and use conditional formatting to serve up a crappy, low-quality image to Outlook while the rest of the modern world gets high-resolution retina images.
And buttons. Yeah, Outlook sucks at buttons too. But through trial and error (and error and even more error) and the help of some kindred spirits out there on the interwebs, I've gotten a canonical CTA (call to action) button that works well everywhere. And of course it is based on a TABLE. Thanks, Outlook!
Because of all this crap, you never can be really sure how any particular email will look in all the various apps. There are actually services out there that will render your email in several dozen different apps to show you how it will look. I use one called Email on Acid, and so you don’t end up looking dumb to you donors, you owe it to yourself to invest in one.
I’ll go into more details in subsequent posts. But for now just know:
- Yes, it really is that hard. You are not alone.
- Use TABLES as the basis of your email structure.
- Use a CSS inlining tool.
- Use WIDTH and HEIGHT attributes on all images for Outlook, and use CSS to override them for modern apps.
- By all means, use an email rendering service to see how your message looks in all the popular apps.