HTML email in Outlook Mail on Windows 10, a total mess


Outlook Mail is the new “Universal App” and default email client on Windows 10 and Windows 10 Mobile. It shares a somewhat familiar Microsoft Word engine core similar to its desktop predecessors. Earlier on in the year I wrote about the Outlook Mail app when it arrived in preview form via the Windows Insider programme. What I found was a very different email experience to what was previous seen on Windows 8/8.1 and Windows Phone 8/8.1. Months later and with Windows 10 (PC) officially released, new Windows 10 Mobile devices now in the market and with pre-existing Windows Phone 8.1 devices being prepared to receive the upgrade very soon, how have things changed? In this article I’ll cover the problems with Outlook Mail and what I think Microsoft need to do to fix it.

A little bit of Outlook history

Are we sitting comfortably?

Microsoft cannot deny that the HTML email experience in Outlook overall is poor and misses the mark of today’s digital world. There are so many inconsistencies in email rendering and evidence to ignore this. To gain some general background this actually all started way back in 2007 when Microsoft switched Outlook from rendering with the Internet Explorer engine to Microsoft Word. Up until this point, Microsoft had actually been using two rendering engines in Outlook. Microsoft Word was used for composing email and Internet Explorer was used for rendering email messages. This however got costly to maintain and therefore the decision to move to one rendering engine was made, and the problem begins. Dropping Internet Explorer in favour of Microsoft Word opened a world of pain that still continues on today.

Moving on to more recent events and the same situation has essentially repeated itself in a slightly different way. Microsoft shifted their Windows 8 mail app (Metro) and Windows Phone 8 mail app (Outlook Mobile) from using the Internet Explorer (which was known as IE Mobile on mobile devices) rendering engine to Microsoft Word in Windows 10. Something which previously has only ever been part of a Windows based Outlook client on the desktop. From a technical and management perspective it makes sense to align and unify your product across devices to ultimately streamline development, it has however had massive consequences on the HTML email experience much like the Outlook 2007 situation did. This time however, the mobile segment is now directly effected and hurting from this change, because Outlook is stuck in the past.

The key facts

It is very easy to dismiss any Windows based Outlook client as junk because of its poor email rendering, but it is important to understand the reasons as to why Outlook behaves this way. The bottom line is any email client is only as good as its rendering engine and preprocessor, which we all know to be Microsoft Word in the case of Outlook. Here are the key technical reasons as to why Microsoft Word is a problem in email today.

  • Microsoft Word only supports HTML4, CSS1 and only some of the CSS 2.1 specification
  • Microsoft Word implements a proprietary mso- prefix for additional CSS properties
  • The documentation for Microsoft Word and its HTML and CSS support is hideously out of date
  • Microsoft Word lacks any web standards like HTML5 or CSS3 that you will find in more modern email clients
  • Microsoft Word has poor DPI scaling abilities when using higher pixel density devices both on PC and mobile/tablets
  • Microsoft Word forces email developers to use table layouts because it lacks proper support for <div> tags
  • Microsoft Word lacks the ability to create accessibility friendly image off layouts due to the forced “Security restriction” message added to any image element
  • Developers have to use specific MSO conditional logic to fix compatibility issues around rendering
  • Developers now have to re-evaluate MSO conditional logic because it now targets multiple platforms rather than just the desktop starting in Windows 10

The list could go on for a while, but these are the main points. Now lets move on to how this affects Outlook Mail and Windows 10.

Outlook Mail is a modern application that’s stuck in 2007

As I mentioned in the beginning Outlook Mail is a Universal Application part of Microsoft’s one Windows vision. It is the same application across the desktop, mobile and tablet devices. While this provides much needed consistency across platforms, it also brings the same problems Outlook on the desktop has had for years, and now that decision is not only just affecting the desktop, its really starting to hurt the mobile space too. The way I see it, I would describe Outlook Mail as a modern application that’s plagued by its own design, which has been inherited from a poor decision made all the way back in 2007, long before Windows 10 was even conceived as an idea, yet alone an Operating System.

Of course this is all my opinion and subjective, but facts speak for themselves. I have decided to collate email examples in Outlook Mail on Windows 10 and compare them to another application that can render HTML and CSS, Microsoft Edge. This of course being Microsoft’s next generation web browser which will essentially replace Internet Explorer in the long term. Using Microsoft Edge to prove the massive disparity in rendering capabilities between the two products is rather fitting considering they have both come from the same company but designed by different teams and likely different visions.

For this research, I used the following setup:

  • Windows 10 Mobile (Build 10586.29)
  • Outlook Mail (Version: 17.6509.42252.0)
  • Device: Microsoft Lumia 950 XL
  • IMAP mailbox
  • Microsoft Edge

All email examples were chosen based on how poorly they had been rendered by Outlook Mail and if they featured a web version link. Meaning the same source code could easily be run on Microsoft Edge for a fair comparison without modification.

Disclaimer: Some of the examples may have been pinch zoomed for viewing more of the layout in the viewport space available without splicing screenshots. Ultimately, its important to remember the goal is to demonstrate the mass difference in rendering, by looking at elements like images, widths/heights, buttons and overall appearance.

The results

Below you will find the selection of emails I have collated. I have placed the Outlook Mail rendering on the left and Microsoft Edge rendering on the right in a side-by-side comparison. The images have been created with the actual resolution of the Lumia 950 XL, therefore they are each quite large in file size and resolution. They are provided in smaller preview form here, but you can click on any example to see the full size version.

Disclaimer: I certify that none of the screenshots have been manipulated in any way what so ever, they are live versions exactly as rendered on my Lumia 950 XL.

Example #1:

Campaign Monitor Newsletter

Example #2:

Capital FM

Example #3:

Game UK

Example #4:

PlayStation UK

Example #5:

Papa Johns

My findings

Reviewing each email example there are common areas where Outlook Mail seems to struggle, these include:

  • Viewport issues (Content not fitting to device width)
  • Widths being too narrow for elements within
  • Images being scaled incorrectly
  • Text being enlarged
  • Overlapping elements
  • Layouts appear out of proportion to the original design

Overall you can pretty much see the email experience Outlook Mail users are dealing with here and its not nice.

Pixel density (DPI) is a major problem

To provide some perspective the Lumia 950 XL has a pixel per inch factor of 518 ppi, this is very high resolution. We already know that Microsoft Word doesn’t handle DPI scaling related areas very well in email and the Lumia 950 XL is evidence that this is very much the case still. Comparing the output to Microsoft Edge we get a very different result. Combine that with the fact that Outlook Mail is limited to the same HTML and CSS support as its Outlook desktop client counterparts (thanks to its Microsoft Word engine core) and it basically spells disaster for HTML email in the inbox.

Seriously, every email campaign I receive is pretty much broken in some way, meaning I immediately opt for opening the email in Microsoft Edge just so the layout is actually rendered properly so I can make sense of it! Can you imagine engaging with any of these emails directly in Outlook Mail? I think not. In an ironic twist its often the case that the less HTML used in an email in Outlook Mail, the better!

To add to the confusion you can take a lower pixel density device such as the Lumia 635 (218 ppi) and render the same email on it and find the layout doesn’t look as bad or indeed looks different, causing users to question why different Windows 10 devices running the same application are doing different things. For the technical and developer types, we know this to be all down to DPI/pixel density, but you can’t expect the average consumer to understand or even care about that, they just want things to work, and quite right too. From one reason to another, both users and developers are not happy with the current state of Outlook Mail and its HTML email rendering whether that’s because of the technical aspects or the broken visual they see as the end result of this mess.

What can/needs to be done?

We need the Microsoft Word rendering engine to be changed. Its as simple as that. I can’t imagine anyone is happy with how Outlook Mail is rendering HTML email at this point. While its not as simple as just saying “FIX THIS” and the email development community has tried to get this to happen before, there is new hope however. More recently Microsoft reached out to Justin Khoo of FreshInbox about wanting to improve Outlook, which essentially means modifying the Microsoft Word engine as its the root cause of the problem. While things have gone cold lately, the email community has rallied and provided lots of evidence and ideas that would help make this happen. It is very much in Microsoft’s hands, as it has always been but with fresh new perspective and evidence to back up the request for change.

From my perspective the following needs to happen to bring Outlook Mail into the modern age and start to tackle the identified issues:

  • Improve the HTML and CSS support of the Microsoft Word engine
  • Add CSS3 support to allow further refinement of HTML email campaigns
  • Improve how Microsoft Word handles DPI in email

These three points are the major barriers as to why Outlook Mail is in the position it is in today.

It is obvious that Microsoft have committed themselves to using the Microsoft Word rendering engine in Outlook for the long term, so its not going to go away any time soon.

It dawned on me recently that as developers we are all essentially born to hate any Windows based Outlook client, because of Microsoft Word, but the reason for that when you think about it is only because it lacks web standards. If Microsoft could modernise the Word engine we’d have a whole different experience and view on our hands. It isn’t a totally impossible task to perform either. Last year Office 365 was suffering from the same problems and while it still could be better, it was certainly a step in the right direction when Microsoft updated Office 365 by improving the HTML and CSS support and loosening the restrictions on its pre-processor. Applying the same theory to Outlook Mail, would be a major development and breakthrough in getting Outlook into the 21st century for rendering HTML email.


The examples and evidence presented above shows just how bad the email experience in Outlook Mail currently is. For the record and full disclosure I have been a Windows Phone user since 2011. While I give Microsoft flack and am openly critical of Outlook, its because I care and want the platform to succeed and be the best it can be. I committed myself to Windows 10 Mobile, knowing about Outlook Mail because I believe it can be changed. For an Operating System that has so much promise to be ruined by something like this is quite frankly ridiculous. In my opinion, it requires the right feedback and Microsoft’s willing to accept they made a mistake with Outlook a long time ago and realise that as part of its new Windows as a service (WasS) model, it can be corrected because of the landscape we are part of today, being a very web and mobile first centric world.

I hope Microsoft listen to mine, every consumer and email developers views about Outlook and change its ways. For the sake of consumers and developers alike, we are all united on pushing this change for one reason or another.

I’ll leave the following references and resources for further reading:

Your move Microsoft.

Share This:

  • Geoff Phillips

    Great post! Those examples are really scary. We obviously need to support this client on Email on Acid as soon as possible, and get some tips and tricks together to help developers. I am full of excitement/dread when I think about researching this bugger.

    • Thanks Geoff! The MS Word engine has never looked so ugly right?!

      • Geoff Phillips

        Yeah, it’s pretty incredible that it has gotten this bad. I thought Microsoft understood the growing importance of mobile, but it seems not.

        • Indeed. Bringing MS Word to the mobile space in this form was a terrible mistake. The slightly good news about all of this is normal consumers are seeing the consequences of this decision and because its so early in on the Windows 10 Mobile lifecycle Microsoft cannot ignore the feedback! They’ve ignored email developers for so long, can they really afford to ignore consumers that are part of their Windows 10 vision? I don’t think so.

          If I’m honest, I’m reluctant to defensively code for Outlook Mail. In a way email developers have the power and need to take a stand and say “No more” and force Microsoft’s hands. No excuses this time!

  • Pingback: En vrac, l'emailing cette semaine : Une bonne délivrabilité pour transformer votre marketing !()

  • John

    I can confirm I get exactly the same rendering issues on my Lumia 950. The phone is great, but email rendering is a huge let down. It just looks like there has been no effort at all in windows 10 to quality control mail rendering.

    • Yes all Windows 10 Mobile devices are affected. Devices with higher pixel density suffer from layout issues further due to short comings in the Word rendering engine.

  • Rui Gomes

    Good article. Thanks.

  • *whew* I’m always glad to know that I’m not the only committed Windows Phone user devotee out there – I started with my Samsung Focus in early 2011 too, and enjoyed the HTC Titan, Lumia 920 and the HTC One M8 too. I’ll be on that last one until any type of Surface Phone materializes, and I have yet to install the Windows 10 Insider Preview on it.

    Also glad to know I’m not the only web/email designer committed to the platform! A truly stellar article – I wondered why my email designs were looking so miserable in the Windows 10 mail app, and now I know. It’s frightening how hard MS is pushing Windows 10 – I know more and more people will be using this app!

    Can anyone tell me what rendering engine the Outlook app uses on iOS and Android, respectively? Emails look great there…

    • Thanks for your comments!

      The Outlook app on iOS and Android I believe uses webkit for rendering. If I’m not mistaken Microsoft has essentially acquired the app from its Acompli purchase some time ago. Its a rather ironic situation where by Outlook is worse on Microsoft’s own platform. The Windows Feedback app is full of negative comments on the whole situation!

      On the one hand its good, because for the first time general consumers are seeing how bad the Word engine really is and how developers have had to suffer/hack/workaround it for years. The downside is of course consumers gets a VERY bad user experience, which is like rule #1 of how not to create a product right?!

      How long Microsoft hold out on this is really up to them, but they should be prepared for the backlash and mass exodus of users leaving. They’ve already made some major fans leave. I’m staying, because I still have faith, but it gets harder each day!

  • dking

    Glad I came across this article — I couldn’t for the life of me understand why in the heck the body of a lot of the emails in my W’10 Outlook client were/are pushed way to the right side of the app screen. I have a MS Surface Pro 3, and at first I thought it might one of the quirky features of this specific device which multitude of such features (but I’ll save those for another blog). I finally deciphered that the issue only occurs with Web mail. Your explanation of the issues has restored my sanity, even though the source of my confusion isn’t going to be remedied anytime soon.

  • Fishy Fred

    The new windows 10 Mail on a PC is an absolute abortion compared to its predecessor. Can’ sort or search, create a folder, it is continually trying to sync to something – don’t know what, the rubbish bin disappears after deleting an email and you have to move the cursor to get it back, won’t open attachments, keeps putting sent mail into the drafts folder. It was obviously designed for the mobile applications and just thrown into the Windows 10 PC programme with absolutely no thought at all.

  • Naran K Patel

    I have Outlook 2016 on Windows 10 and it’s frequently rendering badly and
    then getting completely stuck and has to restarted – unacceptable!

    I’m tired of this not getting fixed. I’m considering moving my mail to another client maybe some of open office or other suites instead. Please fix Outlook on Windows 10 (including Insider builds) Microsoft!

  • Ronen Magid

    Microsoft is such a retarded company. No wonder folks are rushing to Mac.