An email developer’s first look at the Outlook Mail app in Windows 10
Windows 10 is the upcoming version of Microsoft’s Windows operating system and there are some big changes coming One area which caught my attention was the mention of the Outlook email client. While its not unusual for Microsoft to talk about their own software, the changes to how Outlook and the whole Office suite will be on Windows 10 is certainly a shift from the current package. Windows 10 will feature a new Outlook app that will be the default email client in Windows 10, replacing the current Mail and Calendar apps in Windows 8/8.1. Not only that but its also a universal app and will be on phones and tablet devices as well.
Universal Office apps
Microsoft have decided to develop fully touch optimised Office apps along side the desktop counterparts that will be part of the Office 2016 suite. The universal Office apps will be pre-installed on all Windows 10 devices. This represents a change from any previous version of the Office suite, particularly noting that the Outlook email client was only available for desktop clients or in Windows Phone 7/8 (though its really its own version under the name Outlook Mobile). Now however the universal Outlook email app will be the default mail client across all Windows 10 devices going forward. We could very well see Outlook regaining some email client market share due to this change.
My Testing Environment
Everything documented in this write up was done with following:
- Windows 10 for Phones Build 10051
- Windows 10 for Desktop Build 10061
- Lumia 635 as my test device for the mobile build
- Parallels 10 Virtual Machine for the desktop build
- IMAP Mailbox
- Exchange Mailbox
- Rendering test email template – Find it on Github
The universal Outlook Mail app on Windows 10 for Phones
The first obvious change is the interface, the entire UI/UX has had a make over and it looks more like its iOS and Android counterparts. A welcoming change that looks part of the overall Windows 10 design model. Generally the UX is a lot more modern looking and a bit more functional than Outlook Mobile on Windows Phone 7/8. At this time however the UI doesn’t feel polished, which is to be expected. I’m sure the interface will evolve over the coming preview builds.
Though from an email developer point of view that’s not my main priority here, what I want to know is what’s under the hood and how emails look when rendered with the Outlook Mail app. Using my specially crafted email rendering test template, I can provide some initial details in a summary.
HTML/CSS support in the Outlook Mail app on Windows 10
- Microsoft Word Engine is confirmed as the rendering engine for POP3/IMAP mailboxes
- Exchange/Office 365 accounts do not use the Word Engine in the Outlook Mail app
- HTML support level appears to be around the HTML 4.0.1 spec
- CSS support level appears to be around the CSS 2.1 spec, though not complete
- Supports VML (Vector Markup Language)
- Outlook Mail app can be targeted by MSO conditional comments (but with caveats)
- Supports CSS in the <head> (When using POP3/IMAP)
- Supports CSS @import (When using POP3/IMAP)
- Supports external stylesheets (When using POP3/IMAP)
- No CSS attribute selector support
- No CSS3 Support (Ouch, no media queries)
- Responsive design? Forget it
A lot of these points are very much the same as its current desktop app counterpart.
Word up, Microsoft
The first point was all but confirmed when Microsoft mentioned the “great” authoring experience that Word will bring to Outlook back in January 2015. Yes we’ve all heard that before and it doesn’t fly with email developers. Yes you might very well have the ability to compose rich email content with Microsoft Word, but doesn’t mean it has adequate HTML/CSS support for the modern web and rendering of email campaigns in today’s world, those are two very different things! The relationship between email developers and the desktop versions, particularly Outlook 2007 – 2013 has proven this many times over.
Because the rendering engine is Microsoft Word, the Outlook Mail app does respond to MSO conditional comments like any other version of Outlook on a Windows platform, in this case these MSO conditionals all respond true as well as other well known variations you can think of.
<!--[if mso]> Microsoft Office/Word Engine. Oh joy. <![endif]--> <!--[if gte mso 15]> I'm Outlook 2013 or Outlook 2016/Outlook Mail app <![endif]--> <!--[if gt mso 15]> I'm newer than Outlook 2013! <![endif]--> <!--[if mso 16]> Outlook 2016/Outlook Mail app <![endif]-->
I’m calling it the 2016 version, Microsoft are calling the upcoming Office suite 2016 but I actually have no idea what Microsoft are classing the engine version as, seems the version string in the Windows 10 for Phones preview build 10051 is actually 17.3925.42002.0, which strangely doesn’t match the conditional comment numbering in use. The version numbering used in the latest Office 2016 preview (February build) is 16.0.3823.1010 which makes more sense here and matches.
We do have some potential detection abilities available like the desktop versions. However due to the whole one Windows vision, and sharing the same Microsoft Word core, both the Universal Outlook app and Outlook 2016 app (desktop) both will respond true to the above, therefore its hard to target an Outlook version based on the device its running on as there appears to be no distinction between them, you kind of expect this for a Universal app, but this will make life harder for email developers.
Anatomy of an Outlook email message in Windows 10
Most email developers know about the Microsoft Office/Word schemas that need be on the root HTML tag in order to use certain languages like VML. Looks like the universal Outlook app has support for others as well, as the following was spotted on a composed email sent from the Outlook Mail app.
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
We have in addition to the Microsoft Office/Word ones, Office Open XML and yes HTML 4.0.1. Oh boy, this is turning out to be a fun discovery mission. Looks like the rendering standards of the Universal Outlook app are limited to that HTML specification then. Great.
This was also found lurking in the head:
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
The Windows 8/8.1 mail app also added a similar value to email content, it doesn’t really have much meaning to the email itself, just provides more technical information about the rendering engine.
A more complete look at an email crafted in the Outlook Mail app, spoiler alert, lots of MS word crap.
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
p
{mso-style-priority:99;
margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
.MsoChpDefault
{mso-style-type:export-only;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
{page:WordSection1;}
-->
</style>
</head>
<body lang=EN-GB>
<div class=WordSection1>
<p><o:p> </o:p></p>
<p style='margin-bottom:12.0pt'><o:p> </o:p></p>
<p>Sent from Outlook Mail for Windows 10<span style='display:none'><o:p></o:p></span></p>
<p class=MsoNormal><o:p> </o:p></p>
</div>
</body>
</html>
MSO conditional hacks and compatibility issues
Two popular design methods of choice for emails are fixed width or using max-width, problem is Outlook doesn’t care for max-width, so without forcing a width to stop your email going super wide, it tends to look a bit naff. With fixed width the idea is you’ll use media queries to sort out sizing for mobile devices. This method does have issues with clients that don’t have CSS3 support, so instead you might opt for a hybrid method, similar to the one below to set a fixed width for desktop clients but let everything else use max-width, as even troublesome clients like the Gmail app support it.
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="left" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellpadding="0" cellspacing="0" width="600" style="width:600px;">
<tr>
<td align="left" valign="top">
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Outlook clients will use both tables, while non Outlook clients will just use the first table as most support max-width. This did work great for Outlook because it was exclusive to desktop clients, but now because Windows 10 on phones now also uses Microsoft Word, it to will use the fixed width table also and render the email at 600px, something which you don’t want to happen on a mobile device!
This means current MSO conditional hacks will likely causes compatibilities issues in Windows 10, because they were originally designed to be used on Outlook desktop clients only! This is now no longer the case.
Likewise any fixed pixel width design will also suffer the same issue, but to further complicate the issue, the viewport appearance makes it even worse.
Watch the viewport on mobile devices
This is further problematic when you see how the viewport view is in the Outlook Mail app on Windows 10 for phones. Why is this such a problem? Well because this is how the viewport behaviour is:
In this case on the Lumia 635 the max viewport width in portrait mode is 480px, a common and well known screen size for a mobile device, but the viewport behaviour here is to actually to have the email zoomed in like the example above, horizontal scrolling is possible, but I can’t pinch zoom that email out at all so I’m getting a really horrible zoomed in email view. This is really an issue, and breaks compatibility with a lot of email campaigns as of now. The only initial solution I can see is a fluid type layout without using any fixed width values at all (percentage based) or if the width of the email is set to a mobile friendly size to begin with. This however limits a lot of current email development methodologies.
Landscape view is a little better but still a lot of wider emails will be cut off. Here’s a couple of examples:
The viewport meta tag has no effect on the email whether its part of the email or not.
X-UA-Compatible won’t save you now
Similar to the viewport meta tag, because the rendering engine is now no longer Internet Explorer (IE Mobile) like Windows Phone 7 and 8, the magic that this meta tag brought is now no longer effective on Windows 10, seems this is only applicable to IE based clients.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
R.I.P – You were the saviour of email on Windows Phone 8
The universal Outlook Mail app on Windows 10 for Desktops
When I originally wrote this article, the Outlook Mail app wasn’t included in any of the public desktop preview builds. On April 22nd, Microsoft released build 10061 for desktops which included the Outlook Mail app, so I was able to test out everything I did on the phone in the desktop environment.
While mobile devices are the future, Outlook on the desktop is still very much alive. In a nutshell, everything mentioned above is exactly the same on the desktop client, this is to be expected as it is after all a universal app. The same rendering engine (Microsoft Word) is also at the heart of Outlook Mail on the desktop. Not really a surprise I guess. Because of this the HTML/CSS rendering capabilities are also exactly the same.
The exception however is the viewport issue. On the desktop the email pane obviously has a larger viewport area to play with, but considering smaller tablet devices will also be including Outlook Mail, you’ll still want to keep your emails fairly tight.
One interesting point to note is the Outlook Mail on the desktop has a responsive UI which Microsoft calls adaptive UX. Meaning based on window size, the Outlook Mail app actually adapts in the same way a responsive email or website would. What’s frustrating is that behaviour doesn’t translate over to the email window pane! Something that would be really cool if it could be implemented!
Exchange/Office 365 accounts
If you use an Office 365 or Exchange Account within the Outlook app, the rendering engine changes, the client will no longer render email with the Microsoft Word engine. I was half expecting this to the the case as this was the same behaviour on Windows Phone 7/8. Instead, you get the rendering standards of the Exchange ActiveSync (EAS) procotol. There unfortunately isn’t a lot of information documented about the HTML/CSS support level with the EAS protocol, other than what email rendering tests produce. It supports basic HTML to a similar level of the Word engine but has even less CSS support than Microsoft Word. The following CSS support areas differ to the Word engine:
- No CSS in head support
- No @import support
- No external stylesheet support
- VML will not work
Summing up my thoughts on the Outlook Mail app
Based on everything so far, the email experience is certainly is a step backwards on mobile while the desktop remains pretty much the same as its predecessors as well as the upcoming Outlook 2016. Because the Outlook Mail app is not responsive and doesn’t have any CSS3 support, this really does hurt the mobile space more and is a step backwards from Windows Phone 8/IE Mobile.
With that in mind it is also important to keep an open mind about this one too. Don’t forget these are still preview builds of Windows 10. A lot of areas are still likely to change. I would like to think this also concerns the Outlook Mail app so we hopefully aren’t seeing the final product in terms of rendering capabilities, but instead a rough and unfinished version that Windows Insiders get to see develop.
I will however be sure to make me voice known via the Windows Feedback program for Windows 10 regarding the Outlook Mail app. I don’t think Microsoft can really pass the Outlook Mail app off as being acceptable as it is right now in today’s modern web world. I urge other email developers that happen be running the preview to do the same, otherwise I can see a revival of the “Fix Outlook” campaign coming back.
More to come
Admittedly, this write up was a fast publish situation. I wanted to get my hands of the Outlook app in Windows 10 and gain some initial insight as I’d been waiting a good few months! I’m sure there will be so much more to find out and discover as the Outlook Mail app evolves in Windows 10. Hopefully you’ve found my initial findings useful and a peek as what’s to come for the future.
If you have any questions about the Outlook Mail app on Windows let me know in the comments or get in touch!
Loading ...