One of the tasks I work on daily for people is email builds. Building robust emails for a matrix of browsers, web-based mail clients and standalone clients can be a very tricky task because email clients sometimes strip out certain tags and render different elements in slightly different ways. After hours of building, testing and fixing bugs which arise due to these differences I have come up with some almost full proof ways of working with certain elements and created this list of 12 email tips which should really help you in your quest for good looking email design across all the major client enviroments.
The enviroments I concentrate on are what I consider to be the four key web-based email clients and the four key Windows and Apple Mac desktop clients:
- AOL Email (IE6, IE7, Firefox, Safari, Opera)
- GMail / Google Mail (IE6, IE7, Firefox, Safari, Opera)
- Yahoo Mail (IE6, IE7, Firefox, Safari, Opera)
- Windows Live / Hotmail (IE6, IE7, Firefox, Safari, Opera)
- Lotus Notes
- Mac OS X Mail
- Outlook 2003
- Outlook 2007
Rule 1: Validate your document
Validate your documents so that they validate in Firefox using the HTML Validator. You can download the HTML Validator from the Firefox add-on site. The only error that you should have is a missing doc-type. We do not need the doc-type because emails will be sent from deployment tools and are not strictly one doc-type or another on arrival. Also often the BODY, HTML and HEAD tags are removed before the deployment.
Rule 2: Treat the outer table as the BODY
Build your page inside a table with a background color if needed and with 100% width on it, this is then treated like the BODY of the document.
Rule 3: Remove PADDING, BORDER and MARGIN on all tables
Most web-based clients use CSS and this can remove padding, borders and margin and there for the email can not have layout which relies on margin and padding, instead use table cells with fix widths and heights to display where your content sits.
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tr>
<td align="center">
<table id="inner" cellpadding="0" cellspacing="0" border="0" width="300" bgcolor="#ffffff">
<tr>
<td width="10"></td>
<td width="290">My content is here and 10px from the left edge</td>
</tr>
</table>
</td>
</tr>
</table>
Rule 4: Avoid tags which may have line-height applied to them by the client
Avoid using the P and the BR tags as differences in line-height will cause your email to brake and appear differently from client to client. Instead use tables and cells with fix widths and height to pad out your content and create paragraphs and margins.
Rule 5: Use a mixture of HTML and CSS to format copy and links
When formatting copy, links and fonts use a mixture of HTML and CSS as follows. The reason I do this is because of an inconsistency with the way clients underline links. In the past I have had issues with clients removing the underline, adding the underline and very odd double underlined links.
<font face="Arial, Helvetica, sans-serif" style="font-size:10px;" color="#666666">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In nulla mi, lobortis eu
<a href="LinkURL" target="_blank" style="text-decoration:none;"><font color="#666666" style="text-decoration:underline;">link title</font></a>
viverra in, adipiscing tempor, odio. Proin rhoncus quam sit amet mauris.</font>
Rule 6: Add display:block to all Images
For some reason I have had weird behavior in Windows Live / Hotmail pushing images up or down a few pixels when displaying emails, after hours of messing about display:block fixes this problem. This is obviously something to do with the CSS applied to the email content by Hotmail as the page is rendered to screen.
<img src="img/MyImage.gif" width="100" height="50" alt="" style="display:block;">
Rule 7: Make sure all images have the height and width set
Make sure all images have the correct height and width set as Outlook 2003 and Outlook 2007 displays an alt message before downloading the images which reads “Right-click here to download pictures. To help protect your privacy, Outlook prevented automatic download of this picture from the internet.” This alt message will cause your images to grow and push your design out of shape. You still need your email to look neat before the images are downloaded.
Rule 8: Avoid in blank table cells
Simple, its not needed and shouldn’t be used for anything other than stopping words from widowing on to the next line.
Rule 9: Encapsulate images inside the TD tag
If you have images inside TD tags, make sure you delete the white-space around them. Some clients will turn this whitespace into a new-line or a and just generally do weird things which can break your design.
<td><img src="img/MyImage.gif" width="100" height="50" alt="" style="display:block;"></td>
Rule 10: Align images using valign=top and valign=bottom
Sometimes table cells are pushed higher because of whitespace and line-height often by specifically telling the image to sit at the top or the bottom of the cell you can fix this problem. Failing that make your image dimensions higher than 20px where possible.
Rule 11: Specifically set all widths on the TD tag and do your maths homework!
If a TABLE has a set width make sure that each TD inside that TABLE has a width set on it. Make sure that all the TD widths actually add up to the combined number of the width of the TABLE.
Rule 12: Don’t use background images or animated GIF’s
Outlook 2007 doesn’t support either, if you do wish to use an animated GIF make sure the message of your email is present in the first frame of the animation. Outlook 2007 will only display the first frame of the GIF.
Make sure you test your page in all your chosen enviroments
Load up your browsers and get testing. An easy way to deploy an email is to open up Internet Explorer 7 and go to “File > Send > Page by Email…” this allows you to email the entire document to your chosen client environment. A final test will need to be done just to make sure that the page doesn’t break once its processed by the deployment tool.
Thats a Wrap
There you have it, with a few extra bits of knowledge you should now be able to build robust emails for a number of client enviroments. These fixes can become out of date due to updates released by the end users choice of email client, sometimes a fix I am using just suddenly stops working in a specific client environment hence the importance of testing each email before you deploy it. Here is a sample chunk of code using all of the above techniques and should serve as a good starting point for your future email builds, good luck!
<html>
<head>
<title></title>
</head>
<body bgcolor="#f8f8f8">
<table id="position" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tr>
<td align="center">
<!-- Begin Header -->
<table id="no_images" cellpadding="0" cellspacing="0" border="0" width="569" align="center">
<tr>
<td style="text-align:center;" height="20">
<font face="Arial, Helvetica, sans-serif" style="font-size:10px;" color="#666666">
No pictures?
<a href="#">
<font color="#666666" style="text-decoration:underline;">
See the email in full
</font>
</a>
</font>
</td>
</tr>
</table>
<!-- End Header -->
<!-- Start GreyShadowBox -->
<table id="shadowbox" width="569" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" align="center">
<tr>
<td colspan="9" width="569" style="font-size:0px;" height="4" valign="bottom"><img src="img/template/shadtop.gif" width="569" height="4" alt=""></td>
</tr>
<tr>
<td width="1" bgcolor="#f3f3f3"></td><td width="1" bgcolor="#e8e8e8"></td><td width="1" bgcolor="#dadada"></td><td width="1" bgcolor="#c6c6c6"></td>
<td width="561" valign="top" align="left" bgcolor="#000066">
<!-- Start main content area -->
<font face="Arial, Helvetica, sans-serif" style="font-size:13px;" color="#ffffff">
<br>
Main content area<br>
Main content area<br>
Main content area<br>
Main content area<br>
Main content area<br>
<br>
</font>
<!-- End main content area -->
</td>
<td width="1" bgcolor="#c6c6c6"></td><td width="1" bgcolor="#dadada"></td><td width="1" bgcolor="#e8e8e8"></td><td width="1" bgcolor="#f3f3f3"></td>
</tr>
<tr>
<td colspan="9" width="569" style="font-size:0px;" height="4" valign="top"><img src="img/template/shadbot.gif" width="569" height="4" alt=""></td>
</tr>
</table>
<!-- End GreyShadowBox -->
<!-- terms -->
<table id="terms" width="528" border="0" align="center" cellpadding="0" cellspacing="1" style="font-size:10px">
<tr><td height="10"></td></tr>
<tr>
<td align="left">
<font face="Arial, Helvetica, sans-serif" style="font-size:10px;" color="#666666">
My Company details and address would be here</font>
</td>
<tr><td height="10"></td></tr><tr>
<td align="left">
<font face="Arial, Helvetica, sans-serif" style="font-size:10px;">
<a href="#" target="_blank" style="text-decoration:none;"><font color="#000066" style="text-decoration:underline;">Help</font></a>
<a href="#" target="_blank" style="text-decoration:none;"><font color="#000066" style="text-decoration:underline;">Terms</font></a>
<a href="#" target="_blank" style="text-decoration:none;"><font color="#000066" style="text-decoration:underline;">Unsubscribe</font></a>
</font>
</td>
</tr>
<tr><td height="15"></td></tr>
</table>
<!-- End Terms -->
<!-- End Footer -->
</td>
</tr>
</table>
</body>
</html>
