5. Januar 2011
  start » network » layout   comments 1

Things todo when building an HTML Email Template

Last Fall i had to build a Newsletter System for the company which i work for. And to get some good looking HTML Emails to our costumers, i had to learn how to build these HTML E-Mail Templates.




Watch you styles

  • No CSS between the HTML Header Tags, move them inside the HTML Body Tag (gmail and yahoo strip the Header Tags)
  • Use Inline CSS Styles
  • No CSS shorthand for font property and HEX color values
  • No CSS positioning! Use good o'le tables (max. width of 600px or a liquid table Layout)
  • Transparent 1x1px spacer gifs for empty cells (use width and height to keep cells size when images are turned off)
  • Valid CSS Styles in Emails www.danielneumann.com, www.campaignmonitor.com
  • Free Online Tools to convert CSS Inline. Premailer or Mailchimp

Content

  • Encode Special Characters
  • Some email clients overwrite link colors
  • Use a redundant span with CSS color property inside
    "A" tags
  • No SPAM words in the Subjet or Content-text like "Free", "lorem ipsum..., "test", uppercase text, "click here", "free buy now" (see spamassassin)

Let me see Images

  • Use HTML alt tags wisley for important images, leave the rest blank
  • No PNGs - Lotus doesnt like that
  • No background Images, if you must use any dont forget the text contrast, if no images are displayed
  • Don't show important messages as images
  • Don't use width and height in HTML Images Tags, to reduce unnecessary white space

Dont step on my foot

Mind the law and use the Footer for contact information, privacy statements and unsubscribe link (hardlink!). business.ftc.gov, Austrian Law, Anti-spam laws

Various

  • User MIME-Multipart Format and include a plain text version
  • Don't use Javascript, your EMail will end up in the Spam Folder
  • Provide a link to read the EMail in a Browser
  • Don't use fancy HTML Tags like frames, iframes, forms, applets, javascript, flash, activeX, Embedded Movies

Interessting Reading

 

 



Read other articles


Spread The Word → Bookmark and Share

1 Comment/s

See what other visitors said about this article. If you like, you can post a comment using the form on the end of page.

Honk,
10:18 on 26 Mai, 2011

indeed a very nice article. Missing the “daily shit” section though.



Share Your Thoughts

Feel free to comment this article! You'll need to fill out the required(*) Fields, don't worry your Email Adress won't be published or used for any Spam Mailing!. The comments use gravatar's for the Usericons.

have your say