Difference between revisions of "Rich HTML email"

Revision as of 03:30, 2 September 2011

Easiest Homebrew way to make and send Rich HTML

1. Create your html page first
2. Open it in IE7 / Safari (Mac)
3. Choose the "send page as email" option / "mail contents of page"
4. Your Rich HTML email will be ready for sending in Outlook / Apple Mail

General Rules for Rich HTML email design

• Avoid stylesheets
• Name your images sensibly and generically to avoid SPAM filtering (eg: image1.gif or header.gif)
• Avoid ROWSPAN and COLSPAN totally
• All special charactrs must be spelt out (eg: & pound for the pound symbol)
• Keep email below 40k (including images)
• Set max width to 600 pixels. you have approximately 576 x 252 pixels real estate to work with (72ppi)

• Do not use frames/frameset
• Define style attributes in nearest <td> or <a> tag
• Remember that urls and email addresses will appear as links
• Avoid using p tag, use two br tags instead
• Define fontsize in pixels
• Avoid ASCII characters and if you must use them then use HTML equivalents
• Add alt tags to images in case they break/user cannot see them
• Avoid putting empty <td> cells with "nowrap". In those cases just put spacer.
• If you must put transparent GIF spacers, define both height and width.
• Do not put forms in emails
• Avoid padding/margin attribute
• Avoid putting too many manual br tag breaks in case leading goes havok - it can be quite unpredictable over different browsers and only way to find out is testing
• Avoid extra spaces between tags if there is no need for it. As sometimes a space can be read as an actual space between items, causing misalignment
• Validate your code in your coding program or go to http://validator.w3.org/

Rules to help avoid your mailer going into spam folder

email client may direct emails with missing table tags, content below the closing </HTML> tag, or empty <title></title> tags, into the junk folder.

other triggers to avoid:

• HTML comments which “obfuscate text”
• Fonts in the HTML code sized 2+ or larger
• Links without a "http://" prefix
• Colored backgrounds
• Special font colors outside of the 217 “Web-safe” colors

See Also

• Guide to CSS Support for Emails - Great list from Campaign Monitor about the tags that different email browsers can understand