{"id":1816,"date":"2015-06-25T20:12:53","date_gmt":"2015-06-25T20:12:53","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=1816"},"modified":"2015-06-25T23:07:17","modified_gmt":"2015-06-25T23:07:17","slug":"gallery-of-outlook-rendering-issues","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/gallery-of-outlook-rendering-issues\/","title":{"rendered":"Gallery of Common Outlook Rendering Issues"},"content":{"rendered":"

After the Outlook team reached out to the email community<\/a> 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.<\/p>\n

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:

<\/p>\n

\nOutlook Capabilities Test Email<\/span>
\n<\/a> Source: http:\/\/codepen.io\/freshinbox\/pen\/BNmmqY?editors=100<\/a>

\n<\/span>\n<\/div>\n


<\/p>\n

Gallery of Emails<\/h4>\n

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.

<\/p>\n

\nEventbrite Template<\/span>
\n<\/a> Source: http:\/\/codepen.io\/freshinbox\/pen\/ZGavrQ?editors=100<\/a>
\nHere’s a simple email with background images that is not supported by Outlook.
\n<\/span>\n<\/div>\n



<\/p>\n

\nProduct Hunt<\/span>
\n<\/a> Source: http:\/\/codepen.io\/freshinbox\/pen\/YXEYdj?editors=100<\/a>
\nA more involved example with multiple rendering quirks.
\n<\/span><\/p>\n<\/div>\n



<\/p>\n

\nSalesforce<\/span>
\n<\/a> Source: http:\/\/codepen.io\/freshinbox\/pen\/eNeVBE?editors=100<\/a>
\nThis email uses the VML background image hack<\/a>. Since VML cannot be tested in a browser<\/a>, this can lead to unexpected rendering quirks.
\n<\/span>\n<\/div>\n



<\/p>\n

\nGoFundMe<\/span>
\n<\/a> Source: http:\/\/codepen.io\/freshinbox\/pen\/vOWRMZ?editors=100<\/a>
\nDon’t you feel background images make an email look nicer?
\n<\/span>\n<\/div>\n



<\/p>\n

\nEtsy<\/span>
\n<\/a> Source: http:\/\/codepen.io\/freshinbox\/pen\/LVOmGW?editors=100<\/a>
\nThere 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.<\/span>\n<\/div>\n



<\/p>\n

\nGoogle<\/span>
\n<\/a> Source: N\/A
\nThis email obviously wasn’t designed with Outlook support in mind. Considering who its from, I’m not surprised :)<\/p>\n

… and yes Jack is a name I use for my Gmail test account.
\n<\/span>\n<\/div>\n


<\/p>\n

Conclusion<\/h4>\n

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.<\/p>\n

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<\/a> and Email on Acid<\/a>.<\/p>\n

If you would like to highlight some other examples of emails with rendering issues in Outlook, you can post them here<\/a>.
\n



\n

\n
\nSubscribe to the #EmailGeeks Newsletter<\/span>\n

<\/p>\n