Rich HTML email

From Wikicliki
Jump to: navigation, search

Easiest Homebrew way to make and send Rich HTML

Safarihtmlemail.png

  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

"Missing Plugin"?

Do you have the missing plugin error in Safari? You must upload your images to a server online, and link STRAIGHT to the full image url. Even if you dont have your client's server login yet, you should test your email by uploading to your own server or a testing server first.

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