General guidelines for designing HTML email templates.

Questions and comments welcome anytime – thanks for reading!

KEY TAKEAWAY:

Coding for HTML emails is like coding for Internet browsers from 10 years ago. (It’s the email clients’ — Outlook, etc. — fault.)
Picture a website from a decade ago: that’s the level of design complexity we can reasonably shoot for.

Your design should be a fixed width between 600 and 800 pixels. Choose the narrowest width within this range that supports your email’s content.
The width must be a whole-number pixel value.
Make sure your design accounts for wider displays, too:
- Should the email body be centered, left-aligned, or right-aligned?
- What should the background color be in the margins?

Custom fonts will work in some email clients (iOS Mail, Apple Mail, Android’s default email client, Thunderbird, newer Outlook versions) but will fall back to a default system font everywhere else (Gmail, Yahoo! Mail, Windows Live Mail, older Outlook versions).
So, you should test your design with (a) your custom fonts, (b) Helvetica, and (c) Arial.
All font sizes and leadings must be whole-number pixel values.
Don’t use a font size smaller than 10px.

Use as few columns as your content needs.
Try not to have overlapping visual elements.
If you’re not sure whether your layout is doable, ask the developer who'll be coding it, and work together to keep the essence of your design while eliminating any problematic bits.

People tend to read emails linearly, from the top down.
Use short sentences.
Use bulleted lists.
If possible, make the first (top-most) text in the email a teaser for the email contents, because many email clients will display the first sentence of text as a teaser.
All font sizes and leadings must be whole-number pixel values.
Don’t use a font size smaller than 10px.

72dpi. Images will look a bit grainy on Retina displays, but unfortunately there's no good workaround yet.
Dimensions pre-scaled to fit the layout. Don’t assume that email clients are able to scale down your image dimensions on-the-fly, because some can't and some won't.
Make the file size as lightweight as possible. Rule of thumb: a visually-complex color JPG at 500px by 500px should be around 100 kb.
Make sure that the image’s dimensions are whole-number pixel values.

We must include both a mailing address and an unsubscribe link, to make sure our emails don’t get caught in spam filters.

Don’t forget to create a text-only version of the email template, for people who are unable or unwilling to receive HTML emails.
No images, no formatting, and — for readability and to prevent unwanted line breaks in some email clients — make sure each line does not exceed 80 characters.
It’s common practice to use 80-character-long line of dashes ----- or equal signs ===== to make section dividers.
To save time, create the text version once the HTML version is done.