Never use a metaphor, simile, or other figure of speech which you are used to seeing in print.
Never use a long word where a short one will do.
If it is possible to cut a word out, always cut it out.
Never use the passive where you can use the active.
Never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday English equivalent.
Break any of these rules sooner than say anything outright barbarous.
Max's Rules for Emails
All emails MUST be from a real person. We do not send email from a no-reply or system account.
Remember that you're not designing a printable piece of paper, but an actionable email.
Make sure there is one clear action in the email. Don't add confusion with multiple actions.
Have a clear title, lead with {{ user.name }} if possible.
Make sure it has a clear preview, or "toast" that the reader can easily see in thier email queue, be it Mobile, Outlook, or gmail. If they can't tell what its about without clicking into it, they may never read it.
Test on mobile. Don't assume it looks good just because it looks good on your Hi-Res Mac. Make it work well on mobile first, and then on Outlook. Hold your phone at arms length to make sure its still legible.
Font Sizes & Colors:
The magic number is 4. Use at most 4 font sizes and 4 colors.
Text should 18px if you want people to read it.
Legal text or other boilerplate that's less important can be 12px to 14px.
Bold counts as a font size and color.
Generally, use the primary brand color as a highlight color and grey for smaller less important text like boilerplate/legal.
Yes, white is a color too!
Remember, the emails are FOR the readers. The number one priority needs to be making them usable, not adding cool design elements.
Watch out for using jargon in the emails, don't waste space with things people outside the company or industry might not understand.
While testing, send emails to people directly through the email client app (ConstantContact, Mailchimp, etc.) Forwarding an email destroys the formatting.
The Technical Bits
Mind your HEAD
You can't avoid a DOCTYPE. Many email clients strip your DOCTYPE and either impose their own or leave it out entirely. This means you need to test both with and without a DOCTYPE to ensure your syntax renders how it should.
Don't embed in the HEAD. Browser-based email services, like Gmail, Yahoo! Mail, Hotmail, etc., generally strip out DOCTYPE, BODY, and HEAD tags. Anything included within those tags, or as attributes on those tags (such as bgcolor, CSS, JavaScript, etc) runs the risk of being stripped.
Use tables for layout
Set the width in each cell, not the table. When you combine table widths, td widths, td padding and CSS padding into an email, the final result is different in almost every email client. The most reliable way to set the width of your table is to set a width for each cell, not for the table itself.
Err toward nesting. Table nesting is far more reliable than setting left and right margins or padding for table cells.
Use a container table for body background colors. Many email clients ignore background colors specified in your CSS or the BODY tag. To work around this, wrap your entire email with a 100% width table and give that a background color.
CSS and font formatting
Do you best to avoid CSS altogether. But, if CSS is a must, make sure you move your CSS inline and review the list of CSS support across the major clients for a good idea of the safe properties and those that should be avoided.
Avoid shorthand. A number of email clients reject CSS shorthand for the font property as well as hex notation.
Avoid using paragraphs. If part of your design is height-sensitive and calls for pixel perfection, avoid the paragraph tag altogether and set the text formatting inline in a table cell.
Link colors may be overwritten. If link color is important to your design, can avoid it being "reset" by setting a default color for each link inline and then adding a redundant span inside the a tag.
Images in HTML
Avoid spacer images. Most email clients replace images with an empty placeholder in the same dimensions, others strip the image altogether. Stick to fixed cell widths to keep your formatting in place with or without images.
Always include the dimensions of your image. A number of clients will invent their own sizes when images are blocked and break your layout. Also, ensure that any images are correctly sized before adding them to your email; some email clients will ignore the dimensions specified in code and rely on the true dimensions of the image.
Avoid PNG images. Some email clients don't support 8-bit or 24-bit PNG images, so stick with the GIF or JPG.
Don't use background images. Some email clients have no support for background images. There are hacks to get full page background images working, but monkey-patching should be a last resort.
Use the display hack for Hotmail. Windows Live Hotmail adds a few pixels of additional padding below images. A workaround is to set display:block for images.
Don't use floats. Some email clients offer no support for the float property. Instead, use the align attribute of the img tag to float images in your email.
Use absolute paths. Images should be hosted on a publicly accessible web server and the image source should point to the full URL.
Video in email
Quite simply, don't do it...yet. There is no support for JavaScript or the object tag in email and very few email clients support HTML5 video.
Think small
Stay within the constraints of 550-650px. Most people view messages in their preview panes, which are narrow and small; for instance, the preview pane in AOL 9 is less than 200 pixels wide. Templates designed by MailChimp and Campaign Monitor are never more than 600 pixels wide.
Mobile screens are much smaller. The most common mobile email readers are in a range of 320px. The iPhone allows for a 300px width when held vertically and a 480px width in landscape mode. The iPhone also resize email content to fit the screen, but many other smart phones don't, so it makes sense to design for the lowest common denominator.