There is a common misconception that designing and creating HTML emails is easier than designing and creating web pages, but the truth is that HTML emails can take far longer to design, code, test, and deliver! The good news is that by being aware of the challenges involved (and some handy tips), it is possible to make the process as painless as possible while delivering a fully tested bulletproof email template.
The first thing to keep in mind is that HTML emails need to render consistently in a wide variety of desktop email clients like Outlook, Thunderbird and Apple Mail. In addition, testing and troubleshooting must include web-based email clients, like Gmail, Outlook.com, Yahoo!, and mail.com. Consider that each of these online mail services can be accessed from IE, Firefox, Chrome or Safari (depending on the user’s preference) and the number of browser/platform/email client combinations becomes quite large.
It is also important to keep in mind that over half of emails in 2015 were opened via a tablet or phone. Testing how your email renders in mobile mail apps is crucial.
The biggest things to keep in mind when designing an email template are the limitations of certain email clients—doing so will make coding and testing across all these scenarios much smoother if you are aware of, and find designs solutions around, the following limitations:
Earlier versions of Outlook used Internet Explorer as a rendering engine to display HTML emails. Outlook 2007, 2010 and 2013, however, use Microsoft Word as a rendering engine. Since Word is a word-processing program and not a web browser, there are some basic HTML elements that Word just can’t figure out how to render. The biggest of these is background images. Quite simply: they won’t display in an email in the more recent versions of Outlook. You can:
- Adjust your design to not include a background image
- Adjust your design to allow some creative slicing
- Consider using a background color as a fallback option for Outlook users and just accept the fact that the image won't display
Web fonts/embedded fonts:
Most email clients strip out any script tags as a security measure, so any web fonts that are implemented using a script (like Cufon) won’t render. In addition, css quirks in several email clients won’t display web fonts embedded via @font-face or @import. If you have to use a specialized font be sure to declare a fallback for those cases. Campaign Monitor has some great info about which email clients support fonts.
CSS support is also widely varied between email clients. Campaign Monitor has a great breakdown of CSS support here.
There is a great tool available to help you see how your test emails render in all of these different scenarios: Litmus. Not only will it show you screenshots of how your email renders in a variety of device/browser/email client combinations; you can also inspect, make changes and troubleshoot in real-time. There is a cost for the service, but the development time it will save you is absolutely invaluable. Trust me. (And if using Litmus’ testing tools is not an option for you, they have some fantastic information in their Resources section that is definitely worth perusing.)
In order to possibly help you concentrate your troubleshooting efforts on the most crucial device/platform/browser/email client combinations it can be helpful to look at any stats that are available for previous email blasts to the same list of recipients. If you use an email marketing service like Campaign Monitor, Vertical Response, or MailChimp, or if you send emails via your CMS (like Kentico), you can review your email analytics there. If you do decide to use Litmus, they can also provide some fantastic email analytics that will help you assess which devices and clients you need to concentrate on.
Boilerplate of Tricks
I have one more valuable resource to point you toward: a fantastic responsive HTML email boilerplate shell. Not only does it have code examples with handy tricks to help you avoid some of the quirkiest of email client quirks, it’s also heavily commented with handy information that will help you get you email HTML email template as bulletproof as possible.