12 Killer Tips and Tricks for Building HTML Email

EDM (Electronic Direct Marketing), most of the time refer as email marketing, html emails or newsletters. They are used to announce new products release, promotion or important announcement to consumers. Tools such as Salesforce can help you to set up these campaigns. Well, we will not discuss about how electronic marketing campaigns work. In Queness, we always focus on technical part to web designers and developers.

I have been building EDM for a few years now, a lot of people labelled EDM as dirty job, because it's harder than building a website! Believe me, if you're working for a digital agency, there are no escape! I hated it, but I'm alright with it nowadays because I know how to build it correctly and avoid all common issues across different email clients. I guess the first step is to setup multiple email clients (outlook 03, 07) on a computer or different computers. Setting up software and hardware can be a nasty job, call your Tech Support if you need it. :)

Alright, cut thing short, the following is a list of tips and tricks, something I learned from all the EDMs I have built and of course from Internet as well. I pretty sure it will help you to build a consistent HTML email layout across all famous web-based email clients and email client software.

1. CSS Support

This is important, not all CSS properties are supported. CSS support in email client is limited and worse than IE6. For example, background image is not support by outlook 2007/10, Windows Live Hotmail and Gmail. So, you need to know what's supported. Link below is extensive list of CSS support compiled by reputatable online email management service - Campaign Monitor. This CSS list is updated frequently.

2. Communicate with Your Designer

You need to understand some designers are not aware of the limitation of email clients. Some of them assumed it works exactly like web browser. So, it's good for a developer to be involved in the design phase if the designer hasn't designed an EDM before. I had this issue before when the designer decided to use a massive background image as part of the design, and it just won't work in some email clients.

3. Use MailChimp HTML Email CSS Fix

Use HTML Email CSS fix from MailChimp. MailChimp is a reputable email marketing and email list manager. They have came out client specific styles that fix some of the email client issues.

4. CSS Reset for HTML Email

Yes, CSS reset for EDM! It fixes consistency issues on different email clients. This reset was introduced in HTML Email Boiler Plate website. I have been using it and they work great.

/** 3. Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag. To correct we set the top/bottom margin to 1em in the head of the document. Simple fix with little effect on other styling. You do not need to move this inline. NOTE: It is also common to use two breaks instead of the paragraph tag but I think this way is cleaner and more semantic. NOTE: This example recommends 1em or 1.12 em. More info on setting web defaults: http://www.w3.org/TR/CSS21/sample.html or http://meiert.com/en/blog/20070922/user-agent-style-sheets/
INLINE: Yes.
**/
p {
margin: 1em 0;
}
/** 4. Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support). Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size.
INLINE: Yes.
**/
h1, h2, h3, h4, h5, h6 {
color: black !important;
line-height: 100% !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: blue !important;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: red !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
/** Outlook 07, 10 Padding issue: These "newer" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table. The issue can cause added space and also throw off borders completely. Use this fix in your header or inline to safely fix your table woes.
More info: http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/
http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/
H/T @edmelly
INLINE: No
**/
table td {
border-collapse:collapse;
}
/** BONUS: Adaptation of Brian Thies (Campaign Monitor) link color fix to render the Yahoo Short Cuts invisible. Yahoo short cuts are links that Yahoo places over certain text in your email without your knowledge. In order to use this fix you need to make the text color the same of the actual font color of your email and reset a few elements. IMPORTANT: You then need to use the Responsys/Smith Harmon link color fix (#7) if you want to style your links to the color you want them to be. If you don't, this fix will change all links to black in Yahoo.
If you are not worried about Yahoo's shorcuts, just remove this code. This is not applicable for Yahoo Classic.
INLINE: No.
**/
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;} /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */

5. Use Inline CSS Style

You need to use inline style in EDM. Classes and ID won't work in email clients.

6. Use TABLE not DIV

Just imagine you are living in year 1990, only HTML 1.0. DIV with float is not supported, as a result, your layout has to be made with TABLE only. Good and bad, I used to like TABLE a lot, so using it is not a big problem to me. The bad, your email HTML code can get really confusing because of nested tables.

A few things to remember while using TABLE in HTML email

Remember to set cellpadding and cellspacing to 0.

Always set the width or height of TD.

Set correct align and valign.

Wrap the email inside a 100% width table. One of the reason to do it is setting the background color. In some email clients, background-color/bgcolor in BODY tag won't work, therefore, you need to wrap your email with a 100% width table and set background color to the table. Read more.

7. IMG Tag

Some important points when dealing with IMG tag:

Do not set width or height to images to make sure the content able to degrade gracefully when images are not loaded.

Use style="display:block". This is a killer tips to fix the extra space issue below images in Gmail and Hotmail.

Always put description of the image in ALT tag. Most email clients tend to ask for user permission (or worse, blocked by IT department) before it loads all images. With ALT tag filled, user will able to read the description of images even though it's not loaded.

8. Use spacer.gif

I think the origin of spacer.gif come from photoshop. It's a 1x1px transparent gif and we can use it to fill in empty TD or to create blank spaces. This is particular useful to add space between two blocks.

9. Use BR Instead of P

One should avoid using P tag for line break, use 2 BR instead. P has margin, and on different email clients, they have different value for it. As a result, it's good to use 2 BR to emulate the same line break effect than using P tag.

10. Width of EDM should be 550-600px

The width of EDM should not exceed 600px. Most of the email clients has a sidebar, and some even using 3 columns view. Plus the width of scrollbar and common screen resolution. 550-600px is the best width for EDM.

11. Do not use Javascript

You must not use Javascript. It won't work and your EDM would possibly get labelled as SPAM.

12. Test it!

You need to signed up for all major email clients such as Gmail, Hotmail and Yahoo Mail. In some company setting, they have test machines setup or virtual machines with Outlook 2003/07/10. Or, some are using online solution such as CampaignMonitor which has a email test services (not free, $5) which will show you the screeenshot of your EDM of an extensive list of email clients screenshot.

Conslusion

That's about it. Building EDM is hard from the start, but once you understand what you should and shouldn't do, it can be a really easy task. I hope all these tips and tricks will able to help you to become an expert in EDM. Please share it if you like it :)

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

I have eDM cutting job for some recent months, now client alert an issue that i cannot fixed. The eDM work correct on all browser (Outlook 2003,2007, 2010, android, IP3, IP4, ỊP, Ipad, Yahoo, gmail...) But some table have border around on IP5s (IOS7). I mean my eDM have a blue background, and all elements above, all table with border, cellpadding and cellspacing =0 but only on IOS7 we still see the white border of them.
Anybody have the same issue, please help me?

I'm working on an EDM currently and trying to add a rollover effect on the linked buttons. I used regular html coding and it works in a web browser but it won't function in gmail, yahoo or outlook (the program itself). Is this just a lost cause?