HTML Newsletter – Overview MS Outlook 2007/2010 Limitations

Tables of allowed HTML & CSS Properties

• http://msdn.microsoft.com/en-us/library/aa338201%28v=office.12%29.aspx

Emotions and opinions

• In a nutshell:
• http://www.howto-outlook.com/faq/wordhtml.htm
• More details
• http://www.email-marketing-reports.com/iland/2007/01/outlook-2007-and-html-email-design.html
• http://www.campaignmonitor.com/blog/post/2799/microsoft-to-ignore-web-standards-in-outlook-2010/
• http://www.istartedsomething.com/20090626/outlook-2010-html-issue-in-perspective/

HTML Newsletter – Resources

Guide to CSS support in email

• http://www.campaignmonitor.com/css/
• Handling MS Outlook 2007 / 2010 limitations

 

HTML Newsletter – Testing webmail clients

• gmail.com
• gmx.de
• web.de

HTML Newsletter – MS Outlook 2007/2010 – Floated Images

Problem

• Floated images are not working in Outlook 2007/2010

Cause

• Outlook 2007/2010 doesn’t support alignment of images thru CSS float.

Solution

• Switch typo3 into render mode = table

  •   tt_content.image.20.renderMethod = table

  •   tt_content.textpic.20.noStretchAndMarginCells = 1

  • This will align the images in content elements “text w/image” by wrapping the image in a table cell with align=left|right.
• To clear the align, use <br clear=all|left|right /> (HTML 3.2!!!)
  • To insert a clearer before every content element in the newsletter, use this

  • NEWLETTER_PAGE_CONTENT < styles.content.get
    NEWLETTER_PAGE_CONTENT.renderObj.stdWrap.wrap = <br clear="all" />|

Links

• http://www.cs.tut.fi/~jkorpela/HTML3.2/tablealign.html
• Overview of MS Outlook 2007/2010 Limitations

HTML Newsletter – Special settings for GMAIL, WEB.DE and GMX

CSS

/* ----------------------------------------------------------------- */
/* Anpassungen fuer Webmail Dienste                                  */
/* ----------------------------------------------------------------- */
/* GMAIL                                                             */
/*                                                                   */
/* Problem                                                           */
/* -Weisser Hintergrund fuer die Mail, weil GMAIL einen grauen       */
/*  Hintergrund verwendet wenn nicht das Standard-Theme "Hell"       */
/*  vom Benutzer eingestellt wurde.                                  */
/*                                                                   */
/* Loesung                                                           */
/* -Attribut im bodytag setzen                                       */
/*  Via TS im Page Object newsletter.bodyTagAdd = ...                */
/* ----------------------------------------------------------------- */

/* ----------------------------------------------------------------- */
/* Anpassungen fuer Webmail Dienste                                  */
/* ----------------------------------------------------------------- */
/* GMAIL                                                             */
/* WEB.DE                                                            */
/* GMX                                                               */
/*                                                                   */
/* Problem                                                           */
/* -Ueberschriften der Inhaltselemente werden nicht als Uppercase    */
/*  dargestellt                                                      */
/*                                                                   */
/* Loesung                                                           */
/* -Attribut im <h3> Tag setzen                                      */
/*  Via TS oder via userfunc str_replace                             */
/* ----------------------------------------------------------------- */

/* ----------------------------------------------------------------- */
/* Anpassungen fuer Webmail Dienste                                  */
/* ----------------------------------------------------------------- */
/* GMAIL                                                             */
/* WEB.DE                                                            */
/* GMX                                                               */
/*                                                                   */
/* -Ueberschriften der Inhaltselemente werden nicht in rot           */
/*  dargestellt                                                      */
/*                                                                   */
/* Loesung                                                           */
/* -Attribut im <h3> Tag setzen                                      */
/*  Via TS oder via userfunc str_replace                             */
/* ----------------------------------------------------------------- */