Delivery
Don't just attach an HTML file and a bunch of images to a message and hit “send.”
Don't just paste all your code into your email application, either.
Use a Multipart/Alternative MIME Format so that your mail transfer agent bundles your HTML code, PLUS a plain-text version of the message, together into one email.
Layout
Rely on styles within the TABLE, TD, H1, H2, P, A, and other tags.
Rather than use a p tag, use a font tag with br tags to create the paragraphs
Redefine the font tag inside and after each anchor tag
Create a gutter around the frame (wrapper) table by setting the width to a percentage and/or using the cellpadding to at least 5.
Avoid colspans
Be sure TD cell widths have accurate widths
Email layouts will have to be left-aligned in Lotus Notes
Use those deprecated tags like background= and bgcolor= instead of CSS
The recomended width is 400 - 500 px which is less than the width recomended for printing.
Look Good at 194 pixels wide for AOL users
Tables are recomended and as few as possible. DIVs usually fail and are not usually supported.
Tweak the cellpadding and cellspacing attributes of the HTML tables instead of style="padding: 5px 5px 5px 5px;"
Padding style in the content TDs is set at 10 pixels all round for Google
Browser based emails strip out your HTML, HEAD, and BODY tags. Which means that you should use embedded or inline styles placed below the body tag and that no styles can be placed on the body tag. CSS is not supported well in gmail so it is recommended to test without CSS.
For background color of email, put all content inside a table with the preferred color & style the table width at 98% because Yahoo needs the 1% cushion on both sides.
No CSS-positioning
Required: Gmail requires inline styles.
Images paths are to be absolute paths to images hosted on your server.
In your plain text layout, you’ll want to enter a hard return after each line gets about 60 characters long and create dividers with special characters (ie. *, -, and _). Don't use periods to create divider lines.
Outlook 2007 will not support background images, background colors on nested tables/divs, floats, positions, and poor support on padding & margin attributes.
Required: an extra line break or two after the final HTML tag for AOL & O2000 users
Test with placeholder images for apps that block images and don't use alt tags so that placeholders show up.
Don't start any line with a period. Some ISPs use email servers that will strip any content below a line in your email that starts with a period.
Placing the closing td tag right after (on the same line as) the IMG tag eliminates the annoying and mystifying 1 pixel gap.
Content
Required: use your title tags
Required: an opt-out link
No JavaScript, or ActiveX, or embedding
Use target="_blank"
No free hosted images
"List a valid, physical mailing address. The more contact information you provide, the more reputable your email will look."
Required: Use a legitimate working reply-to with your company domain.
Test
Test in as many email applications as possible! (AOL, Yahoo, Yahoo!Mail Beta, Hotmail, Gmail, Outlook 2003, Outlook 2000, Outlook Express, Thunderbird, Apple Mail, Apple’s Entourage, Lotus Notes 6.5.3 and 6.5.4, Eudora 6.2)
Test for free with a MailChimp free trial account
You can use a downloadable validator to test what actually will work in Outlook 2007 Word Based Email Viewer.
Print
<style type="text/css">
h1{
page-break-before: always;
}
</style>
OR
<DIV style="page-break-after:always"> … </DIV>
Yale Style Manual choses 535 px as the max width because that is the widest table that will print on standard letter size paper. Our width should be no wider than 500px for an email so we are already print friendly.
Resources
HTML Email Design from Mail Chimp
Email Newsletter Design Archives
Microsoft takes email design back 5 years
Email Design Gallery
How To Code HTML Email Newsletters (All New Version)
Style in Email
Quick Tip: Testing your email design with images turned off
Pre Gmail and Outlook 2007, ALA Optimism: CSS and Email, Kissing in a Tree
HTML Emails - Taming the Beast
Review: 10 Emails with Images-Off
Mail Chimp Directory:
What Email Applications Should You Test?
HTML Email Tips for Web Designers
Top HTML Email Coding Mistakes
Tools:
MailChimp Inbox Inspector
