Email newsletter dos and don’ts
WARNING: this is a technical guide so you may want to give it to your web/newsletter designer!Everybody knows HTML emails are difficult to build in a way that looks good for everyone viewing them. For starters, most email clients render stylesheets incorrectly so you have to use old style tables for layout. Then there’s the whole spam issue. The following is a tutorial on how to approach an HTML email or newsletter in order to maximise the number of email clients that will render it correctly and minimise the number that will condemn it as spam.
Do
- Make sure your fixed design width is under 620 pixels wide
- Use tables for layout. CSS (cascading style sheets) has limited support in most web clients so don’t use floats or absolute positioning (blocked for obvious reasons)
- Specify the width, height and alt text of images – you should be doing this anyway
- Place styles inside the <body> not the <head>. The <head> element and any
contained element will be removed by web clients - Make sure that class and ID names will not clash with common names that may be used by web clients i.e. “#main”
Don’t
- Use JavaScript, ActiveX or Java
- Use a Doctype declaration. Most email clients don’t take any notice of them. In fact, in web based clients your HTML will be inserted into the body of another document with its own declaration. All in all, it’s best to assume your document will be rendered in “quirks mode” and therefore you should validate against the HTML 4.1
Transitional standard and avoid XHTML - Link to external files. In general all external links to files except images will be remove by email clients. So that means avoiding references to external stylesheets or javascript files
- Assign any CSS properties to the <body> tag. The <body> element will be renamed or removed by web clients
Other CSS issues
- Hotmail removes any use of the margin property, use padding instead
- Most web clients remove the background-position property
- Adding styles to <a> elements can be problematic
How to avoid the spam folder
- Validate your document
- The ratio of images to text is very important. if an email contains mainly images it may be rejected
- Do not link to image files which return 0 bytes
- Do not make text the same colour as the background
- Do not use very small text sizes
Avoid obvious spam phrases such as:
- free installation
- no obligation
- no investment
- special promotion
- limited time offer
- sign up FREE!
- money back guarantee
That’s it, you’re done! If you follow these dos and don’ts your email should reach its widest possible audience in the format you intended it to.