Some people say HTML email design is hard. I don't think it is. Sure, the latest HTML/CSS techniques are not supported sometimes. But that's okay. It means you have to worry less about the bells and the whistles and more about the content you want to share with others.
Over the past 6 years I've learned a few things about coding HTML emails and I would like to share this knowledge with you. So if you're just starting out as an HTML email designer, this article is for you. And if you're a seasoned HTML email designer, who knows you might learn a thing a two (or you can add more tips in the comment section below).
First things first. Use tables for anything layout related. Forget those fancy <div> elements you've come to love. Tables are better and more consistently supported across the many email clients out there.
The easiest layout available is the single column version. All you need is one table with a specified width either in pixels or percentages and you're set to go.
Example of a single column layout:
<table width="100%">
<tr>
<td>
Hello World!
</td>
</tr>
</table>
As I mentioned earlier, the easiest layout available is the single column layout. But what if you need two columns? Well, then there are two methods you can use.
<table width="100%">
<tr>
<td width="40%">Column 1</td>
<td width="10%"> </td> <!-- *1 -->
<td width="40%">Columns 2</td>
</tr>
</table>
This is how it has been done for many years and still is in many cases.
**1: The second table cell is used to create some breathing room between the two columns. Make sure you use a spacer image and set the width to the amount of whitespace you would like create. For now I've used a non-breaking space but keep in mind that empty table cells don't play nice in some email clients.*
Method 1 is fine to use, but if you want your emails to be responsive (optimized for mobile devices like Android, iPhone or Windows phones), it's best to use a different method.
<table width="100%">
<tr>
<td>
<table align="left" width="48%">
<tr>
<td>Column #1</td>
</tr>
</table>
<table align="right" width="48%">
<tr>
<td>Column #2</td>
</tr>
</table>
</td>
</tr>
</table>
The only difference between this method and the first method, is that we use two tables inside the main table instead of two table cells inside the main table.
This approach makes it easier to transform your email from a two column layout to a one column layout when optimizing for mobile devices such as an iPhone. And by setting the widths of the column tables to something less than 50% of the full width of the email, you also create some breathing room between the two columns without using an image spacer. That's a win-win!
Tip: Always reset the following table attributes to zero:
border-collapse:collapse; to tablesThis reset fixes consistency issues on different email clients e.g. default table cellpadding might be bigger in Gmail than in Microsoft Outlook 2010. Basically you remove any whitespace in and out of a table so the table looks the same in every email client.
Example of resetting table attributes:
<table border="0" cellpadding=0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td>Hello World!</td>
</tr>
</table>
There is no magic number or a standard width. This is something you should test. But if you keep the width of your email within 640px you should be more than fine in most email clients.
Although with the rising number of people using their smartphones to open emails more often it's important to prepare your emails for mobile. Or as the experts say: responsive email design.
Tip: How to create a responsive HTML email from scratch
Always write your CSS inline, or use a tool to that does this automatically. Some email service providers include such a tool...[cough] Copernica does :-) [/cough].
The reason you should use inline CSS, is because email clients like Gmail remove the head and body tags by default. This as a result leaves you with an HTML email without any styles. By using inline styles your email will look like it's supposed too. Inline CSS stays untouched.
To use inline styles you use the style= attribute inside an HTML element. The following example shows how to change the color of the text inside a <td> to red.
Example of how to write inline CSS:
<table>
<tr>
<td style="color: red;">
Using inline CSS
</td>
</tr>
</table>
Example of how not to write inline CSS:
<style type="text/css">
.fooBar {color: red;}
</style>
<table>
<tr>
<td class="fooBar">
Using inline CSS
</td>
</tr>
</table>
Remember, it's not prohibited to use CSS classes in your HTML email. Just make sure you bring those styles inline.
Certain CSS properties don't work in every email client. That is why it's best to avoid the following CSS properties to prevent inconsistencies:
p & <div> not supported)Float/position alternative
Do you remember the first paragraph of this article: Use tables for layout? If you would like to float an image for example to the right of an article, it's best to use the align= attribute instead.
Example of using the align attribute on a <td>:
<table width="640">
<tr>
<td width="540">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
<td width="100" align="right">
<img src="http://placehold.it/80x80"/>
</td>
</tr>
</table>
Example of using the align attribute on an image:
<table>
<tr>
<td valign="top">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<img src="http://placehold.it/80x80" align="right"/>
</td>
</tr>
</table>
Margin alternative #1
There are a few alternatives available. My favorite one is NOT using a 1x1 transparent image spacer. But you could swap margin for padding, since padding has great support in email clients. Just don't apply padding to <p> and <div> tags.
Say you need extra margin at the bottom of every article in your email. Instead of adding a bottom margin, add some padding to the bottom:
<table>
<tr>
<td style="padding: 0 0 20px 0;">
This is your article
</td>
</tr>
</table>
Margin alternative #2
If the first alternative is not an option, you could also use empty table cells to create whitespace. Add style="line-height: 0; font-size: 0;" to the table cell, place an non-breaking space ( ) inside and give it a height or width.
Example of creating whitespace with empty table cells:
<table>
<tr>
<td style="line-height: 0; font-size: 0;" height="10"> </td>
<tr>
</table>
The only caveat: this only works on table cells.
Margin alternative #3 You can of course use a 1x1 transparent image spacer to create whitespace like this:
<table>
<tr><td><img src="spacer.gif" width="1" height="10" alt=""/></td></tr>
</table>
You can control the whitespace by setting the width & height of an image spacer. If you would like to have a 10px high whitespace at the bottom of an article, set the height of the image spacer to 10px. But I wouldn't recommend this now, because the first two alternatives are far better then this. But this is how I used to code my HTML emails in the old days.
Tip: Always give image spacers a width and height or Microsoft Outlook 2007+ will do that for you and it's not pretty. It may result in whitespace that is too wide or high. Depending on the type of whitespace you want. If for example you want your image spacer to be 10px in height, set the width to 1px.
Background-image alternative There is no alternative, but you can provide fallback background colors for background images. Whenever a background-image isn't rendered in for example Microsoft Outlook 2010, the reader will see a background color.
Example:
<table>
<tr>
<td style="background-image: url(http://placehold.it/80x80);
background-color: red;">
Hello world!
</td>
</tr>
</table>
Images can make your HTML email look great. But don't rely too much on images. Remember, (written) content is still important. A few things to take into account:
style="display: block;" to remove bottom whitespace in Hotmail (now Outlook.com)There are a few more things to avoid that can harm your HTML email performance wise, if you don't want it to end up in the spam folder.
<input type= for example)Flash/embedded video alternative If you still would like to use Flash or video in your email, use a preview image that links to the actual Flash or video on your website.
If you have anything to add let me know in the comment section.