First Name:
Email:
 
First Name:
Email:
 
First Name:
Email:
 

Creative Best Practices


J Scott

Important Changes to Microsoft Outlook 2007 Email Rendering

(Updated April 2007)
By Julian S. Scott, Responsys Creative Director
 
As you may know, Microsoft made several significant changes to the way HTML emails are rendered with the release of Microsoft Office Outlook 2007 earlier this year.

Now that some time has gone by, and we have begun to see the true impact through practical application, there are some potential issues that need to be understood as Outlook 2007 becomes more commonplace.

The good news is that if you already adhere to Responsys HTML email best practices, you have nothing to worry about — with a few minor exceptions concerning animated GIFs and borders. If you don't follow best practices, then the bad news is that you will have to change how you code your emails if you want them to render correctly.

Several of the changes impose additional limitations on email marketers by restricting support for more advanced or interactive creative elements. The most notable limitations include:

  • No support for animated GIFs (only a static representation of the GIF image shows)
  • No support for Flash or other plug-ins (a red "X" shows in the area where the flash would display)
  • No support for background images (HTML or CSS)
  • Limited CSS support
    No support for CSS floats
    No support for CSS positioning
    With the exception of color, CSS background properties are not supported — this includes background-attachment, background-position, background-repeat, and background-image
  • No support for HTML form submissions
  • No support for JavaScript events, such as 'on mouse-down'
  • No support for replacing bullets with images in unordered lists

In addition, several unexpected issues have been identified that should be accounted for in the design process:

  • Outlook 2007 imposes a 2-pixel height minimum for table cells. So, for example, if a table cell contains a 1-pixel transparent gif and a background color, your 'horizontal line' will appear thicker than expected.
  • Stretched images (e.g., bars, borders, gradients, etc.) may not render correctly. All graphics should have their correct dimensions in the file properties. Do not rely on HTML-defined dimensions for images that are critical to the email's layout.
  • Modules with fixed width and height may not display correctly for the same reason sighted above. If horizontal and vertical spacing is determined by spacer graphics (as opposed to the email's content), be aware that customized spacing and alignment may be impossible in some cases. For best results, try using a combination of transparent spacer images and the HTML height attribute on the table cell.
Microsoft has provided detailed information on their web site about how the new HTML and CSS rendering capabilities will work in Outlook 2007, which uses the same rendering and parsing engine as Word 2007:

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007
(Part 1 of 2)

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007
(Part 2 of 2)

Be sure to review the information above and thoroughly test your creative within Outlook 2007 to ensure proper display of your email messages for all recipients. If your email does not render correctly, the effectiveness of your message is greatly diminished.

But always remember: email should be treated as a "stepping stone" to a landing page or web page, where you have complete control over how you represent your brand and communicate your message. Save the "fancy" coding for there.

Finally, HTML email best practices apply across all popular email clients, which means if you start implementing our recommendations now, you will not likely have to worry about Outlook 2007 or Hotmail, Yahoo, Google, and others! That is good news indeed.


If you would like to learn more about Responsys creative or deliverability services, contact your Responsys representative today.