Email Rendering in the Outlook App

| 4 comments

There are many 3rd party email client apps available on iOS and Android to use. With the release of iOS 10, iOS users can even delete the default iOS Mail app, especially if they prefer using a 3rd party app (here’s looking at you, Gmail). And the support across these apps can vary, even between the same apps across iOS and Android devices.

One of these apps is the Outlook app — which used to be one of the best email apps available. You’re probably thinking I’m crazy, considering it’s Outlook after all, but it’s true! The Outlook app used to support responsive emails and media queries, and rendered quite similar to the iOS app. That’s the key here… used to.

Around mid-December 2016 is when I started to notice changes with the Outlook app, on Android only. At work we have multiple Android devices to test on and in only 1 of them emails were rendering really wonky. All the emails are developed with the Hybrid technique, so if media query support was dropped, then it would gracefully fall back and still be “responsive” in a sense without the progressive enhancement.

But that’s not what was happening. Not only were media queries not working, but even inline styles stopped working like display: block; on images and CTA buttons, or styles on linked headings. I couldn’t figure out what was going on because it wasn’t happening on all of the devices.

Fast forward to January 2017 and sure enough the craziness I had seen previously began to happen in ALL of the Android devices in the Outlook app. And over time, changes started to happen in the iOS version too — but thankfully, not as bad. Media query support appeared to be dropped, but inline styles were still working.

Additionally, I began to see in the Litmus community and Email Geeks slack that other people were having issues too. It also seemed like it could depend on the email account used with the app as well.

So, I decided to do some testing. I tested 5 different email accounts in the Outlook app for iOS and Android:

  • Hotmail.com
  • Outlook.com
  • Yahoo.com
  • AOL.com
  • Gmail.com

I used the following devices to test on:

  • iPhone 6s, iOS 10.2.1, Outlook app version 2.18.0
  • Samsung J3, Android 6.0.1, Outlook app version 2.1.165

Testing Results

Note: These results are as of March 31st, 2017.

On iOS it appears that Microsoft-based email accounts no longer support media queries (tested them in the <head> only), as well as Gmail (which did previously). However if you use other email accounts, full media query support is still there!

  • Hotmail.com: No media query support
  • Outlook.com: No media query support
  • Yahoo.com: Supports media queries
  • AOL.com: Supports media queries
  • Gmail.com: No media query support
Outlook App iOS

Outlook App on iOS. Left: @hotmail.com, Right: @aol.com

On Android, the results were quite different. For Microsoft-based email accounts (and Gmail, which was fine for a previous test on Android too!) not only do media queries not work, but the inline styles are also lacking support. We’re talking CTA buttons that no longer look like buttons, @2x retina images blowing up to display as big as possible, link styles changing to default blue, etc.

  • Hotmail.com: No media query support, and inline styles support is lacking
  • Outlook.com: No media query support, and inline styles support is lacking
  • Yahoo.com: Supports media queries
  • AOL.com: Supports media queries
  • Gmail.com: No media query support, and inline styles support is lacking
Outlook App Android

Outlook App on Android. Left: @hotmail.com, Right: @aol.com

Conclusion…

If you’re coming across crazy rendering issues in the Outlook app, you’re not alone! At this point, I don’t have a “fix” for these issues — and I’m not even sure if there IS one, especially for inline styles! However if you do see these rendering issues too, please submit a ticket with the Litmus and Microsoft partnership with as much info as possible. This will (hopefully!) get Microsoft to prioritize these issues.

I’m curious to know what happens with other email accounts as well! Have you come across these rendering issues? Share below in the comments!

  • Great article Courtney! I saw the same behaviour in the native app on a Galaxy S4… With a gmail address the email renders well, but with an outlook.com address it’s foobar.

  • shia

    omg so glad i found your blog, i thought i will be crazy configure out why outlook keep ignoring media queries.. god…

  • Ugh! Of course haha it’s so crazy!! And inconsistent for sure. Somehow Microsoft is going backwards now not forward. My hope is they’re trying to consolidate everything, and then go forward from there.

  • Eric Lepetit

    I am facing the exact same issues Courtney, except Android Nexus 5X with an outlook.com account seems to support Media Queries…. go figure…