Formatting the Perfect E-mail (with Template)

In corporate environments the email newsletter is still going strong and should be considered as another arrow in your marketing quiver alongside of your Blogs, RSS feeds and Twitter micro-blog.

However, creating an email template that will work across an array of email clients that include AOL Webmail, Apple Mail, .Mac, Entourage, Gmail, Lotus Notes, Outlook 2007, Windows Mail, Windows Live Mail, Windows Live Hotmail, Thunderbird, Eudora (Penelope) and Yahoo (Classic and New), was especially challenging considering there are no email standards for rendering HTML and CSS.

We create corporate email newsletter marketing pieces as HTML web pages.

One of the first things we had to do is to forget almost everything we knew about designing a modern standards compliant web page.

We planned to use CSS to make layout and display easier. We took a look at each of the email clients (listed above) to see what attributes were supported and which were not supported. We began with Outlook 2007 because the Outlook brand is ubiquitous in the U.S. corporate environment (Lotus Notes 8 is still used also). Google Gmail is hands-down the most-used free email client equivalent and AOL Webmail users are still alive and kicking.

Even the simplest standards-based design would use CSS for margins and padding and floats so it would be necessary to have support for width / height. But Outlook 2007, Lotus Notes and Google Gmail do not support any of them! Dang! If width isn't supported then the default width becomes 100% for block-level elements. That means that text-align and float, which depend on width, won't work What was even more astounding to us was that AOL Webmail supports them all (including background-image and background-position).

LAYOUT
That left very few options--the email would have to be in an HTML table and we would have to eliminate both <div> and <span> tags from the markup. In order for the email to print correctly on the wide range of home and business printers the width of the table would have to be fixed at a maximum of 620 pixels and aligned to the left as many email clients won't allow center formatting. To control layout we nested all of the content tables (header, footer, columns) inside a container table and set a gutter around the container by using a cell padding of 10. This gave us a 600 pixel content canvas and defined the width of any header image to a maximum of 600 pixels. Because Google GMail forces the content towards the center we added a padding of 10 to the content <td> container. Remember that margin styles do not work in <td> cells but padding does. Do NOT use spacer or clear .gifs especially 1 X 1-pixel spacers. These spacers are often used by spammers to indicate whether an email has been opened and will almost always classify your email as spam.

STYLES
CSS was next. We decided to use general CSS styles in the <head> area of the email and to rely mostly on in-line CSS styles that are defined as we build the email. Since Outlook 2007 won't display backgrounds, we eliminated background images and defined the background color in the table cell <td> using the background color attribute rather than a CSS style. When defining the CSS in-line styles it is necessary to use full and specific tags like:

style="font-size:12px; font-family:Arial, Verdana, Helvetica, sans-serif;"

rather than CSS shorthand like:

style="font: 12px Arial, Arial, Verdana, Helvetica, sans-serif;"

HYPERLINKS
Often you will see hyperlinks displayed as a different font size than the rest of the text. The trick is to wrap the <a> tags inside a <p> tag.

IMAGES
Most email clients will try to disable images. So, make sure your images are full URI's in the email that link back to your server like.

Use ALT tags to fully describe the image (the text will appear if the image doesn't display) and always define image height and width to keep your layout intact if the image doesn't display. Hyperink the image back to your web page for an extra incoming link to your site. Use your server logs to determine the number of times the header image has been accessed and you have yourself a counter of how many times the email has been opened! Over time, subtract the page views from the image views to keep an accurate count of email vs page openings. Do not try to use javascripts--period. Email clients will disable them and may either designate your email as spam or worse, not deliver it at all.

TIPS
Always give your users a link to your email web page in case they cannot view your email correctly in their email client. The traditional "Difficulty viewing our email? View it on our website." will work.

Adhere to the CAN-SPAM Act of 2003. You must give your users the ability to opt out of your emails. The FTC added four new provisions to the Act in May of 2008 that included, for instance, the use of P.O. Boxes to satisfy the requirement that a commercial e-mail display a "valid physical postal address."

UPDATE August, 19, 2010
Subject line character limitations are arbitrary and vary from email client to email client - as few as 78 characters to as many as 998. Microsoft Outlook sets the limit at 255 characters. If you have more than 245 characters in your title tag (which becomes your subject line prepended by the 10 character "emailing :") Outlook automatically truncates with an ellipsis, which is illegible to the BASE64 code and forces a "fail" of the email program.

WORKING EXAMPLE

http://www.texaswebdevelopers.com/blog/examples/email-example.html

CODE TEMPLATE

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Email Template</title>
<style type="text/css">

</style>
</head>
<body>

<table width="620" border="1" cellpadding="10" cellspacing="0" bgcolor="#ffffff" id="container" style=" border:#666 1px solid;">
<tr>
<td align="center">

<table width="600" border="0" cellpadding="0" cellspacing="0" id="header">
<tr>
<td height="89" valign="top"><a href="http://www.yoursite.com/newsletter.html" Title="View web page"><img src="http://www.yoursite.com/images/yourheaderimage.jpg" width="600" height="89" alt="Newsletter Description goes here" border="0"></a></td>
</tr>
</table>


<table width="600" border="0" cellpadding="10" cellspacing="0" id="content">
<tr>
<td align="left" valign="top">
<p>Dear Username,<br /><br />
You are receiving this email because you have subscribed to the Widget Newsletter. Not interested anymore? <a href="">Unsubscribe Instantly</a> <br /><br />
This month's newsletter is all about Widgets.<br /><br />
Regards, YourSite.com</p>
<br /><hr><br />
<h2>Article Title One</h2>
<img src="http://www.yoursite.com/images/yourimage.jpg" width="150" height="150" alt="description of image goes here" align="right">
<p>Article Content goes here. <a href="#">Read more »</a></p>
<p><a href="#top">back to top^</a></p>
<br /><hr><br />
<h2>Article Title Two</h2>
<p>Article Content goes here. <a href="#">Read more »</a></p>
<p><a href="#top">back to top^</a></p>
<br /><hr><br />
</td>
</tr>
</table>


<table width="600" border="0" cellpadding="10" cellspacing="0" id="footer">
<tr>
<td align="center" valign="top">
<p style="color: #333; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; font-weight:normal;">Copyright &#169 2009 <a href="http://www.yoursite.com">YourSite.com</a><br />
<a href="">Forward this email to a friend.</a> Not interested anymore? <a href="">Unsubscribe Instantly</a><br />
Having trouble viewing this email? <a href="http://www.yoursite.com/newsletter.html">View it in your browser.</a><br /><br />
This e-mail may constitute a commercial electronic mail message subject to the CAN-SPAM Act of 2003. If you do not wish to receive further commercial electronic mail messages from the sender, please send an e-mail to unsubscribe@yoursite.com and request that your e-mail address be removed from future mailings. To update your address, please send an email to update@yoursite.com including the updated information. Yoursite.com, P.O. Box 12345, City, State, Postal Code.</p>
</td>
</tr>
</table>

</td>
</tr>
</table>

</body>
</html>

Comments

1. Well done! I've tested this across five email clients and it worked like a charm every time. The basic template can easily be expanded to have a header, footer and three columns and adding a bit color by way of bgcolor in the tags made all the difference in the world.
by Scott

2. I have been creating corporate communications for 15 years and this is the first time I've seen an accurate and cohesive description of how to create an email that, technically at least, works 99.9% of the time. Thanks!
by Jim Shaffer

3. Very nice, very helpful, thanks. A good primer and excellent help for someone who has written and improved many, many newsletters but is programming one for the first right now.
by Andreas.wpv

4. Michael,
Excellent post. Thank you. We've been struggling with a universal email template that will work well across multiple client platforms. Your post will help me tremedously toward redesigning a workable solution. Thanks, again. I stumbled upon your post searching for best email template width. I'll now be adding your site to my favorites.
by Pampered Passions Fine Lingerie

5. This is excellent, thanks a lot. What treacherous waters the standards-absent HTML email ocean can be.
by Brody

Name
URL
Email	Email address is not published
Remember Me
Comments
	Write the characters in the image above

Call Us for a quote at 214.564.5316 4:23:48 PM 9/7/2010

R E C E N T E N T R I E S
POSTED: Friday, April 17, 2009