Let’s talk about Outlook. Microsoft’s venerable email client has a pretty steady grip on the email inboxes of Americans, probably due in no small part to Microsoft’s prevalence in the enterprise sector (and, being bundled with MS Office).
If your subscribers sit in an office cubicle in the U.S., they’re very likely to use it. Considering it’s been around at least since 1997, Microsoft has had plenty of time to improve its product, and by most measures has done so.
However, HTML rendering in Outlook stinks. Outlook 2003 uses Internet Explorer 6 to render HTML, which is pretty bad by modern standards. Outlook 2007 & 2010 render HTML using Word (yes, the word processor), which is an oil-tanker of offal come to dump its cargo full of suck on your day. If you’re an email marketer, email designer, or find yourself in the B2B client space, you’ve probably encountered some form of Outlook error. Your email looks pristine on your shiny iPhone, Android device, or web-based email client, but suddenly blows up when you open it up in Outlook. We’ve been there. We’re here to help.
I have two disclaimers. First, this article is for intermediate to advanced coders. You should be able to write and read HTML without a graphic interface to help you. Second, if you’re in the B2C space, or have a younger audience not privy to the whims of a corporate software buyer, you may be safe. At some point, the reward for investing the time designing and coding an email to beat Outlook’s messy rendering doesn’t pay off. If 1% of your client base is going to get a slightly less than optimal user experience for the extra 6 hours of work, you may find it worthwhile it to ignore Outlook entirely. Now that we've cleared that up, let's move on to the good stuff.
Things Outlook Doesn’t Support
Background Images: Outlook won’t display them at all. If you use a repeating background image, keep it fairly monochromatic and apply a background color as a backup. This is essential to keep HTML text displaying legibly.
Animated GIFs: Outlook will freeze an animated .gif on its first frame. (Boo)
CSS: CSS code displayed with the <head> tag can display erratically or not-at-all in many email clients, but it’s particularly nasty in Outlook. Keep your CSS styling in-line.
Bugs and Errors
There are a number of bugs and errors in Outlook, and I encounter new ones with some frequency. So while these are by no means all of Outlook’s bugs, here's a look at Outlook’s greatest (or worst):
The Padding-Top Bug: Padding-top will be applied to all <td> tags in a row, even if you only apply it to one <td>. There are several workarounds that come to mind. The easiest fix, in my mind, is to eschew using top padding on a row and add margin to elements contained within table cells to control the space between the element and the top of the table cell. Be careful to write the margin shorthand (margin: 0 0 0 0) instead of long hand (margin-top: 0px). In the latter case, you risk encountering a Hotmail bug. You can also add a one-cell nested table, and add padding-top to that. But that seems a bit inelegant.
The 1,800 Pixel Bug: If you create long emails, like a large quarterly newsletter, Outlook can break your email at around 1800 pixels. Remember when we mentioned that Outlook 2007 and 2010 render using Word? In this case, Outlook is treating your email as multi-page word processor document, and is adding page breaks. Surprise!
Table-Cell Bug: For table-cells with images shorter than 12px, be sure to apply height to them or face Outlook’s wrath. Sidenote: I hope you’re specifying your table cell height as often as you need to anyway.
Adding Strokes to Tables: If you add a stroke to a table that contains other elements, Outlook can add extra space/padding. In general, be very careful when using strokes on table elements.
Line Heights: Outlook can have issues with line heights, specifically if you like to specify line-heights using a number like 1.3. When you set that number to a less than one, Outlook will crop your typography in odd ways. You can find a nice guide for line height reference here.
Final Thoughts
If you’ve read all the way down here, you may be a bit depressed by now. On the other hand, if you’ve been coding emails for a bit, you’ve probably internalized your rage and learned to expect the worst. The solution, simply, is to test, test, and test again. Testing for rendering issues is the only way to make sure your emails render consistently. Always send a test email to an inbox running Outlook.
The second solution is to fill your emails with useful content. Get feedback from your customers on what kinds of messages they want to read and email accordingly. Ultimately, useful content will trump a few graphic discrepancies any day of the week.
Extra Credit!
Read Microsoft’s guide to CSS support in Outlook 2007. The best part of this guide may be the comments section, where email designers have contributed a litany of woes.
Posted by Patrick Leahy.
Patrick Leahy is the Graphic Designer, Interaction Design Team at VerticalResponse. Connect with him on Twitter at @HelloPartick.
Related Posts:
Emails We Love - Just in Time for Valentine's Day
Hey friend,
I read your blog, it's really interesting and informative about outlook.It's really very helpful to understand that how outlook works?
Really, thanks for sharing with us.
Posted by: urtechmate | May 22, 2012 at 10:40 PM
I like Outlook!
Posted by: Igor | April 24, 2012 at 12:00 AM
Yes tell me more! Thanks for this info! :)
Posted by: Anna | March 06, 2012 at 07:21 AM
Nice article. It's good therapy to know that Outlook abuses everyone without discriminating.
Posted by: Mike | February 22, 2012 at 08:54 AM
I love it when you talk like that!
Posted by: Mom | February 17, 2012 at 06:52 AM