December 11th, 2008

The dreaded email template

“The client wants an email campaign, we need to design a template”. These words used to make me cringe; the thought of creating an email template that would work in all the major clients and web based services had a Fun Factor of zero.

First off it’s not hard work, the hardest part is getting it right across all platforms. What looked good in a web based service such as Gmail or Hotmail would be a disaster in Outlook 2007 or vice versa, I don’t even want to mention what Macs did to the design and layout, what a drama.

I have a few do’s & dont’s for anyone who is about to go down the email template road & who has little or no experience in what is required to get one right. You can always sign up and get templates, but they are generally nasty looking and so NOT what clients want. A good email template looks fresh and gets a great open & forward rate.

The Do’s

  • Fix your document size to under 700px so it fits most email clients
  • Go easy on the CSS, use only what you need to
  • Use classes instead of ID tags
  • Use tables, as CSS is not supported that well and strange things happen
  • Store all your image assets online so you’re only sending the html
  • Use only inline styles or again, strange and unusual things will happen
  • If you need padding use the table padding
  • Supply a link to the same email hosted on a server “If you cannot see this email click here” type of thing
  • Do include an unsubscribe link

The Don’ts

  • Don’t make the layout 100%
  • Don’t put CSS in the head or Gmail & Hotmail will ignore it
  • Don’t use background images, it’s only a 50% chance they will display
  • Don’t build it with CSS – I wish this wasn’t the case
  • Don’t use margins, use table padding instead
  • Don’t use embed or any other suspect code as the email will get flagged as a possible virus
  • Don’t use IDs, they’re not supported
  • Don’t use position, it will not work

I have also found a couple of very useful links and blog articles.

Campaignmonitor
A great guide to what you can and can’t do with CSS in emails

Preflight Mailer
Preflight mailer – converts CSS in the head of a page to inline styles

Sendloop
One of the best email campaign programs we have found

Image from respres.

Web Toolbox