On Designing Emails: Part 3 – Common Hacks to Fix Your Emails - Heart Internet Blog - Focusing on all aspects of the web

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

Icons of an envelope, an eye, and a desktop and a mobile device

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

Icons of a gear, a pen composing on a sheet of paper, and a code window

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

Icons of a laptop, links, and comments

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

Resources

Guides

Testing

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.

Subscribe to our monthly Heart Internet newsletter, filled with the latest articles about web design, development, building your business, and exclusive offers.

Subscribe now!

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Leave a reply

Comments are closed.

Drop us a line 0330 660 0255 or email sales@heartinternet.uk