Creating a compatible email for most email clients

The HTML rendering engines in Outlook and Gmail and others are not as fully featured as a browser.
Just because your HTML looks good in a browser does not mean it will look good in an HTML email.

Outlook.
Microsoft offers details of what is not supported in Outlook 2007 here;

http://msdn.microsoft.com/en-us/library/aa338201.aspx
As you can see Outlook does not support:

1. <div> tags
2. Background images
3. Background position
4. float
5. list style image
6. list style position and many many more
The list is far too long to show completely here - please visit the web page for a complete listing.

Gmail
Gmail lists the items it does not support at the following link (as of June 15 2013)
http://www.emailonacid.com/blog/details/C13/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps

As you can see Gmail does not support:
1. Display when the value is set to none.
2. Embedded CSS styles (the ones above the <body> tag)>

How to avoid problems.

  1. Do not use exports from Microsoft word or any other word processor - have a knowledgeable person familiar with the limitations listed above create your HTML.
  2. Use tables and simple HTML for structure and do all formatting using inline CSS - the correct usage would be <span style="font-size:10px; color:#FF0000; font-family:Arial, Helvetica, sans-serif;">your text here </span>
  3. You can also use inline formatting in <td> tags. So <td style="font-size:10px; color:#FF0000; font-family:Arial, Helvetica, sans-serif;">your text here </td> is acceptable.
  4. Remember that inline styles use running status - they apply until they are told to stop. You don’t have to embed the font size in every cell.
  5. Do not use ANY embedded style sheets or styles written above the <body> tag.
  6. Do not use MAPS.
  7. Do not use background images.
  8. Do not embed style data in the <body> tag - this is deprecated.
  9. Do not use deprecated code like <tbody> or <b> or <i>. A good programmer will avoid these
  10. Do not use Javascript.
  11. Avoid illegal characters.
  12. Do not use HTML exports from MSWord
  13. Do not use HTML exports from MSWord
  14. Do not use HTML exports from MSWord

Illegal characters

There are many characters in Word and other word processors that are not supported in HTML.
HTML looks for ASCII characters so the registered traced mark symbol ® should be replaced by &reg; © should be replaced by &copy;
For a complete list please click here:

http://www.ascii.cl/htmlcodes.htm

When using this table try to use the HTML name rather than the HTML number.
If there is no name available then you have to use theHTML number.
Do not worry about Dec or Hex codes.

Accents

Accents are also problem since they are not ASCII and have to be replaced with codes: à should be replaced with &agrave; é should be replaced with &eacute; and ê should be replaced with &ecirc; These abbreviations are quite simple. They always begin with an & and end with a ; with 5 or six characters in between.

A big problem from Microsoft is their smart quotes.
Double quote should be replaced by &quot;
Left double quote should be replaced by &#8220;
Right double quote should be replaced by &#8221;

Online Utilities

Most online HTML utilities seem to be designed to write HTML for browsers, not for email HTML.
Many are better than an export from Word but still there is no substitute for an experienced programmer.

Do I really need to do all this?

That depends on whether you want your email to look exactly like you planned it or if you are satisfied with an approximation.
Illegal characters are replaced with things that look like this Ä unless they are dealt with at the point of creation.
A good HTML programmer would have no trouble following these rules - in fact he would be surprised that we have to program like it is 1996.