Should I use HTML 4.0 mark up for my email templates?

Question

A designer coded an html template using CSS best practices. I want to use this template as an email newsletter template, but I've heard people say hotmail, yahoo and gmail offer limited support for CSS.

Am I supposed to re-code these templates using table layouts and font tags?

Answer 1

The short answer is Yes.

You're going to get the best compatibility across webmail accounts & email clients by using the most basic and dumbed down HTML possible.

• Don't use any CSS files or <style> tags. Do everything inline.
• Handle positioning with nested tables that have explicit widths
  • I make heavy use of HTML comments in these situations to make sure I don't get confused about where I am in the layout.
• All text should be surrounded by <font> tags with the font style information.
• Images should have explicit widths & heights.
  • This helps the email retain its proper layout when images are blocked.

---

I usually test on a minimum of the following:

• Outlook 2003
• Outlook 2007
  • Most of your headaches will come from here.
• Thunderbird
• Entourage (OSX version of Outlook)
• Gmail
• Hotmail
• Yahoo Mail

You're usually in pretty good shape if you get something that shows up properly on all of those.

We use Exact Target and they have an HTML preview feature but it's not perfect. I've run into a lot of situations where an email looked good in the preview but still came through broken in Outlook 2007.

Answer 2

To build on what Mark said:

If at all possible, avoid using CSS at all (though, it's usually alright for things like text). Use tables for all positioning, empty <td> elements for padding/smaller positioning bits.

And even with all this, it's only going to look perfect in a few email programs/sites. HTML email is, I'm fairly confident in saying, utterly impossible to do in such a way that it shows up perfectly in all mail clients/apps.

Answer 3

Mark above said everything that you need to do to develop email templates (it's the 90's all over again), but I wanted to add one last thing:

http://www.email-standards.org/ is a great resource to see how different email clients interpret HTML and CSS.

Answer 4

You'll have to go back to stone-age HTML to get HTML emails to work out as Mark suggested. All styles inline in the html. No STYLE tags or external stylesheets.

MailChimp and CampaignMonitor both offer excellent free HTML email templates. They also both offer email testing services that send your html emails to several different email clients and then send you screenshots of the results.