We’ve talked about how to make your HTML emails work and how to make them responsive, but there will always be problems. Each mail client is different, the slightest mistake can cause big problems, and it can be a bit of a mess when you’re trying to debug everything.

I’m going to go over some of the more common fixes used. These are what I use to make sure emails look right, and I hope they help you as well.

Where emails can go wrong

When an email doesn’t render properly, there are a lot of systems the email has gone through before it shows up incorrect in your email client. Mail servers, pre-processors, rendering engines, and browsers are all major factors affecting how an email renders.

Mail clients use pre-processors to remove potentially dangerous elements in the code before passing it on to the rendering engine. This can take out elements you’re using to render something accurately. Rendering engines may also transform how the email looks, as each engine has different levels of support for HTML or CSS code.

Some webmail clients and apps will also alter the code, adding their own classes and code into the email. There are fixes that work around this, but you need to target the client specifically.

And human error is always a possibility. One character missing or out of place can break a whole email, and you’ll need to make certain you’re not missing tags, moving tags around, breaking links, or making mistakes in your code.

How you can fix some of these problems

There are a few things you can do to help your emails render correctly. They do require a bit more code, but a well-rendered email can make the difference between an engaged customer and an unsubscriber.

Create a pre-header

A pre-header is a short summary of the email’s contents that immediately follows the subject line. Preview text is pulled from the first few lines of text found within an email, whether displayed or hidden, and by using a pre-header, you can include specific text without it actually being in the email.

You can see what a pre-header will look like in Gmail and on an iPhone by checking XbpMbo.

To implement a hidden pre-header, add this code just underneath the body tag.

<!--[if !mso]><!-- -->
<div style="display:none;width:0;max-height:0;max-width:0px;overflow:hidden;float:left;-mso-hide:all;font-size:1px;line-height:1px;opacity:0;color:transparent;height:0;width:0;visibility:hidden;">
Preheader text goes here...
</div>
<!--<![endif]-->


Add an Internet Explorer Meta Tag

You can enable CSS3 and media query support in Windows 7.5+, Live Mail, and the Windows 8 Mail app by using the IE=edge meta tag. With this tag, Windows clients will render your CSS3 and media queries accurately.

To prevent unwanted side effects in other email clients, enclose the tag in conditional comments and place it in the head of your HTML file.

<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->

Make Gmail follow a specific width

The Gmail app shows the desktop version of your email, but doesn’t have support for embedded styles or media queries. It also doesn’t respect widths, meaning that everything will be moved around.

For every container <table> or <td>, add this CSS element:

min-width: 600px;

This will force Gmail to keep it at the width you’ve designed for.

Force Outlook to pay attention to line height

If you have a specific line height in your CSS, some versions of Outlook will ignore this. You can fix this by applying the code inline:

<td style="mso-line-height-rule:exactly; line-height: 18px;">

You need to make sure the line height is specified in pixels in order for it to render correctly.

Remove default link styles on iOS devices and Gmail

If you include an address, phone number, date, domain extension, or other word, Apple devices will often apply a blue colour to it to make it look like a link. This can be frustrating, especially when it’s applied to domain extensions (for example, you’re telling everyone about how they can save on .com domains). But by setting the correct style for the appleLinks style, you can fix this.

For each item Apple would change, wrap it in a span like so:

<span class="appleLinks">05551234567</span>

Then add the following into your internal stylesheet:

.appleLinks a {color: #000000!important; text-decoration: none!important;}

This particular style would keep the text black and without an underline, but you can change it to match your body style.

And if you need help

There are some very useful sites out there that can help you. The ones I commonly use are:

Mally from Sign-up.to looks over your HTML code and finds any problems. It can also put your CSS inline to make your email even easier to render across clients.

FixMyHTML.com from Dancing Mammoth does exactly what it says – formats and fixes your HTML to make sure everything runs smoothly.

StackOverflow and the Email on Acid Forums have other people who are happy to talk you through your problems – and it’s possible that someone else has already had the exact same problem and the answer is available through a quick search.

And, finally, the W3C Markup Validation Service is there to check out your HTML and point out any serious problems.

Here are some other resources that I’ve referred to over the years:

Templates and Email Builders

• Foundation for Emails – A HTML and CSS framework to produce responsive emails
• Inkbrush – A web-based email design and coding tool
• Email on Acid’s Email Template List – A detailed list of over 600 free templates available
• MailBuilds – HTML email building software you can purchase

Resources

• Email on Acid’s Boilerplate – A free and fully commented email boilerplate you can use to build your template upon
• Responsive Design.is’s Media Queries for Common Devices – A lit of the media queries you should use when focusing on a particular browser
• FreePSDFiles’ Responsive Devices PSD Mockup – A PSD mockup of a desktop, laptop, tablet, and phone for testing out your initial email designs

Guides

• Email Standards Project – Runs through the different mail clients and gives you detailed reporting on how they work
• MailChimp’s Guide to How HTML Email Works – A detailed guide on HTML email
• Campaign Monitor’s Ultimate Guide to CSS – A breakdown of the CSS support for email clients
• MailChimp’s Guide to Typography – A guide on font choices and CSS
• Litmus’s Guide to Microsoft Outlook – How to make your emails work in this popular mail client
• Campaign Monitor’s Bulletproof Background Images – How to get background images to work perfectly in your emails
• Litmus’s Image File Type Guide – Listing which image file types are best for email
• Lynda.com’s Course on Creating a Responsive HTML Email – A paid course showing you how to create responsive emails
• Oracle’s Email Design and Coding Recommendations – A white paper on email design and coding

Testing

• PutsMail – Litmus’s testing platform
• Email Testing – Email on Acid’s testing platform
• Inbox Inspector – A free quick inbox testing platform
• Premailer – A pre-flight check for all your emails

I hope that you’ve enjoyed this series on creating HTML emails, and that you’re making great emails now!

Icons from the Dashel Icon Set by Print Express.