Having built (far to many) HTML e-mails for use in Outlook 2003 I had become quite confident in my ability to create what ever a designer (I'm just the code monkey at work) threw at me. However, with Outlook 2007 it seems that the "game" has changed.
To the best of my knowledge Outlook 2003 used the IE engine to render HTML thus anything you created that looked "correct" in IE would come out the same in Outlook 03. With Outlook 07 MS switched to using the Word engine to render HTML, thus I was under the impression that what ever my HTML looked like in Word it would come out looking the same in Outlook 07. While this is true to some degree I don't find that it is as consistent as the Outlook 03 and IE combo.
In any case, I'm looking for the best tips and tricks for working with HTML e-mail in outlook 07.
I.E. You can't use FLOAT in CSS so instead use nested tables to get content positioned correctly. I.E. Background Images are not allowed so it's best to avoid this in the design.
7 answers
points
The e-mail standards project is a good place to start looking for compatibility with various clients. Outlook 2007 appears to support float in some sense of the word.
Hope that helps get you started. Usually, I end up relying on the simplest markup and css for generated e-mails.
points
I build a lot of HTML emails for my clients. One of them uses a service called ExtactTarget. This is what I was told by ExactTarget regarding Outlook 2007:
does not support background images (HTML or CSS)
does not support Flash, or other plugins
does not support CSS floats
does not support replacing bullets with images in unordered lists
does not support CSS positioning
does not support animated GIFs
Therefore, to get the absolute best results across as many email programs as possible I always do the following:
- Build all HTML emails using tables for positioning. It kills me to do this as I am a total believer in CSS, but for HTML emails right now, it's the only solution.
- Use only inline CSS. Therefore each paragraph, each image, each table, etc. has its own inline CSS rules for things like size, font, color, etc.
- Never use background images of any kind. This requires a little extra work on my part when I'm designing the email and building it in HTML, but I've gotten to the point where I can get the look I want without background images most of the time.
- Use nested tables where necessary for positioning.
I think that if you follow those guidelines you'll be in pretty good shape. Hope that helps.
points
Campaign Monitor has a pretty extensive list of e-mail clients and how they support CSS. I hope it will help you in optimizing your HTML e-mails for Outlook 2007 and any other e-mail clients.
points
Unfortnately, I've learned through the years that the best way to produce HTML emails for the largest variety of email clients is through tables, spacer GIFs, font tags and spans with styles on them. It pains my soul to do so, but doing it that way ensures that there are no discrepancies.
points
In some cases, you can add a message telling the Outlook 2007 user to view the web version in stead (if there is one) using conditional comments (yes it works in Outlook 2007 as well):
<!--[if gte mso 12]>Outlook 2007 only stuff<![endif]-->
I've tested this in Litmus and it works fine.
Alltough this might not be the best way to do it, as it is plattform/client discrimination you could argue it's a valid solution in some cases (where advanced html emails - for some ugly reason - are used). A lot of the modern email clients today have pretty good support of CSS, so this way you don't need to make the email ugly for all email clients just because Outlook 2007 su... is lagging behind :).
Best way to make it work though, is to keep it simple.
point
Outlook 2007 does support padding on <td> elements. It doesn't support it on <div> elements.
However, there is a major bug with placing padding on <td>'s, Outlook 2007 will inherit vertical padding across <td>'s.
That is, two <td>'s side by side and you put padding-top:10px on the left one, the right will inherit it. So, just be very careful where you place it. It's handy for horizontal padding. I'll usually use <td> padding for general structure and <div> padding for text shaping. Usually when Outlook 2007 drops the <div> padding, everything is still readable and structured.
points
FYI, Outlook 2007 uses the Microsoft Word HTML renderer and editor. Remember too, that while there are only four main browser engines, there are about 40 different email clients in use, many of them with their own email renderers. All the more reason to stick to the lowest common denominator and make the first thing on your email a link to a web page version of your newsletter.
And while I hate to speak ill of the sponsor of this site, "testing" sites support pitifully few of them. (I have used four different mail clients in the past 12 years, all are still currently available, yet none appear on the testing list)
