How to build a bulletproof HTML email

How to build a bulletproof HTML email

/ 2 minutes of reading

I’ve been building HTML emails for a while now, and I have some top tips which I hope will save others new to the field a bit of time! Here are my top tips for building an HTML email which works well in all web and desktop email clients.

  1. Don’t bother with the <head> tag…

    …many web email clients simply strip it out, as they would have two tags in the page otherwise.

    It’s a shame as the desktop email clients seem to keep it in and it would make life a bit easier with it there. Anyway, any CSS you add to your email needs to be inline.

  2. Outlook 2007/10 need close attention

    Microsoft have chosen Word to render HTML emails for Outlook 2007/10, instead of using Internet Explorer like the previous versions.

    This means you cannot use the ‘background’ HTML attribute to assign a background image to a block element and there is not much CSS (albeit inline) that it will render.

    This Guide to CSS support in email is extremely helpful for wading through what you can and can’t use.

  3. Do not use CSS unless you really have to…

    … but for Hotmail – ensure all image tags contain:

    style="display: block;"

    If you don’t the email client adds whitespace beneath your images which will muck up your design.

    Also if you have underlined links, style anchor tags with:

    text-decoration: underline;

     

  4. You’ve heard it before – tables all the way!

    Tables, tables, tables is the name of the game – forget web standards – we’re going back to 2001 coding.

    Do not use divs to align your elements, use tables with as few colspans and rowspans as possible (as this can confuse some older email clients).

    Give each table, td and th a width and height and set cellpadding and cellspacing to 0. Style text as much as you can using the <font> tag.

  5. Finally test, then test again…

    As with browsers, all email clients render code differently, therefore test your email in the most popular email clients for your recipient list.

    You also need to do a spam test to check the email will get through spam filters (ensure the IP address you send your email from is authorised by your domain).

    Litmus can provide screen shots of your email in numerous email clients and spam test and although primary used to send emails, Campaign Monitor has a similar app which is pay per test.

Scroll to Top