Email template done right

Any developer tasked with bringing to life a designer’s template for business email template can attest to difficult mediation between The Vision of exciting communication piece and accomplishing necessary cross-client and cross-platform Compatibility.
The standard challenge of cross-browser compatibility is enhanced here by the variety of email clients, and inconsistencies between the versions within the same platform. Further challenge is presented by spam filters and security requirements.

Vast number of small businesses settle for templates offered by mass mail providers, such as ConstantContact, MailChimp, Mad Mimi or Eloqua, just to name a few. This is a good choice, as it takes care of compatibility, security and operational logistics, as well as legal requirements (if you don’t unknowingly break them).

If you however want to develop something truly original, or don’t subscribe to the above mentioned services, you need to know a thing or two about what email clients will do to your beautiful design and unsuspecting programmer.

Back in mid 2000′ viruses have been brought to the computers mostly by email. IT departments were spending lots of time on notifying employees not to open email with particular subject or address. To break the circle of high volnurability, Microsoft – the most popular and most targetted by hackers platform at the time, released Outlook 2007, which switched email rendering engine from IE browser (html) to MS Office (as in Word). Any scripts in HTML-formatted messages don’t run in Outlook 2007 or newer. It also blocks images and other external content in HTML messages, on replies, forward and print, that could be used to reveal information about the user, making these clients more secure. Messages itself are based on MS Word, not html. CSS is accepted, but not the same way as standard html uses styling sheets.

Each of email platforms: Hotmal, Yahoo mail, Gmail, Apple mail, renders email message differently. Margins, padding, white spaces, image formats etc. are so different, that it’s hard to find a common denominator for a decent-looking email template.
Add to this fast evolving technology, while the old one is still thriving, and you have a perfectly messy poutine on your plate.

As of February 2012, mobile email overtook webmail client usage. In April 2012, desktop clients lost their top spot – and most emails are read on mobile devices now.
35.6% on iOS Devices, 20.14% in Outlook, 13.57% in Hotmail, 11% in Apple Mail, 9.85% in Yahoo! Mail, 8.43% in Gmail, and another 4.74% in Android.
More specifically 25% emails are read on iPhone, 12% on Outlook 2007-10, 13.57% on Hotmail, and almost 10% on Yahoo Mail.

To make it work, you need to:

  • design your template for a small screen first
  • use only inline styling (no style sheets), and only some of it (even margins and padding is questionable)
  • stay away from any background images
  • for every image used, provide both size properties, use exclusively jpg or [rarely] gif format
  • use simplified tables for multiple-column layout, if you have to, not divs, and not html5
  • your content must make sense when images are not shown
  • use live links if [overlay] buttons are used
  • revert any forms to the above links
  • stay away from scripts, javascript, flash, video (unless link only) and similar active elements

Additionally, to comply with mass email regulations you must check your local legal requirements.
These usually allow only opt-in lists, and make mandatory including content of clear terms and conditions, unsubscribe link, and owner/author of the communication.
Here is a nice cross-section of what you can and cannot do with your email style.

Most marketing designers like to use stunning backgrounds and fancy fonts for their products’ introductions. But because this can be only accomplished in compatible email by embedded images, and image-only emails are usually blocked, you need to think again about the design concept. Take a good look how big companies are using color, product images, and textual content, all separately, in their eye catching email designs.
And to top all of this – think hard what your subject line should be, so your email message is not blocked as spam.

At the end – you can always visit Litmus to find out how your newly designed template will look on your potential customers’ screens.

Your cart is empty