Email Marketing: Rendering Issues in Microsoft Outlook 2007

By Tony Pesavento
Art Director

Recently, Advent Media Group has started to offer a new service: email marketing. We have partnered with Constant Contact, the leader in email marketing best practices, to offer our clients turn-key solutions for their email marketing campaigns. We do the writing and designing; Constant Contact gets the email delivered.

As the designer, I had to test many different email client programs to be sure that the email would render correctly. My email was table based with a little CSS. What could possibly go wrong?

Yahoo, Google mail, and Outlook 2003 were all displaying properly. It wasn’t until a colleague sent me a screenshot from her Outlook 2007 that my journey into email newsletter design really began.

Bad News for Designers
“Microsoft Office Outlook 2007 uses the HTML parsing and rendering engine from Microsoft Office Word 2007 to display HTML message bodies. The same HTML and cascading style sheets (CSS) support available in Word 2007 is available in Outlook 2007.”

In the past, Outlook had used the HTML parsing and rendering engine from Internet Explorer to display HTML message bodies. At the same time, it used Word’s parsing and rendering to compose email. Today’s Outlook 2007 is streamlined to support the same HTML and CSS as Word 2007. This is definitely not good news for designers.

So, unless your HTML emails are very simple, you’re going to have rendering problems in Microsoft Outlook 2007. Here is a list of a few things that Outlook 2007 doesn’t support (for a more comprehensive list, click here):

• Animated GIFs – Outlook will only display the first frame of your animated gif. If you are going to use them, make sure the important information is on the first frame.

• Background images – Background images are not supported in CSS or in tags.

• CSS floats and positioning

• Flash

• Forms – The fields, text input, dropdowns, radio buttons and checkboxes, are replaced with “[ ]”, and buttons are deactivated.

• Inconsistent padding and margins

Thankfully for PC users, an Outlook 2007 Tool, HTML and CSS Validator, provides a way to validate HTML and CSS grammar using some of the most popular Web development tools: Microsoft Office SharePoint Designer 2007, Microsoft Web Expressions 2007, Microsoft Visual Studio 2005, Macromedia Dreamweaver MX 2004, and Macromedia Dreamweaver 8. Unfortunately for Mac users, Outlook offers no support for validation.

Classes, Inline Styles, Padding, and the Box Model
My email was an eight column table. It was 640 pixels wide. I had colspans and set widths with a few images aligned left and right. I was using Constant Contact’s Advanced Editor to create my email campaign. I would create classes that CC would convert into inline styles when sending the email.

My problems were these: Outlook 2007 was ignoring the padding on my text (classes and inline styles), butting it up to my table borders, while simultaneously adding that padding to my set-width table cell (padding and box model), causing my table to expand beyond its set width. I couldn’t wrap my head around why it supported the padding in one instance and not the other. This caused great confusion for me, and probably sent me down many dead ends.

The fixes
The latter problem was the easier fix. First, because Outlook 2007 seemed to follow the box model of Firefox (it was adding the border, the padding, and the cell width together to create a colspan greater than what I wanted), I deleted the widths of all of my table cells. The table was 640 pixels. If I had a colspan of 4, I could now assume that cell being 320 pixels, and I could design accordingly.

The text padding issue was not as easy for me. I was trying to apply classes and inline styles to the div tags for my body text. As you know, not all HTML tags, specifically the div and p tags in Outlook 2007, fully support CSS properties. This caused many problems for me. So, I tried other experiments like using the h1 tag, which fully supports the padding style, for my text, but that still didn’t work. Outlook 2007 was ignoring my padding on the text.

The one thing that worked for me was to apply a class to the td tag. My text had padding, but now so did my images! I tried applying inline styles with zero padding to my image, but that didn’t work (even though it should, according to Microsoft). My workaround was to reduce the size of my photo, accounting for the padding of the cell. So if I had 20 pixels of left and right padding, I knew that the width of my image had to be 20 pixels less.

Ultimate Workaround
I searched high and low for answers on the Web. I found a lot of blogs from the year 2007 that explained the new problems with Outlook 2007, but no answers. The purpose of this blog entry is specific: I had problems with how padding was rendering in Outlook 2007. For me, the solution was to add a class/style to the td tag (I believe the td tag is the key). This class included all of the styles I wanted for that cell. This was the only thing that worked for me. I hope this helps anyone having the same problems.

When all else fails, the best solution is to include a URL link that when clicked renders an e-mail in a W3C standard browser (i.e., Safari, Firefox, Internet Explorer).

At the top of my email, I used “Trouble viewing the below message? Click here.”

This resolved the many issues caused by Outlook’s HTML rendering (because it circumvents Outlook) - and should be considered a requirement on all emails.