{"id":10309,"date":"2015-11-18T13:30:12","date_gmt":"2015-11-18T13:30:12","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=10309"},"modified":"2015-11-18T13:30:12","modified_gmt":"2015-11-18T13:30:12","slug":"on-designing-emails-part-3-common-hacks-to-fix-your-emails","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/on-designing-emails-part-3-common-hacks-to-fix-your-emails\/","title":{"rendered":"On Designing Emails: Part 3 \u2013 Common Hacks to Fix Your Emails"},"content":{"rendered":"

We’ve talked about how to make your HTML emails work<\/a> and how to make them responsive<\/a>, 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.<\/p>\n

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.<\/p>\n

Where emails can go wrong<\/h3>\n

\"Icons<\/p>\n

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.<\/p>\n

\nMail clients use pre-processors<\/a> 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<\/a> may also transform how the email looks, as each engine has different levels of support for HTML or CSS code.<\/p>\n

\nSome webmail clients and apps<\/a> 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.<\/p>\n

\nAnd 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.<\/p>\n

How you can fix some of these problems<\/h3>\n

\"Icons<\/p>\n

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.<\/p>\n

Create a pre-header<\/h4>\n

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<\/a>, whether displayed or hidden, and by using a pre-header, you can include specific text without it actually being in the email.<\/p>\n

You can see what a pre-header will look like in Gmail and on an iPhone by checking XbpMbo<\/a>.<\/p>\n

To implement a hidden pre-header, add this code just underneath the body tag.<\/p>\n

<!--[if !mso]><!-- -->
\n<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;\">
\nPreheader text goes here...
\n<\/div>
\n<!--<![endif]-->
<\/code><\/p>\n

Add an Internet Explorer Meta Tag<\/h4>\n

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<\/code> meta tag. With this tag, Windows clients will render your CSS3 and media queries accurately.<\/p>\n

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.<\/p>\n

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

Make Gmail follow a specific width<\/h4>\n

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.<\/p>\n

For every container <table><\/code> or <td><\/code>, add this CSS element:<\/p>\n

min-width: 600px;<\/code><\/p>\n

This will force Gmail to keep it at the width you’ve designed for.<\/p>\n

Force Outlook to pay attention to line height<\/h4>\n

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:<\/p>\n

<td style=\"mso-line-height-rule:exactly; line-height: 18px;\"><\/code><\/p>\n

You need to make sure the line height is specified in pixels in order for it to render correctly.<\/p>\n

Remove default link styles on iOS devices and Gmail<\/h4>\n

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<\/code> style, you can fix this.<\/p>\n

For each item Apple would change, wrap it in a span like so:<\/p>\n

<span class=\"appleLinks\">05551234567<\/span><\/code><\/p>\n

Then add the following into your internal stylesheet:<\/p>\n

.appleLinks a {color: #000000!important; text-decoration: none!important;}<\/code><\/p>\n

This particular style would keep the text black and without an underline, but you can change it to match your body style.<\/p>\n

And if you need help<\/h3>\n

\"Icons<\/p>\n

There are some very useful sites out there that can help you. The ones I commonly use are:<\/p>\n

Mally from Sign-up.to<\/a> 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.<\/p>\n

FixMyHTML.com from Dancing Mammoth does exactly what it says \u2013 formats and fixes your HTML to make sure everything runs smoothly.<\/p>\n

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

And, finally, the W3C Markup Validation Service<\/a> is there to check out your HTML and point out any serious problems. <\/p>\n

Here are some other resources that I’ve referred to over the years:<\/p>\n

Templates and Email Builders<\/h4>\n