Use tables
Forget about divs. Email clients live in the past, so all emails must be built using tables for layout.
Cellpadding and Cellspacing
Instead of using the margin and padding CSS properties, we’re going to be using the cellpadding and cellspacing HTML attributes. Think of cellpadding as being pretty much the same as CSS padding – space inside an element, around the content. Cellspacing is the space between data cells on a table.
Cellpadding and cellspacing only apply to the parent table, not the children. If we don’t want any cellpadding or cellspacing, we need to specify that for every table.
Use Inline Styles
Forget about classes. If anything needs to be styled, use inline styles.
Elements like font type and size can be used within the <table> tag, but individual styles should be placed on <td>’s.
Fonts
Here is a list of web safe fonts to help you out:
| Font | Windows | Mac |
|---|---|---|
| Arial Black | 98% | 96% |
| Arial Narrow | 88% | 95% |
| Arial Rounded | 59% | 95% |
| Helvetica | 7% | 100% |
| Century Gothic | 87% | 53% |
| Verdana | 99% | 99% |
| Trebuchet | 99% | 97% |
| Tahoma | 99% | 91% |
| Gill Sans | 58% | 95% |
| Georgia | 99% | 97% |
| Palatino | 99% | 86% |
| Lucida Bright | 76% | 99% |
| Times New Roman | 99% | 97% |
| Courier New | 99% | 95% |
| Lucida Sans Typewriter | 74% | 99% |
| Copperplate | 67% | 92% |
| Papyrus | 70% | 92% |
Statistics are from CSS Font Stack.
Colors
Some email clients (like canary), render all text fonts in black. Make sure you use !important for the colors.
Use absolute paths for images
Unlike regular web pages, you can’t just put all your images in a folder and then use relative pathways to link to them. All links must be absolute! When I’m developing an email, I usually host images on a subdomain of my own. When I’m ready to send out the email for a client, I move all the images to a subdomain of their website.
Give all Images Alt Tags
Styling the <td> for which images are in, with font types, size and color, will allow for your email to degrade gracefully when images are off by default.