September 12, 2013
After another long silence, I return with something to share for once: a quick little tool I made to package HTML emails when I’m working outside Campaign Monitor and/or Premailer.
Developing HTML email templates that render consistently is, of course, the worst. If you’re new to this phenomenon, it’s like web page browser testing that’s 8-12 times more awful. You’re required to delve into authoring markup that would be considered deplorable on the modern web, marrying late-90’s-style methods with a careful awareness of how a plethora of email clients will interpret your work in not-so-sensible ways.
I usually have the pleasure of developing templates for Campaign Monitor, which is an all-around great product for clients and developers alike. A WYSIWYG HTML email composer seems like the last thing that could ever work well, yet they’ve nailed it. Templates still need to be carefully designed and tested, but Campaign Monitor makes tools and advice readily available that can help with this. One major component is the quiet magic performed by Campaign Monitor before an email takes flight: common fixes are applied, including the conversion of embedded styles to their inline equivalents.
But sometimes clients don’t work with Campaign Monitor, or you’re required to put together a template that will be managed and utilized by some mysterious entity.
In this case I’ll build a template with embedded styles, keeping it as human-friendly as possible when it comes to edits. I’ll test by running it through Premailer and then getting detailed screenshots from Litmus. Campaign Monitor has a similar service for $5/test, but I usually go with the safety of Litmus’ unlimited tests for the $79 monthly fee.
Finally back to the thing I referred to at the beginning of the post: sometimes Premailer adds unwanted junk as it works its magic on the HTML, and I’m not often (or ever) in the mood to convert all my styles inline by hand. A nifty bit of PHP already exists for such a thing, and it’s called Emogrifier. I previously built a tool for a client that used Emogrifier as part of an email preflight process, and I recently ripped that out and made a standalone tool I’m calling Email Packager that does three things:
- Takes your pasted or uploaded HTML and Emogrifies it.
- Downloads all absolute images that are referenced in the HTML, optionally replacing their links with relative equivalents.
- Gives back a ZIP file with message.html (your original), message_inline.html (Emogrified), and an images folder. It’s timestamped so you can tell your versions apart, and the web-friendly filename comes directly from the HTML’s
You’re welcome to use it now, dear Internet, just know that it’s a fairly rough little thing at present. I happily welcome any feedback, ideas, or even problematic reports. I experienced a silent failure, for example, when I accidentally added two style properties to a single HTML element. If it doesn’t work as you’d expect, try validating your HTML (hah!) and looking for any surprising oddities. If it still doesn’t work, email me!
Enjoy, and happy email-making!