Home Blog Email rendering in the Outlook app

Share this post

Email rendering in de Outlook app

Email rendering in the Outlook app

Written by Team e-Village / 21 July 2017 / Technique

There are many third-party apps available on iOS and Android to read your emails. Since iOS 10, iOS users can even remove the standard iOS Mail app, especially when they prefer to use another app. The support for these apps can vary, even between the standard Mail apps on iOS and Android.

One of these apps is the Outlook app. The Outlook app supported responsive emails and the HTML and CSS support was great. This meant us email developers didn’t worry too much about rendering emails in this app.

The Outlook app is a Microsoft product, but it’s based on the app Accompli that Microsoft bought back in the day. Unfortunately, Microsoft tends to not take its HTML and CSS rendering in its email programs too seriously. But perhaps their partnership with Litmus will improve things.

This also applied to the Outlook app. Since December 2016, there were clues as to the rending of emails in the Outlook app for a number of Android devices. Media queries were no longer supported, and even inline styles were no longer respected. In January 2017, it got even worse, and this situation applied to the Outlook app on all Android devices. Support for media queries had also disappeared from the iOS-version, which also stopped showing responsive emails the way they were intended.

Several email developers across the world noticed this, and part of the issue seemed to be which email account you used in the Outlook app.

Courtney Fantinato, an 'email geek' from Canada, took the lead in testing a few things in the Outlook app for iOS and Android using five different email accounts.

  • Hotmail.com

  • Outlook.com

  • Yahoo.com

  • AOL.com

  • Gmail.com

She tested on the following devices:

  • iPhone 6s, iOS 10.2.1, Outlook app versie 2.18.0

  • Samsung J3, Android 6.0.1, Outlook app versie 2.1.165

The results

Note: these results are as per 31 March 2017

It turned out that, when using Microsoft related email accounts such as hotmail.com and outlook.com, the Outlook app no longer supported media queries. The same went for Gmail accounts. For other email accounts, however, there was still complete support for media queries!

  • Hotmail.com: No support for media queries..

  • Outlook.com: No support for media queries.

  • Yahoo.com: Supports media queries.

  • AOL.com: Supports media queries.

  • Gmail.com: No support for media queries.

E-mail rendering

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

The results were very different for Android. For Microsoft-based email accounts, not only did media queries not work, but there was no support for inline styles either. CTA buttons were no longer correctly displayed, retina images were blown up, links were displayed in Outlook blue, etc.

  • Hotmail.com: No support for media queries and inline styles.

  • Yahoo.com: Supports media queries and inline styles.

  • AOL.com: Supports media queries and inline styles.

  • Gmail.com: Supports media queries and inline styles.

E-mail rendering

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

Conclusion

Should your responsive emails be displayed incorrectly in the Outlook app, you now know why. Unfortunately, there isn’t really a solution for this. Rather, we are at the mercy of Microsoft, and we can only hope Microsoft will keep working on this.

However, there has been one positive development. Since the 2.32 update of the app, media queries are once again supported for Gmail accounts! It seems that Microsoft is working on it, which is in line with the partnership with Litmus.

Scroll omhoog