HTML rules for Email clients

The following email clients are generally what need to be supported today:

• Outlook 2003
• Outlook 2007
• Outlook 2010
• Hotmail webmail
• Yahoo webmail
• Gmail webmail
• MacMail
• Lotus Notes
• Eudora 

Since most email clients still use HTML 1.1 in one way or another, there are severe limitations to the look and feel of your email.

Here is a list of general rules you can remember when trying to create an email template:

• Remove <style>.</style>
  • NOTE: This is not always the case and <style> is necessary in some specific cases
• Remove <script>.<script>
• Remove <noscript>.</noscript>
• Remove <link>.</link>
• Change anything with <.*? /> to <.*? > (e.g. <img /> should be <img>)
• Change <td></td> to <td>&nbsp;</td>
  • NOTE: Please test as outlook might create a bigger gap in place of &nbsp;
• There should not be spacing in between the following tags: <img.*? ></td> 
• <img.*? > should have style="display:block"
  • NOTE: Please test as its not always the case
• <img src="" needs to be an absolute path
• <img src="" cannot contain the word "banner"(for spam protection!)
  
  • NOTE: ISP filters and other technology deployed across the internet have complicated rule sets designed to block banners, advertising and all other manner of communication deemed to be unsolicited commercial email. By naming the folder that contains your image "banner" you are increasing the likelihood that your image, if not your entire email will be outright blocked because you've declared it as a banner in so far as a spam filter is concerned.
• Replace style="width:0" with width="0"
• Use embedded style="font-family:." or <font face="."></font>
• Use embedded style="color:." or <font color=".">.</font>
• Use embedded style="font-size:." instead of <font size=".">.</font>
• Replace style="font-style:italic" with <i>.</i>
• Replace style="font-weight:bold" with <strong>.</strong>
• Do not use style="padding:[0]"
• Do not use style="margin:[0]"
• Replace style="float:[0]" with <table align="[0]"><tr><td>[content here]</td></tr></table>
• Replace <style> and <link> and replace all class attributes (class="") with corresponding simple class styles (.className)
• Replace <style> and <link> and add all id attributes with corresponding simple id styles (#id)
• Replace <style> and <link> and add all element attributes with corresponding simple element styles (elementTag) 

 Most of these can be created with an application that stream reads the HTML template and replaces them using Regular Expressions.