Coding a Microsoft Outlook compatible HTML Email Newsletter

Creating a HTML email which is compatible with Microsoft Outlook is a really big headache. This is because Microsoft Outlook use the Microsoft Word engine to render HTML.

The following are some notes which could help you before you start working on a HTML email template.

  1. Use nested table for elements position.
  2. Do not use <p>

    • Use <div>.
    • Or use <span> and set it to display: block, but the <span> in Outlook could not recognize <br />.
  3. Do not use CSS margin

    • Only use padding-top and padding-bottom.
    • If you want to have padding-left or right, add a <td> with defined width.
  4. Do not use <table> background.

  5. Wrap the link with <font> if you want to add color.
  6. Do not use border inside the nested tables. Create <td> and insert the border as <img> instead.
  7. Set border=”0″ in <img> tags.

Hope the above suggestions could help you to fix the Hotmail and Microsoft Outlook problems.

Done =)

Reference:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s