Apparently, not a single programmer over at The Big M took a moment to talk with the marketing group during the recent build of the new operating system and office suite known as Office 2007. With the release of Office (and Microsoft Vista), email marketers are now on the defensive and we need to make some adjustments in our game-plans. MO ’07 has taken a step back about five years in the way it supports HTML email.
If you’re a graphic designer, have you ever had to “design” something in Microsoft Word? I think you know what I mean. For many small business do-it-yourself people, Word is the program for designing letterhead and simple announcements and brochures, but for the professionals, Microsoft Word is strictly for writing letters and proposals. Well, the bad news is the boys in Seattle have decided to replace the Internet Explorer rendering engine used to date in Outlook with the same rendering engine used in MS Word. Yuck. Apparently, they figure if front office personnel can send an email with some Clip Art, it should render correctly on the other end, right? Wrong.
This document won’t discuss the “why’s” behind this. There are hundreds of thousands of debates and issues regarding the new challenges and why Microsoft decided to do this. Simply Google “HTML email Outlook 2007” and you’ll get around 10 million results of stuff for you to read. How you’re accustomed to designing and developing your HTML emails is about to change if you want your emails to render effectively to those people on your email lists who may be upgrading to ‘07.
The stuff Microsoft changed and has documented for us, along with some tips to get around it:
® No support for animated .gifs.
For animated .gifs, only a static representation of the first frame will display, so make sure the most important message is present in that first frame.
® No support for Flash or other plug-ins.
We never recommended this anyway. Keep your fancy animations to a landing page. Most email clients don’t like Flash and in ’07, a red "X" will show in the area where the Flash would display.
® No support for background images.
Make sure none of your important messages are placed in background images. Use the HTML background property and not the CSS. Background images can be used as design treatments, but make sure they fail gracefully if missing or stripped. (For example, will a cool border or drop shadow effect look good if it’s missing? Also, provide a background table color attribute as backup. We’ve seen cases where white text is put on a dark background, Outlook then removes your fancy background graphic and you have white text on white. Yucky.
® Limited CSS support as in no support for CSS floats or 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. You’re going to hate this if you’re so used to CSS layout design, but (wait for it…wait for it), you have to go back to simple table design. Font styling is fine as long as you use inline CSS. Don’t reference an external style sheet, nor should you put styles inside the head tag. Outlook 2007 does support CSS in the body tag, but realize other email programs strip the body tag altogether. If you’re trying to create a body background color for example, you are better off creating a table and making a table background color. No more <div> tags. L
® No support for HTML form submissions.
Don’t do it. We never liked it anyway. It wasn’t supported everywhere to begin with. Let the user click-thru to a web form on a landing page.
® No support for JavaScript – period.
Just don’t do it. You never should have.
® No support for replacing bullets with images in unordered lists.
Again, this is driven usually by CSS. If you really hate black dots or squares for bullets and want cool looking arrows, you have to go back to table-based design and small arrow graphics to achieve this.
Unexpected/undocumented issues discovered:
· Outlook 2007 imposes a 2-pixel height minimum for cells. As an example, if an email contains 1-pixel transparent and a background color, the 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 cited 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 cell.
Even if you're not technically minded enough to understand all of the above, one thing is clear: most of the neat-o stuff you would like to do with email isn't possible. An email should simply be a vehicle to get ‘em to your landing page or web site – a stepping stone in the process. Let those pages do the work if you need animation, video, Javascript, cooler designs or fancier coding. At the same time, relish the design challenges and see what you can come up with.
But there is hope! Apparently Microsoft is listening and realizing that a large percentage of their audience are developers and not just business-folk. A task force is in place compiling the complaints and I expect an update at some point. Until then, be conservative and follow the advice outlined in this article.
Resources
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, Part I
http://msdn2.microsoft.com/en-us/library/aa338201.aspx
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, Part II
http://msdn2.microsoft.com/en-us/library/aa338200.aspx
2007 Office System Tool: Outlook HTML and CSS Validator
The Microsoft Office Outlook 2007 HTML and CSS Validator helps you check for valid/supported HTML before you send HTML-based e-mail.
Microsoft Office Outlook 2007 HTML and CSS Validator
Brett Houle oversees day-to-day operations of SendLabs.com, the online leader of hosted, email marketing software and solutions.