HTML Email Tips

Recently I start to work on HTML Email template which needs to support popular email clients like gmail, hotmail, yahoo mail, Apple Mail, MS outlook etc. I thought it was easy to build HTML email template (based on what we have on web page), however I was wrong when the first version was out and showed up in web email client. Using Chrome developer tool to investigate the root cause, I realized that writing HTML email is totally different from Web page. Simply converting web site HTML/CSS codes to HTML email will not work as desired for these different email clients.

I did 3 versions and referenced to many useful online resources, then got the HTML email template kind of work across email clients. During the development and test, I summarized the tips to create HTML emails. It is interesting to work on this area, though the technical is not savvy.

Layout:
Use Table instead of Div
Table width should be 550-600px
Specify table and cell width
Avoid using CSS margin, use CSS padding or spacer.gif
Images and other HTML elements should reside in table cell
Specify desired alignment
Specify colspans and rowspans
Don't nest table too deep
Use <br> instead of <p> if possible

Styling:
Inline CSS to each HTML element
Limited CSS support (use CSS to format content, but don’t rely on it for layout)
Put style in the BODY of the email, not in the HEAD
Add proper nested closing tag for each element

A list of inline styles that are pretty well supported:
background-color
border
padding
color
font
font-* (e.g. font-family, font-style, font-size, font-weight font-variant etc.)
letter-spacing
line-height
table-layout
text-* (e.g. text-align, text-decoration, text-indent, text-transform)
border-collapse

Image:
Add style=”display:block” in the image tag
Always give images absolute paths
Always use ALT tags
Always provide size attributes for images.

Content:
Absolute no javscript
No video, flash (use annimated gif if really needed)
No forms (Use link instead)
No background-image, use HTML background attribute
Don't only use images (most email client doesn't show images by default)
Use HTML character escape sequences, such as &reg; for ®

Convention (Recommendation):
View it in browser link
Subscribe and opt out
Track your email
Consider mobile version

References:
http://premailer.dialect.ca/
http://htmlemailboilerplate.com/
https://github.com/mailchimp/Email-Blueprints/tree/master/templates
http://www.campaignmonitor.com/css/
http://www.campaignmonitor.com/testing/