12 Killer Tips and Tricks for Building HTML Email

12 Killer Tips and Tricks for Building HTML Email


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

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

communicate

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.

/* Client-specific Styles */
	
/* Force Outlook to provide a "view in browser" button. */
#outlook a{padding:0;} 
	
/* Force Hotmail to display emails at full width */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} 
	
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} 

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.

Another explanation why it shouldn't exceed 600px.

11. Do not use Javascript

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 :)

Author: Kevin Liew

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.

Share the love

20 comments

Jodi
Tue, 9th August 2011
This was REALLY great! I am actually in the process of getting our email campaign going and it is a lot of trial and error. You have provided some kick ass info...AND FREE! Thank you so much!!! Reply
Annette West
Thu, 11th August 2011
Hi,

Enjoyed your article, some really good pointers there. Designing for email readers is quite an art isn't it! :)

Something we have found though, is that emails DO look better if you set the width and height attributes in the code, so I was interested in how you find your emails are looking (withouth images on) when you don't set these.

Best regards,
Annette

NewZapp

@nettywest Reply
Reuben
Tue, 8th November 2011
best tip I have ever had in my lifetime...

img style="display:block".

Literally this has bugged me for years...

thankyou :) Reply
pubudu
Sun, 15th January 2012
Thanks Bro,

This helps me a lot. Reply
santhosh.s
Wed, 1st February 2012
Hi, i have created an EDM, it works fine but the client requirement is to give a blue background color (background of the newsletter). I am not able to achieve this. I used an outside table and gave color for it. but for some reason its not satisfying. can u please tel me how can i give a outside background color ?

Thanks & Regards,
Santosh.S Reply
Kevin Liew Admin
Tue, 7th February 2012
That sounds right to me. Basically, I will wrap the content with another table, then use bgcolor and style="background-color" for the outer table. Reply
Jeanine
Thu, 17th May 2012
Yes this are great info but for people who have web developers. i use http://www.htmlforemail.com they have the best tools and i dont have to go inside the code myself.
Reply
Chuy
Tue, 29th May 2012
The MailChimp HTML Email CSS Fix is not working in my code. When I open the newsletter in Hotmail it doesn't apply the width:100% to the divs inside Hotmail. What is wrong? Reply
Bob
Tue, 14th August 2012
You can't use divs, only tables. Reply
Lix
Sun, 10th June 2012
Hello,

You provide really great tips here! Thanks.

I have an edm where I have 3 images side by side like this <tr><td><img src='""><img src='""><img src='""></td></tr>. I can't use the style="display:block" as it will not allow my image to display side by side anymore. I will thus get the whitespace below this row. But I can't split it into 3 columns as well. Any suggestions to this?

Cheers,
Lix Reply
Kevin Liew Admin
Sun, 10th June 2012
Hi Lix, you need to put it in table. Like this:

<table>
<tr>
<td><img src=""/></td>
<td><img src=""/></td>
<td><img src=""/></td>
</tr>
</table> Reply
Hun
Sun, 26th August 2012
Which html editor would you recommend to build the EDM? Reply
Gigi
Wed, 19th September 2012
Thanks you very much. It helped me a lot. I was shorlisted for a job and this was my test. Reply
Lala
Tue, 23rd October 2012
eDM can use <span style="font:Arial, Helvetica, sans-serif; color:#db1f2f; font-size:23px;"> instead of <font size="+2" color="#db1f2f" face="Arial, Helvetica, sans-serif">?? Because Span look more pretty Reply
Karl Kaufmann
Fri, 30th November 2012
Excellent advice--thanks for the tips! Reply
Santosh
Tue, 25th December 2012
Its wonderful. Thanks for sharing such a good article.. I was recently told to make an edm and i was unknown about it. This article made me more clear. Thanks again. :) Reply
Solomon
Sun, 3rd March 2013
This article is very helpful for beginner like me... Thank you friend Kevin Liew Reply
wildati khoirun nisa'
Mon, 9th September 2013
it's so usefull :) Reply
Nim
Mon, 7th October 2013
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? Reply
Catrina
Wed, 13th November 2013
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? Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement