Tips on Coding a Bulletproof HTML Email Template

March 1st, 2016 in Web Development 3 minute read

There has always been a debate going about whether email is dead/dying. The fact is that despite all the negative press, email is still one of the most effective marketing tools available. Email provides marketers the ability to send highly personalised marketing material to consumers that can be opened anywhere – from smart watches to desktop computers.

With the recent release of Office 2016, I was once again hoping that by some miracle Microsoft would have updated their rendering engine for Outlook to Webkit (like Outlook 2011 for Mac), yet I was left disappointed once again. Outlook 2016 still uses the Word engine to render emails, and it seems the “Fix Outlook” campaign fell on deaf ears…

This prompted me to put together a few tips on building an email template that will display properly on various email clients, as well as pass through spam filters.

  • Use tables. Always.
    Unfortunately a bunch of email clients still ignore CSS layouts. Tables should be used to ensure the layout of your template displays correctly for all users.
  • 600 pixel width
    Keeping the width of your email to 600px will ensure most of your recipients are able to view the email in full. Scrolling from left to right is a sure way to lower your response rate.You can build a responsive template using media queries, but because Gmail ignores any CSS that’s not inline, and media queries can’t be used inline, your email template will not always display correctly.
  • Avoid unknown “Email template builders”
    There are a few email template builders that are good at creating high quality html email templates (such as MailChimp or Campaign Monitor), but there are tons of lower quality versions out there that will add an excessive amount of html to your template which will trigger the spam filters (interestingly, using the word “Oprah” in your email will also earn you a few spam points).
  • Inline CSS
    Gmail will ignore any CSS that is added to the head of the template. Try to use as many html attributes as possible and always add CSS inline.
  • Conditional targeting
    If you need to make use of elements that we know is not supported by Outlook, make use of conditional targeting to show or hide elements.
  • Images
    By default, some email clients hide images. Thus it is important that you cater for this by using background colours to ensure text is still readable, and using proper alt text that describe what the image is. Remember to also include basic resets for images that are displayed.
  • Paragraph tags
    One of the most annoying things about creating an email template is how different email clients treat line spacing and margins in paragraphs. You could spend hours trying to find out why Outlook adds huge spaces between each line, and why Yahoo mail adds no spacing whatsoever, a quick way to get around this is to use <font> instead of <p> and manually add margins. Email clients add default style to <p> tags, but not to <font> tags and certain email clients will ignore margins/line-height styling even if important is used.
  • Copy
    It’s best to stick to standard system fonts (such as Arial or Helvetica) as most email clients don’t support font embedding. If you do wish to use web fonts, put them behind a Webkit conditional media query.Another important point to remember is that every email should have a balanced image to text ratio. If you have an email template with only images, this will add a few more spam points, and recipients are likely to miss important information if the images are not displayed.
  • Unsubscribe
    Recipients can change their minds on whether they want to receive your newsletters. Make it easy for them to unsubscribe by adding clear instructions/links to do so.
  • Test
    Just like a website, it is important to test email templates thoroughly using as many email clients as possible. There are many tools out there to assist you in doing this, and 2 of my favourites are:

    • PutsMail: This is a free tool where you can copy and paste your code and send it to a couple of email addresses. I have many email clients installed on my PC and on mobile to view the email.
    • Litmus: A premium service which allows you to view your email in 40+ email clients and devices.

This list barely scratches the surface of all the things that need to be kept in mind when building your email templates and if you would like us to give you a hand, don’t hesitate to get in touch about our email marketing services.

More from the Blog