David Lohmeyer's Blog

Thoughts on building email templates

I've been making email templates in one way or another for about three years now.  At Acton Institute, we send out a lot of mailings to engage and inform followeres of our nonprofit.  In fact, sending emails is such a routine task for us that I helped automate our process back in early 2013 with a Newsletter Maker app.  The app's sole purpose is to create WYSIWYG content areas as text fields or text areas in a predefined HTML template.  Since it's coded in Rails, fun things can be done like iterating through header CSS in the template and putting it into the inline content without having to manually edit everything inline.  We don't need an app to actually send the newsletter, as our host Lexicom provides a an email list server and we then use MaxBulk Mailer to send to that list.  Subscribes and unsubscribes are custom-coded scripts on our web server and look like our subscribe page.

As you can see, building the actual newsletter template is just a small part of the entire process, but the templates are a big deal.  Here you can see the number of different email clients that need to be able to display your template correctly:

Mobile

  • Android 2.3
  • Android 4
  • Android Gmail 2.2
  • Android Gmail 2.2
  • BlackBerry 9930
  • iPad 5.0
  • iPad Gmail
  • iPhone 4S (iOS 5)
  • iPhone 4S (iOS 6)
  • iPhone 5 (iOS 6.1)
  • Kindle Fire 2.3

Desktop

  • Apple Mail 4
  • Apple Mail 5
  • Apple Mail 6
  • Entourage 2004
  • Entourage 2008
  • Live Mail
  • Lotus Notes 6.5
  • Lotus Notes 7
  • Lotus Notes 8
  • Lotus Notes 8.5
  • Outlook 2003
  • Outlook 2007
  • Outlook 2010
  • Outlook 2013
  • Outlook Express
  • Thunderbird 13
  • Windows Mail

Web

  • AOL - Chrome/Firefox/IE
  • Gmail - Chrome/Firefox/IE/Safari
  • Outlook.com - Chrome/Firefox/IE/Safari
  • Yahoo! - Chrome/Firefox/IE

Wow!  If your goal is to have good looking templates, you want to subscribe to a service like Email on Acid to test for all of them.  I've found the most offensive email clients in terms of having poor CSS support to be:

  • Outlook.  Any flavor.  Provides a Microsoft Word rendering engine instead of anything modern.  For instance, to get padding on some content it needs to be inside of a table cell.
  • Gmail.  They strip out the entire CSS header of a document and force you to inline everything.
  • Lotus Notes.  Similar to Outlook's rendering.  Hopefully it's on its way out, though.  Maybe they'll surprise people with a decent email rendering engine in the future and save themselves...
  • Android on Gmail.  Getting a responsive design in an email template with images working with Outlook, regular Gmail, and Android Gmail (which behaves differently) is a heroic feat.  Especially if it looks good at all.

One day these companies and products will take email design seriously.  The only one that seems to have good design standards in their email clients is Apple.  They get it. Email is and has become a big problem with screen size saturation, since maintaining a coherent brand through all of the design restrictions is very hard.  Right now I've spent countless hours frustrated at the archaic conventions of email design.  If you don't have a more customized solution like us, do yourself a favor and get with vendors like MailChimp, Constant Contact, and Campaign Monitor.  They are worth the money if your volume isn't high.

Related Posts