Coding HTML Email - The 40,000 Foot View
Here are some general tips for coding HTML email that have worked for me:
<html>, <title>, <head>, and <body> tags are all unnecessary as they typically just get stripped out anyway
All <table> for layout, no <div>
All inline CSS
No shorthand CSS
No Javascript
600 pixels, or less, in width
Use one wrapper table with align=”center” and set explicitly to your maximum width
Put any font styling in the td nearest the text it applies to
<span> tags are okay in most cases
If an <img> tag is the last piece of content inside of a <td>, close the </td> immediately following the <img>
It’s HTML, not XHTML, so self closing tags such as <img/> and <br/> as not necessary
Include alt and title tags for all images that you want some representation of if the user can’t see images in their mail client
Use target=”_blank” for all href’s
1x1 transparent images used for spacing or tracking tend to trigger spam filters, so either use different dimensions or avoid them altogether
Anywhere a background image is used, also apply a background color of the primary color of your background image to maintain your general layout look and feel if the user can’t see images in their mail client
Remember that Outlook 2007 doesn’t support background images
Be sure that all of your images are hosted externally and that the <img> src for each image is an absolute URL
TEST your email using MailChimp’s Inbox Inspector - It’s $14 for every 3 tests, but I don’t know any better way to see how your HTML email looks in so many mail clients - very easy to use too!
Once everything looks good in Inbox Inspector, send your HTML email to [email protected] with ‘TEST’ in the subject line and you will quickly get a response
Resources:
http://spamcheck.sitesell.com/
http://www.mailchimp.com/features/power_features/inbox_inspector/
References & Continued Reading:
http://articles.sitepoint.com/article/code-html-email-newsletters
http://www.mailchimp.com/articles/how_to_code_html_emails/
