Coding HTML emails is not like coding a website. The code is that of 1999, back when we used tables to build websites, before mobile and responsive even existed, and the 800×600 screen resolution was the most common.

Whether you’re new to HTML emails or even have experience with them, these are my top 5 HTML email coding tips for 2014.

Tip #1: Tables are your friends

<div>s and floats won’t work in HTML emails. Unlike browsers that are advancing more and more, email clients used to view HTML emails vary greatly in the HTML and CSS that they support, and many are stuck in the past. Outlook 2007+ even uses MS Word as the rendering engine! You’re stuck testing and supporting anything from Outlook (still the most popular desktop email client) to the Mail app in iOS7, and everything in between. This is where HTML tables are your friend! Use them to structure the entire email, and you will have less problems.

Tip #2: Use HTML attributes over CSS

CSS support varies a lot between email clients.  You will have better support if you use HTML attributes rather than CSS. For example, use the <td> width and height attributes rather than CSS (but remember, they don’t take a unit!). The bgcolor="" attribute has better support than the CSS background-color property.

For copy however, we don’t need to go all the way back to using the <font> tag. CSS properties like font-family, font-size, color, line-height, etc. all work very well. However, there are some that may not work on certain HTML tags. For example, line-height does not work directly on a <td>. This brings us to our next tip.

Tip #3: Don’t use Heading and P tags. Use a DIV!

This may seem a little odd. Why would I use a <div> for my headings and paragraph text? Well, though they don’t work for the structure of an email, they can still be used within. There’s a few reasons why we would do this:

• Not all CSS we use for our fonts work well directly on the <td> holding our copy, like line-height mentioned in the previous tip.
• Outlook.com (was Hotmail) doesn’t support margin, and uses its own values on headings and paragraph tags, even if you use !important. (Side note: it also uses its own line-height on the * selector!)
• Outlook 2007+ do not support padding on paragraph tags (and <div> too).

A <div> is a block-level element like <p>, which allows us to have inline elements inside just like if it was a heading or paragraph tag.

Tip #4: Use <br /> or empty rows for padding/margin

Before Outlook.com switched from Hotmail, using headings and paragraph tags worked quite well. We could use margin as it was well supported across the board, getting around the issue with no padding support in Outlook 2007+. However, now we don’t seem to be able to use either margin or padding because there’s problems with both in different email clients. What are we to do?

Within copy, we can use the handy <br /> tag. This allows us to have multiple paragraphs of text, without the use of bottom padding or margin.

Another way, is to use an empty table row/cell pair that is given a height, AKA an empty spacer cell. This technique can be used for space where a <br /> or <br /><br /> creates more space than you desire. You can also use this technique for space between sections of your email, and to create space around/within a block that has a background colour.

UPDATE: Rather than using empty spacer cells to create space below and around/inside sections of your email, you can using CSS padding on <td> tags! Say what?! Yes, it’s true. Make sure to thoroughly test though – there can be some rendering discrepancies in Outlook 2007+ if you combine padding AND width on a table cell. In this case, you could instead try the width on the parent <table>, or nest another table inside the table cell with the width. There’s also issues if you have two table cekks side by side, and only for example, top padding on one of them. It does take some getting used to, but in the end it’s worth it and you’ll remember all this little things to work around. You will have cleaner code, less code, and it really is a lot better than empty spacer cells! (Bonus: It gets around the problem with Outlook 2013 blowing up empty spacer cells taller than you want them!)

Tip #5: Images need some love too

There are two pieces that should be the default on all your images.

• Use display: block;. Outlook.com creates extra undesired space beneath images. This will remove it.
• Use either the CSS border property, or the HTML border attribute to remove borders around images, especially when they are linked. Outlook will have a border on linked images otherwise. (Note: the CSS border property is not supported in Lotus Notes 6/7. Unless you have a lot of Lotus Notes users, you can probably use the CSS version without worry)

Don’t forget to provide a width, height, and alt text on your images too!

Bonus tip! Test test test…

And test some more! Testing is the key with HTML emails, and you can’t ever test too much. Test emails in as many email clients as you have access to. Create a Yahoo! account if you don’t have one. Check in the default and third party mobile email apps. Use other tools to see screenshots of email clients you can’t get your hands on. And if you can, look at what email clients your subscribers are viewing your emails in so you’ll be able to make decisions between using the CSS property or the HTML attribute for example.

What are your tips for coding HTML emails? Share in the comments below!