HTML email templates from CampaignMonitor: Fail?
Clients love HTML email.
Done correctly, it looks slick as all get-out; it prompts users to action; it drives traffic for a special promotion; presents an exciting, professional image; lifts you aloft and floats you to heaven. All with higher response/action rates than plain-text email messages.
However, as every web developer knows, doing it well is a nightmare. Design/layout is the easy part; the sticky parts are numerous. Different email clients render HTML email with, shall we say, somewhat uneven support for web standards that are increasingly respected in modern browsers. Further, many email clients come configured with default settings to that disable images, adding another factor to consider. Finally - well, not finally, but the list of issues feels effectively endless - HTML email is often used by spammers, so there are more complicated considerations associated to ensuring that your messages do not get incorrectly tagged as spam.
There is a growing body of best-practices that has slowly developed for HTML email. These practices are not “best” in the sense that they represent elegant, flexible coding philosophies (like DRY, OO, for example) or minimal load times or optimized development practices. Rather, these ideas are considered best-practices, IMHO, merely in the sense that they “work”: they offer the best chance that your message will be received by the intended recipient and be reasonably well-rendered when he views it.
These best-practices include foregoing all the techniques we learned for creating semantic markup that cleanly separates content from presentation using CSS; instead, we are told to use tables for layout. We should no longer refer to styles in an external style sheet since most email clients - especially web-based ones like Hotmail, Yahoo, and Gmail - will strip them out; rather, we should use inline styling, repeating style information on nearly every element that needs it, inducing bloat and making modifications a tedious search-and-replace activity rather than a simple change in a single style declaration.
Other best-practice resources often conclude by pointing to Campaign Monitor or MailChimp and advising readers to download their free templates and use them as directly or as a starting point for editing or even as a guide to these best-practices. Both sites claim that their templates have been tested to render fine in all major clients.
Now, Campaign Monitor is great. These guys are founders of the Email Standards Project. I totally support the idea that someone should be pushing email clients towards better support of web standards, especially CSS support. The first step in that direction is measuring and evaluating the current support. And their chart of CSS support in major mail clients is a tremendous resource.
But the first template I downloaded from CampaignMonitor violates a bunch of these best practices right off the bat and fails to render correctly in Gmail. The template has nearly all of its styling inside a <style> tag inside the page’s <head> section. CampaignMonitor’s own CSS support guide referenced above notes that such an approach will not work with Gmail, yet their template includes it and claims to render fine.
Gotta tell ya, I’m a bit disappointed.
julesj said,
Wrote on September 13, 2009 @ 7:55 pm
CampaignMonitor automatically puts the styles that you defined in into the elements that they refer to.
I think they used the tag in the head to make the template easy to adapt.
Ros Hodgekiss said,
Wrote on November 26, 2009 @ 12:26 pm
Hi David, thank you for the mention. julesj is on the money when he mentioned that we convert the contents of the tag into email client-friendly inline styles upon import of your HTML email.
That said, we are looking at ways to refresh and improve our templates and resources, so we really appreciate this feedback. Always happy to answer any questions you may have regarding our templates or Campaign Monitor in general, so please feel free to drop us a line!
david said,
Wrote on November 26, 2009 @ 2:38 pm
@julessj, @Ros:
Thanks, guys for the clarification.
So, the templates are intended to be used with your own mailer services, which will perform the pre-processing you note. They are not offered as a stand-alone set of resources for the community at large. Would that be right?
Ros Hodgekiss said,
Wrote on January 29, 2010 @ 5:51 am
Hi David, apologies for the late response. You can either use these templates with us, or use a service like http://inlinestyler.torchboxapps.com/ to move the CSS inline prior to send. Anyone can use our free templates with any service, however you need to keep in mind that not all email applications automatically move the CSS code inline upon import (thus making this additional step necessary).
Please let me know if you have any questions about this - we’re always keen to receive feedback regarding our templates.