Creating Bulletproof HTML Emails

Published in

tealmedia

7 min readAug 26, 2016

Pro Tips & Tricks to Make Your Life Easier

Even the most experienced developer can be stumped by HTML emails. With multiple email clients operating on different rendering engines and countless devices for reading emails, nailing down a reliable email template can be a nightmare.

At Teal Media, we use a hybrid fluid template that employs responsive techniques to give us more control over the email. ‘Fluid’ simply means using percentage-based sizing to adapt emails to different screen sizes. Our hybrid fluid template is uses media queries but it doesn’t depend on them. Because of this our template doesn’t break in email systems that don’t support media queries.

Check out these 12 pro tips we use to create email templates:

1: Leverage Outlook conditional tags

Outlook 2000, 2002 & 2003 render with Internet Explorer and are fairly easy to deal with. But Outlook 2007 and beyond are rendered by Microsoft Word, which can cause problems.

The work around? Use Outlook conditional tags to target Outlook as a whole, including specific years such as Outlook 2010 or 2013.

Target Outlook 2007 and up
<! — [if mso]>
<style type=”text/css”>
     /*Your styles here*/
</style>
<![endif] →Target Outlook 2000, 2002, & 2003
<! — [if IE]>
<style>
     /*Your styles here*/
</style>
<![endif] →Target all Outlook versions
<! — [if (gte mso 9) | (IE)]>
<style>
     /*Your styles here*/
</style>
<![endif] →

The mso number within the conditional tags refers to which Outlook version you are targeting. There are other mso numbers to target different versions of Outlook:

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15

A word of warning, trying to specifically target Outlook 2000 ([if mso 9]), 2002 ([if mso 10]), or 2003([if mso 11]) does not seem to work. When it comes to targeting Outlook 2000, 2002, and 2003 using [if IE] is your best bet. On the other hand, Outlook 2007 and up responds very well to targeting specific versions with mso numbers such as [if mso 15] for Outlook 2013 or [if mso 12] for Outlook 2007.

Example

Don’t feel limited to putting CSS styles in your conditional tags. You can use them for anything from adding a spacer <tr> or maybe an extra <br>.

<! — [if (gte mso 9)|(IE)]>
<table width=”100%”>
<tr>
<td width=”50%” valign=”middle” style=”padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;” >
<![endif] →<! — [if (gte mso 9)|(IE)]>
</td><td width=”50%” valign=”middle” style=”padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;” >
<![endif] →<! — [if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif] →

2: Get fancy and use operators in Outlook conditional statements

Microsoft allows for the use of the following operators in it’s conditional tags:

! — not
lt — less than

lte — less than or equal to
gt — greater than
gte — greater than or equal to
& — and
| — or

! example
<! — [if !(IE)]>
<style>
     /*If not Outlook 2000, 2002, and 2003.*/
</style>
<![endif] →lt example
<! — [if lt mso 14]>
<style>
     /*If less than Outlook 2010*/
</style>
<![endif] →| example
<! — [if (mso 12) | (mso 15)]>
<style>
     /*If Outlook 2007 or 2013*/
</style>
<![endif] →

3: Make use of font smoothing

body, html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }

Okay, okay, so not every email client supports font smoothing but you might as well use it on the ones that do (Apple Mail, iPhone, iPad). For those type geeks out there it makes quite a noticeable difference. Even an untrained eye can see the subtle difference in the harshness of the font.

4: Use margin with a capital M to fool Outlook.com

If you find that your email template is losing margins in Outlook.com try replacing your margin declaration with ‘Margin.’ The capital M prevents the declaration from being stripped out by Outlook.com.

Change this: p{ margin: 10px;}
To this: p{ Margin: 10px;}

Outlook.com strips out margin with a lowercase but not Margin with a capital M, problem solved!

5: Use Campaign Monitor’s CSS Support List

Speaking of things not working, when in doubt check Campaign Monitor’s handy list of CSS support for the top 10 most popular mobile, web and desktop email clients on the planet.

www.campaignmonitor.com/css/

6: Target all email clients except Outlook

Use the below code to hide HTML elements and CSS styles from Outlook.

<! — [if !mso]><! — →<! — <![endif] →

You’re welcome.

7: Hide elements from Outlook with mso-hide:all

<table style=”mso-hide:all;”></table>

Use with caution, depending on how deep your tables go you may need to put mso-hide:all on multiple tags. When in doubt keep going down layer by layer and adding mso-hide: all until it is completely hidden from Outlook.

8: Outlook got rid of your padding & margins? Not so fast.

Add an id or class to your element and then call it in conditional tags in your <head> to reapply styles that may have been lost due to Outlook’s rendering engine.

<p class=”outlook”>I need a little Outlook help</p>

Inside of conditional tags in the head of your document, make sure to use the !important tag and that it has a space before it.

<head>
<! — [if (gte mso 9) | (IE)]>
<style type=”text/css”>/*This should do the trick*/
.outlook{margin-top:20px !important;}</style>
<![endif] →
</head>

This doesn’t always work, but you’d be surprised how often it does! We’ve used this to fix margins, padding, and to change the width of elements.

9: Use Campaign Monitor’s button and background image generator

Save yourself some time! Use these great tools for hassle free buttons and picture perfect background images. (In email clients that don’t support background images, a fallback background color will appear.)

buttons.cm

backgrounds.cm

10: Use tables to simulate custom colored horizontal rules

<table border=”0" width=”100%” cellpadding=”0" cellspacing=”0">       <tbody>
<tr>
<td style=”background: none; border-bottom: 1px solid #f1ebe2;      height: 1px; width: 100%; margin: 0;”>&nbsp;</td>
</tr>
</tbody>
</table>

For those times when your client wants a weird colored line. This solution works across the most popular email clients, from Outlook 2003 to Yahoo to AOL to Gmail.

11: Use Google Fonts in emails

The easiest way to use web fonts in an email is by using Google Fonts instead of hosting them yourself. Apple Mail and iOS Mail (iPhone & iPad) support web fonts. Other email clients either do not support web fonts or have very limited support.

<html>
<head>
<! — [if !mso]>
<! — → <link href=”https://fonts.googleapis.com/css?family=Montserrat" rel=”stylesheet”>
<! — <![endif] →
</head><body>
<p style=”font-family: ‘Monserrat’, Arial,Helvetica, sans-serif; font-weight: 400;”>Hello, I’m in Montserrat</p>
</body>
</html>

The most important thing when using web fonts in an email is to make sure to select a fallback font for those clients that do not support web fonts. In particular, Outlook has some issues with using web fonts, but there are a few ways to get around this.

The first way you could try would be to wrap the link to your font in an Outlook conditional tag:

<! — [if !mso]><! — → <link href=”https://fonts.googleapis.com/css?family=Montserrat" rel=”stylesheet”><! — <![endif] →

Then set the font-family of your element with fall back fonts:

<p style=”font-family:’Montserrat’, Arial, Helvetica, sans-serif; “>Hello, I’m Montserrat</p>

You should be good to go. Outlook will disregard your link to the Montserrat font since it’s wrapped in conditional tags which essentially say, ‘if the email client is not Outlook do this.’

The second thing you could try is to call the class or element in question in a conditional tag that Outlook can read. Make sure you have the !important tag with a space in front of it, for example:

Target all Outlook versions
<! — [if (gte mso 9) | (IE)]>
<style>
table, tr, td, p{font-family: Arial, sans-serif !important;}
</style>
<![endif] →

12: Check for unclosed tags & always inline your CSS

Before inlining your CSS, be sure to check for unclosed tags. It’s easy to forget to close a tag on a really long email. At Teal, we use this handy little tool to check for unclosed tags jona.ca/blog/unclosed-tag-finder. It doesn’t always point you to the exact spot, but it will give you a good idea where the problem lies.

Last, but not least, always inline your CSS before you send your email. This is because some email clients strip out styles in the head, remove classes and ids, and/or only read inlined styles. There are many tools out there to inline your styles for you. At Teal we think inliner.cm is pretty awesome.

That’s all folks. In 2016 coding an email remains a hacker’s game. There are no standards across the board for crafting beautiful responsive emails that work in every email client, so you need to bring your own creativity and solutions to the table. Hopefully these tips will save you some time and a few email headaches.

Teal Media is a full-service creative agency with a conscience. We pour every ounce of our passion and skill toward your success, because we, too, want the world to be a better place. We believe purposeful design can transform organizations, inspire action, and enable progress.

Learn more at TealMedia.com and find us on Facebook and Twitter.