Golden rules:
1) Make sure width and height is set in each td and img tags in the email: not on the table! but on each cell.
2) Every image is set to display:block. Also, if relevant, put an alt attribute as 40% of email readers won’t download the actual image. Also, whenever possible, user https:// for the links to avoid being flagged as spam.
3) Every link is set to have no border and no outline. target=”_blank” all of them. Also, whenever possible, user https:// for the links to avoid being flagged as spam.
4) Cell padding and cellspacing is removed from each table as much as possible:
5) The layout is broken up in a series of rows, and each row with complex images / data will also be a nested table 6) All styling is done inline. It is a pain, agree. Here’s a tool to make it easier: http://premailer.dialect.ca/ 7) Margin and padding are inconsistently applied across email clients: again, your best friend are tables and cells with widths and heights defined. 8) Background color for the entire email can be set if you put it as follows:
| [other nested tables with your content here] |
9) Whitespace does matter! If you have spaces or line spaces between rows and cells, they may be interpreted funky by some email clients, avoid them!
If you don’t want to “reinvent the wheel”, and spend lots of time and effort on the emails yourself, use already built and already tested templates:
http://mailchimp.com/resources/html-email-templates/
http://www.campaignmonitor.com/templates/
Troubleshooting:
Outlook 2007 / Outlook 2010: You see only background color where there is supposed to be content. Solution: remove bgcolor=”#[color]” property.
IOS: Avoid auto-formatting of dates and phones:
If your HTML looks like this:
will cease<br> operations <span class=’ios-avoid-format’>on June 1, 2012</span><span></span>.
The CSS that will make this ok in iphone / ipad is:
@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-avoid-format{
display:none;
}
span.ios-avoid-format + span:after{
content:”on June 1, 2012″;
}
}
Great resources for your email needs:
litmus.com — Essencial for testing
Mailchimp — Great and free for certain number of users on your list
http://premailer.dialect.ca/ — Inline your CSS styles, fast and easy