Design young man pulling funny face on white background

Published on February 16th, 2012 | by Patrick Leahy


It’s Not You, It’s Outlook – The Complete Guide for Email Marketers

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).
Frustrated with Outlook
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.

Don’t Have a VerticalResponse Account Yet?

It’s easy to use and free to get started. Sign up and start sending emails today.

Sign Up

© 2012 – 2016, Patrick Leahy. All rights reserved.

Read Next:

Tags: , , , , , , , , ,

About the Author

Patrick Leahy

is a Graphic Designer at VerticalResponse.

23 Responses to It’s Not You, It’s Outlook – The Complete Guide for Email Marketers

  1. Smithe784 says:

    Thanks a bunch for sharing this with all of us you actually realize what you’re talking approximately! Bookmarked. Kindly also visit my web site . We will have a hyperlink exchange arrangement among us! aedgbfeakbfdekgf

  2. Smithe337 says:

    Hey there, You have done a great job. I’ll definitely digg it and personally recommend to caebdadcfdkddbfg

  3. Smithk884 says:

    I like this post, enjoyed this one thank you for putting up. No man is wise enough by himself. by Titus Maccius Plautus. badcfgkgebddbdka

  4. cheap_cialis says:

    In my friend’s web blogs they already have provided me on the website rolls, but mine usually is located at the bottom on the listing and does not selection when I place as it does for some individuals. Is this a placing that I have to difference or is this a choice they may have considered? .

  5. purchase_cialis says:

    Tormoxin 500mg Cod Next Day Delivery in Hartford

  6. cialis says:

    I do not even know how I stopped up here, however I assumed this put up was good. I do not recognise who you are however definitely you’re going to a wellknown blogger for those who are not already

  7. Smithb778 says:

    i love your blog and i think its going to my favorite!!i love viagra and cialis too! ddbafedddcdbaaek

  8. order_viagra says:

    Thanks for any other informative web site. Where else may just I get that kind of information written in such an ideal way? I have a mission that I am just now operating on, and I have been on the look out for such information.

  9. generic_viagra says:

    It’s very straightforward to find out any topic on net as compared to textbooks, as I found this article at this site.

  10. buy_viagra says:

    nasa, , harold hill

  11. cheap says:

    This will be a fantastic site, will you be interested in doing an interview regarding just how you designed it? If so email me!

  12. restpharm says:

    restpharm ,

  13. buy_viagra says:

    My spouse and I stumbled over here by a different internet address and thought I might check items out. I like what I see so i am just following you. Appear forward to checking out your web page again.

  14. buy_viagra says:

    There is visibly a bundle to realize about this. I assume you made certain nice points in features also.

  15. free_viagra says:

    Normally I do not read post on blogs, but I wish to say that this writeup very compelled me to try and do it! Your writing style has been surprised me. Thanks, quite great article.

  16. Pharmd796 says:

    Very nice site! cheap goods

  17. Pharma844 says:

    Very nice site!

  18. Smithd211 says:

    Hey are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you require any coding knowledge to make your own blog? Any help would be really appreciated! daedefeafeggbeaf

  19. urtechmate says:

    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.

  20. Igor says:

    I like Outlook!

  21. Anna says:

    Yes tell me more! Thanks for this info! :)

  22. Mike says:

    Nice article. It’s good therapy to know that Outlook abuses everyone without discriminating.

  23. Mom says:

    I love it when you talk like that!

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ↑