Gallery of Common Outlook Rendering Issues
After the Outlook team reached out to the email community to get some feedback on Outlook rendering, I decided to take a look into my inbox to identify some emails that have obvious rendering issues in Outlook.
I found that there were about 10 or so common issues and came up with a test email to demonstrate them. The side-by-side screenshot below shows how the test email rendered in Apple Mail vs Desktop Outlook 2016 Preview:
Gallery of Emails
The following are side-by-side screenshots comparing how some emails rendered in Outlook vs another mainstream email client such as Yahoo! Mail or Gmail.
I have annotated the images to refer to the issues in the test email above.
Source: http://codepen.io/freshinbox/pen/ZGavrQ?editors=100Here’s a simple email with background images that is not supported by Outlook.
Source: http://codepen.io/freshinbox/pen/YXEYdj?editors=100A more involved example with multiple rendering quirks.
Source: http://codepen.io/freshinbox/pen/eNeVBE?editors=100This email uses the VML background image hack. Since VML cannot be tested in a browser, this can lead to unexpected rendering quirks.
Source: http://codepen.io/freshinbox/pen/vOWRMZ?editors=100Don’t you feel background images make an email look nicer?
Source: http://codepen.io/freshinbox/pen/LVOmGW?editors=100There comes a time to throw Outlook support to the wind. Other than wrapping sections in tables, there’s not much else in this email that works with Outlook.
Source: N/AThis email obviously wasn’t designed with Outlook support in mind. Considering who its from, I’m not surprised :)
… and yes Jack is a name I use for my Gmail test account.
Conclusion
I found that although most emails seem to render decently in Outlook, there were a few common gotcha’s that tripped them up – principally, not having a width attribute in images and the adding of padding to links to create call to action buttons.
Not surprisingly, emails from major retail brands held up pretty well. I attribute that to the fact that a vast majority of those emails are made up of image slices, leverage tried and true templates and go through stringent processes that test those emails against rendering services such as Litmus and Email on Acid.
If you would like to highlight some other examples of emails with rendering issues in Outlook, you can post them here.
Justin, your last email was encouraging and I really thought things were looking up for Outlook rendering, and this is cringe-worthy. One can only hope that Microsoft takes a look at this post to fix these issues. I just don’t understand how a company so large and in charge can suck so royally. Why is it so difficult to render HTML/CSS attributes that have been around for years and are supported elsewhere? Forget animation and other fun enhancements, AT LEAST support the basic stuff!! SMH. #outlooksucks #gohomemicrosoftyouredrunk
Awesome stuff Justin. I think it is worth noting that Outlook renders most stuff decently because most people have accounted for Outlook’s rubbish when building email templates. Litmus’s design conference email is a great example of this. They had a completely dynamic version and then had to have another complete workaround for Outlook.
There are also quirks like background images in Outlook only work on the body tag if you don’t set background-repeat. Inherit doesn’t work (which is one of my favorite Outlook work arounds) and no support for padding on anything but table cells. That is stupid.
I don’t think they need to fix what they have. They just need to start again and base what they do on this crazy thing called web standards.
Keep fighting the good fight! You are doing an awesome job Justin!
Thank you Josh! Can’t wait for the day when we can retire all these Outlook workarounds.
The real challenge is going to be convincing businesses and corporate users of Outlook to update their Outlook, rather than using the older versions. It’s great that Microsoft are now looking into rendering (in)capabilities of Outlook though – the more the companies who provide the software show an interest in this is always a good thing for us email geeks.
Please note that all the VML fallback stuff will NOT work anymore in the new Outlook Mail client, which will be the default e-mailclient in Windows 10 for million of users. They choose to use the Word renderengine like Outlook 2013, but decided to cut support for our “beloved” VML fallbacks. The result: Images in the fallback will not be rendered, you’ll just see a red cross with error-message.
Even worse is the new WIndows 10 mobile update. It uses the exact same e-mail app as the desktop version of Windows 10. It is not responsive and it’s basically Outlook 2013 on the mobile phone, without VML fallbacks (yes.. it’s as bad as it sounds!)
I’ve been developing emails for over 5 years and spent most of that time complaining about outlook, but this “Outlook adding a page break in long emails” bug I just ran into takes the prize for the worst email rendering bug ever. After wasting nearly 2 days, I found this article and was able to redesign my email to accomidate the problem.
https://www.emailonacid.com/blog/article/email-development/horizontal_spacing_issues_in_outlook_2007_and_2010
Thank you Michelle Klann for documenting this.
Outlook really needs should support animated gifs as well. Although most email animations are fluff, some are extremely useful and informative. But the real issue is the millions of man hours designers and developers have spent to support the only email client that doesn’t support animated gifs
Sorry to keep adding bugs here, but the idea that MS might actually be paying attention… Litmus documented a really ugly outlook issue here https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013
At the end of the article the say “the solution is simple” but that’s a bit misleading. The solution is only use pixels. Basically that makes designing responsive emails that still look good in outlook gets just a little bit harder and, once again, Outlook makes all email developers work just a little harder and longer to accommodate for their lack of hard work.
Hi Rob, feel free to use the comments as much as you like! Though this thread on the Litmus forum might work better if you wanted to get their attention :)
https://litmus.com/community/discussions/1488-desktop-outlook-html-css-support-wishlist