A template for creating HTML email's which will render consistently across all major email clients. It's designed to reduce time by providing a set of examples for every common email layout.
The template follows this basic structure:
<wrapper>
<spacer />
<content>
<header />
<row>
<column />
<column />
<column />
</row>
...
<footer />
</content>
<spacer />
</wrapper>
The structure uses a wrapping table with width:100% and 3 columns, two 'spacer' columns and one in the middle for the email content. Putting the main content in the middle column and setting a width on that column's <td> will center the content within the email clients container.
The content then contains a series of nested tables which build the header, footer and multiple content rows. As a general rule it is best to make sure that each row within the email uses just one column for full width content and 3 columns for centered content.
This template uses a few standard rules for it's structure which have all been adopted from various standards inspired from resources shown below.
1. Nest your tables
Every row should contain either 3 or 1 column and the content within must be wrapped inside a table. This isolates the default layout so the number of columns/rows & width settings will only be relevant to that piece of content (it's own table).
2. Header styles and inline styles
This template comes with a few styles in the <head>, they are all fixes/hacks for particular email clients. Avoid writing any new styles in the <head>, instead do all of your element styling inline, you'll see below that all text elements are wrapped in a <span> tag, you could use another tag but I find this to be the safest as it has no default styles.
3. No margin or padding
Avoid using any margin or padding declarations as email clients render these very differently (or not at all). The best way to get around this is to use a nested table with spacing rows/columns by settings the the <td> width or height attribute.
4. Images
When adding images to your email make sure you add the border="0" attribute when wrapped inside an anchor. Always add the "display:block" inline style and define the width and height attributes of the tag according to the image natural dimensions.
5. Text styles
All text elements have a few standard styles:
- font-size(px)
- line-height(px)
- font-family(web safe)
- colour(6 digit hex code)
Using these four styles on every text element ensures consistent rendering on all major email clients. In addition make sure that you add an inline clolour style to anchor tags separately as some clients will overwrite any colours set from wrapping elements.
These are some resources I refer to when building HTML emails: