This series of posts were created when I worked at a Marketing Automation company called “Loopfuse” in the early 2010’s. I was the Senior Manager of Technical Support and I posted blog content on the merits of Marketing Automation in general, as well as some of the technical aspects specific to that platform. I recently rescued these posts from the Wayback Machine for posterity and to remind myself of what I have written in the past. The images are missing, but you’ll get the idea.

This post will be about designing the HTML layout of your email campaigns. For most of the web designers out there, I feel your pain when it comes to designing HTML for email. It’s so much easier and more flexible to use CSS rather than older HTML methods. Unfortunately the email client world has not moved on much from the 1990’s and that means that new developers that have always coded in CSS must learn the coding methods of yesteryear and produce HTML that will work in those clients. So here are a few tips when tackling email campaign layout.

Keep the layout simple

Email layouts should be simple and direct. You can still communicate quite a lot of information with a simple approach and it will help in creating HTML code that is cross-platform compatible. The three row table (header, body, footer) with nested tables and content within is a good start.

Use tables

Email clients do not handle CSS very well. They especially have a hard time with DIVs for layout. That means that it’s time to dust off the old HTML books – or take the modern approach and look it up online. I’d suggest http://w3schools.com/ for brushing up on your table layout code. They have “Try it Yourself” buttons in each section that you see how code will look in the browser you are using. You may need to use some spacing cells to get things just the way you want them. Experiment until you have it right.

Set widths on cells

You will be relying on cell widths to align columns of text. You can use percentages if you don’t have a lot of images in the email, but they may look strange if scaled improperly. Be specific like this:

<td width=”200”>
<p>Information Here</p>
</td>

Keep the overall width under control

Try to keep the body of your email to no larger than 500-600 pixels wide. Keep in mind what people will be using to preview your email. A lot of consumers will see your email in a preview pane with just a couple of lines visible before they click on it. If that space is taken up by large images or irrelevant information they may not even open it. People are increasingly using their smartphones to access email on the go. Although I love my Android phone, the viewable area is much smaller than my desktop monitor.

Smart use of CSS

Again, CSS is not your best friend in email templates. Never attach it to the <body> tag. Do not try to link to external style sheets. If you do so, many email clients will strip it out before delivering it to the Inbox (*cough* Google *cough*) and that will simply destroy your layout. You can use it sparingly inline like this:

<table style=”font-size: 12px; font-family:Arial, Helvetica, sans-serif”>
<tr>
<td><h1 style=”color:#000099”>Title text</h1></td>
</tr>
</table>

Most email clients should have no problems with inline styling. If you do see problems in your testing, go back to early HTML formatting:
<font size=”5″ face=”arial” color=”red”>Sample Text</font>

Actual size images

Some email clients will stretch your image just like a web page and others will completely ignore the stretching rules. The only way to avoid this issue is to use images that are exactly the right size. This is where having a simple layout will play to your advantage. If you have a complicated layout with graphics stretching across table cells, you may have to slice them up just right.
There is some debate on whether you should explicitly set the width and height of you images. One problem with doing this is that you risk having gaps in your email while images are blocked. If you’re OK with that, then go ahead and set them, but just be aware.

Don’t embed video

Don’t do it. There are only a couple of email clients that can play video from within, and even then only if it’s in a certain format. If you need to promote a video use a still frame image and link that over to wherever you have it hosted (or on a landing page). This may change as HTML5 picks up and more clients can handle that coding but, for now, you might want to take a more simple approach.

Background Images

Background images are another sticky problem. I would suggest that you avoid use of background images wherever possible because of formatting issues in certain email clients. Outlook 2007 simply won’t load them. If you must use them, background colors or images must be assigned to the cell of the table and then width/height of the cell set explicitly. Even then you need to have content that will fill the height correctly.

Use Alt text for images

It’s generally a good idea to use Alt text for images in web pages and it’s useful in email campaigns as well. If people have blocked images they can still get information that may be interesting to them and prompt them to turn on images for further details.
An example might be a coupon image that promotes 50% off a product and alt text that states “Save money with this coupon”. It’s enough to get the person to turn on images to see what the exact deal is. The side benefit of this is that it will also count as an email open at that point. Blocked images prevent the tracking of email opens.

Use clean HTML code

Close your <li> and <p> tags. Spammers are sloppy. Don’t be a spammer.

Test, test, test

I can’t stress this enough. Test your email in several clients such as Thunderbird and Outlook. Make sure it looks good in Gmail, Hotmail, and Yahoo. Test those clients in several browsers such as IE, Firefox, Safari, and Opera. Unfortunately, Outlook 2007 and 2010 took a great leap *backward* by using Word as their HTML rendering engine rather than Internet Explorer. This caused all sorts of compatibility issues with HTML display for those clients.

As long as you design for the lowest common denominator, you should be able to reach most email clients without a lot of extra workaround code. Keeping the layout simple will also help you focus your message. Be aware of how much space you have to capture a customer’s attention in their email client and use that to your advantage.

There are several places on the web that you can find free email templates, or even pay for some nicer ones. Here are a few examples I found when Googling about: