What Version Of HTML To Use In Emails?

What version of html would yo recommend for mail content to get best mail-client compatibility? HTML 3.2 HTML 4.01 transitional HTML 4.01 strict XHTML 1.0 XHTML 2.0 HTML 5 What w

Solution 1:

If you thought browser-html was fragmented, you're going to pull your hair out with email-html. You often don't have the luxury of providing a doctype (to distinguish between transitional/strict, etc)... even if you provide one a lot of clients will ignore it. This gets even more complicated when you have webmail viewers - those pages already have their own document type so they won't pay attention to yours.

Once you're past that (as in - don't even worry about it), you'll learn that very limited layout options are provided... CSS is only vaguely supported... and not by every client (excellent guide here). Table design will creep back in, and you'll find yourself weeping at the things you have to do just to get it to look readable (let alone get it looking similar across platforms).

It's not unlike trying to build a GUI application on the command line... or bringing a carrot to a sword fight.

Solution 2:

Keep it as legacy and forgiving as possible. That being said, most email clients will strip the head and html anyway so your doctype isn't really all that important.

Check out this great article: http://24ways.org/2009/rock-solid-html-emails and also this list of CSS properties and which email clients support them: http://www.campaignmonitor.com/css/

Solution 3:

If you are coding HTML emails, you want to code them like it is 1999.

This means using tables for layout, inline styles and limited css.

Here is a nice graphic showing what works and in what browsers: http://www.campaignmonitor.com/css/

Some general rules that I follow:

• padding goes on <td> tags or <table> tags and nothing else
• use background images sparingly or not at all
• no divs, instead use tables and nest them appropriately
• inheritance does not always work, there for an <a> inside of <p> tag will not always inherit the styling so it is best to give the tag it's own inline style for everything including font styles
• set all images to display:block and border="0" and always declare width and height

Solution 4:

Since you don't control the doctype, you don't really control this. If your message appears within a web-based service, you get the type THEY'RE using.

To make matters worse, Outlook uses the MS-WORD engine for HTML rendering.

You're best to use this chart to decide which features to use when coding your emails and just pretend it's still 1999 (table-based designs, no background images).