Windows 10 Outlook Mail gets updated with email rendering “improvements”

Last week the all things Microsoft and Windows news site Windows Central reported an update to the Outlook Mail app which supposedly fixed the way emails were being rendered on Windows 10. Excited (because I’m that kind of nerd), I hammered the check updates button on the Windows Store with my Lumia 950 XL in hand to take a look at this new update. Find out more on what I found in the new update.

Looks like your trying to update Outlook Mail, want some help?

If you looked at the linked article in the excerpt you’ll notice that the date it was posted was several days ago. Sadly, the update mentioned actually got pulled not long after it was released. While unconfirmed, it was believed to be because the update actually broke functionality in the application itself. I didn’t get a chance to obtain the update before it was pulled so I had just read various user forums/comments on the changes. Talk about suspense! Potentially one of the most important updates for Outlook in email development history and its gets reverted in a few hours! Thanks Microsoft.

However, on Friday (5th February) an update finally appeared bringing the Outlook Mail app to version 17.6568.16822.0 which was cumulative and includes the originally mentioned rendering updates. Time to finally see what was happening for myself!

As it turns out, Outlook Mail has indeed received a boost in its email rendering capabilities, but don’t celebrate just yet! Things aren’t quite what they seem when you review the changes closely!

You know that famous phrase, “one step forward and two steps back“? Keep this in mind as you read on.

What’s changed?

First of all, no the Microsoft Word engine hasn’t been taken round the back of the shed and shot, its very much still alive and well. There are however various under the hood changes which are now affecting the way emails render, some of these changes are good, some are bad and some arguably worse than before! Here’s my breakdown of the changes from what I can tell so far:

• HTML/CSS support has been improved
• The device viewport is now zoomed in by default
• A lot of emails now go super wide on mobile devices
• Images seem to render better than before but its not perfect
• Most emails now render out of proportion to the device width
• Content areas are still “squished” in some cases
• No CSS3 Support
• DPI problems are still present

Additional HTML/CSS support

Someone in the Outlook team has injected Outlook Mail with a shot of additional HTML/CSS support because things are looking a little better in some cases in terms of layout rendering. While there isn’t any CSS3 support still, it appears the Outlook Mail now has more support for CSS 2 properties, however the bad news Outlook Mail is still using the HTML 4.0.1 specification, so don’t get too excited! Using examples from my previous article on why HTML email is such as mess in Outlook Mail it should provide a fair and compelling comparison on the differences. In the same order as my previous article, I’ll post the side by side comparisons of Outlook Mail with its older rendering vs the new.

Example #1

Example #2

Example #3

Example #4

Example #5

Compare these results to the original Microsoft Edge comparisons and you get the idea of what’s improved. Lets face it, there is a lot of room for improvement still, but its a start!

I’ve got 99 device viewports but this is just plain wrong!

The next major problem that’s now happening in Outlook Mail is the viewport behaviour. Take a look at example #1. The Campaign Monitor email goes super wide and is completely misaligned. A basic but very critical area to get right and Outlook Mail has got it completely wrong. What appears to be happening to emails now is the default viewing state is to zoom into the email at 100%. The problem with this is because Outlook Mail still doesn’t scale down emails very well you are being zoomed into an email that has a width way beyond the available device width space. So what you actually get is the email zoomed in the top left corner with very little of the email content visible without pinch zooming outwards. This previously wasn’t happening as the default behaviour was to have the email zoomed out. Arguably something which should still be the default behaviour. Why Microsoft decided to change this knowing Outlook Mail would choke on it in most cases is crazy (answers on a postcode to my email address please!).

The viewport issue also creates a fair bit of horizontal scrolling and even on a very high destiny device such as the Lumia 950 XL with a 5.7″ screen. Your not going to fix a fixed width table into that viewport nicely.

Here’s my email rendering test template and how it looks by default:

Seeing only a small part of the top left corner by default is super useful. Not.

Why does this happen?

There are essentially two reasons why this behaviour occurs. Lack of CSS3 support and MSO conditional hacks having negative side effects.

Outlook Mail has 0% CSS3 support, this means email designs that override table widths from being fixed to fluid will not work. While this can be a pain, there are workarounds to this as we have been dealing with similar issues on the Gmail app for a while now.

The more complicated explanation can be attributed to the MSO conditional hack (demonstrated below) that is widely in use today. There are actually various methods of performing this hack and some involve combination of various hybrid and fluid methods together, this is just one example but the general concept is the same.

<!-- General wrapper, note no fixed width property -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
    <tr>
        <td align="center" valign="top">
        <!-- Outlook/Older IE specific wrapper, because of no max-width support -->
        <!--[if (gte mso 9)|(IE)]>
            <table border="0" cellpadding="0" cellspacing="0" width="600" style="width:600px;">
               <tr>
                    <td align="center" valign="top">
        <![endif]-->
        <!-- Email layout here -->
        <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
        <![endif]-->
        </td>
    </tr>
</table>

What this code does is essentially creates a special wrapper table for Outlook and older Internet Explorer clients because they don’t support max-width while providing a generic wrapper for most other clients. This was fine on Outlook on the desktop because you could set a fixed width value without worrying about the viewport too much. However for mobile devices this is really bad news as Windows 10 mobile devices are rendering the fixed width wrapper too, something which is a disaster for the viewport!

This conditional hack was developed when Outlook and the Microsoft Word engine existed on the desktop device side only. With the addition of Windows 10 mobile devices these all now render MSO conditional code too. Combine this with recent viewport changes to Outlook Mail and you have a really bad viewing experience. The only way to work around this issue at this point, is to use a fluid layout approach and avoiding using fixed pixel values on major layout areas entirely, a rather limiting factor to a lot of designs.

If you take away the fixed width table, things look a lot better:

The problem with that is the fixed width table is still needed for Outlook desktop clients, so its hard to find a balance for general compatibility across all Outlook platforms. Ideally what would be good if there was a way to conditionally detect Microsoft Word on mobile devices and add an is not clause to the fixed table wrapper. From looking at documentation, no such conditional exists sadly.

Alternatively if CSS3 support was possible you’d be able to use a class on the special Outlook/Old IE wrapper and override it in a media query, this would allow the table width to be overridden while keeping older Outlook clients happy.

Let’s keep pushing Microsoft for change

The positive notes to take from this is Microsoft do appear to be listening, while they’ve ignored email developers for a while now they appear to have finally conceded to user pressure. Something I noted in my previous article is things were so bad with Outlook Mail that general consumers were starting to complain and the negative feedback started rolling in, while general consumers might not understand why their emails were being rendered poorly they at least could see the real problems of the Microsoft Word engine without really knowing what was going on. I believe this has led to Microsoft bringing this update and wouldn’t of happened without the masses amount of feedback.

Windows 10 on the mobile side is in a bit of a crisis right now and they can’t afford to lose the small market share they have if their one Windows vision is to be successful.

A selection of user feedback items related to Outlook Mail over the past few weeks.

Both consumers and developers should continue to provide feedback to Microsoft and the Outlook team on email rendering to keep this momentum going, its encouraging that Microsoft have started to acknowledge this as a problem worth fixing.

A lot more room for improvement

This update brings certain improvements but overall Outlook Mail still misses the mark. There is a long way to go before Outlook Mail on Windows 10 has the same rendering capabilities as its iOS and Android counterparts. I’m confident that this will eventually happen, its just a case of how long Microsoft wants the negative feedback to continue or how important they consider fixing the disparity of rendering on rival platforms. For now I’ll still be retreating back to Microsoft Edge and using the view in browser links in emails. Hopefully one day I won’t have to do this!