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

Friday December 11th 2015 at 8:41 PM

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:

Example #2:

Example #3:

Example #4:

Example #5:

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.

Conclusion

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.