Styles

Showing posts with label email. Show all posts
Showing posts with label email. Show all posts

Thursday, April 15, 2010

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.

Monday, May 11, 2009

Sending an email to new employees

Here is a simple little tip:
If you wanted to email a new guy in your company, you know that he should be found in Exchange’s Global Address List, If you haven’t emailed him before, and Outlook’s auto-suggest name list doesn’t appear to recognise the name (you know the one that pops up as you start typing in the “To” field), you can just start typing then press the Ctrl + K.

[Figure 1 - No popup name list for suggestions to contacts containing "s". Generally means you haven’t contacted anyone with a contact name containing “s”]
This will either complete the name for you or (if there are multiple people with the same first letters) it will pop up a filtered address list for you to select like shown below:


[Figure 2 - Found multiple contacts containing "s" in the Global Address List]