Click to Sign Up for a 7 Day Free Trial!

Email Development

Coding for Windows 10 Mail App

Email On Acid

The Windows 10 Outlook Mail app is set to become one of the most used email clients on desktop. This app comes free with Windows 10, a new OS which Microsoft has been pushing Windows 7 and 8 users to upgrade to. As time goes on and more people buy Windows 10, we'll see more and more opens happening on this app.

I'll be offering a high-level overview of the challenges this email client offers. For in-depth coverage of the quirks of this email client, make sure to check out James White's excellent blogs on the Mail app: first look, HTML email deep dive and his update on recent changes.

What's in a name?

This app is called "Mail" on Windows 10 desktops, and Microsoft often refers to it as "Mail and Calendar for Windows 10." In other places, it's referred to as "Outlook Mail for Windows 10." It has an envelope icon on Windows 10 desktop, but has a different icon for its listing in the app store.


I'll use the name Outlook Mail app from here on out.

What rendering engine does it use?

As James covered in his post, this app used two different rendering engines! Microsoft Word was the rendering engine for POP3/IMAP mailboxes (much like Outlook 2016, 2013, etc.), but Exchange/Office 365 accounts didn't use the Word rendering engine.

As I began testing, I found that things have changed. After a recent Windows update, it seems that all account types are now using the Word rendering engine.

Word supports conditional CSS, and for the Outlook Mail app, that means you can target it with:

<!--[if mso 16]>
Outlook 2016/Outlook Mail app
<![endif]-->

Of course, your standard <!--[if (gte mso 9)|(IE)]> declarations will also work, because MSO version 16 is greater than 9. For more on Outlook conditionals, read MailChimp's handy article.

The mobile dilemma

While it's great for desktop users that the Outlook Mail app supports MSO conditionals for all account types now, it's not so great for mobile users. Anybody using this app on a Windows Phone will find that the MSO conditionals still work perfectly there -- forcing their emails to display as they would on a desktop, but with only a tiny mobile screen to view it.

This is because most MSO conditionals have been used to hard-code widths for desktop only. Inside of this conditional code a hard width is set for the container, often at something close to 600px. On a desktop that works out great, but on a mobile screen it's way too much. There's not much that can be done about it at the moment, as Outlook doesn't support media queries and there's no other way to differentiate the mobile app from the desktop app.

HTML Support

In general, Mail's support for HTML is pretty similar to Outlook 2016, or even Outlook 2013. This is probably because it's still using the Word rendering engine.

Max-width

For fluid templates, this style is a must have. It's not supported in the Outlook Mail app, which means that all 100% width containers will blow out. As with Outlook 2016, 2013, 2010 and so on, this can be fixed with MSO conditional code.

Margins

Margins may not always work as expected. For example, margins on images have no effect on the layout of the email. Margins on paragraphs and tables should work properly. As always, test to be sure that the email renders as expected.

Animated GIFs

As with previous versions of Outlook for Windows, animated GIFs are not supported, and only the first frame is shown.

Backgrounds

Here is one place where support is worse than it used to be. Backgrounds using inline or embedded styles, HTML attributes or even VML do not render in Outlook Mail app. In fact, VML causes the email to show a broken image box with a red X in the upper left corner. This is pretty disappointing, as VML was only adopted by email devs to get backgrounds to show in Outlook.

Background colors are supported.

Border-radius

This commonly used CSS style still isn't supported in Outlook Mail app. You'll have to have square buttons for now.

Fonts

Standard fonts can be used with Outlook Mail app, but custom fonts using @font-face won't be supported. This client will also give you the annoying Times New Roman bug, but don't worry, any of the 4 fixes detailed in our recent blog will prevent it from doing this.

DIVs

As usual, divs have spotty support in Outlook Mail app. They still can contain text and provide a few useful functions, but they can't be given a defined height or width, or changed display: inline-block.

Floats

These are right out. Stick to tables with align="left" instead.


Support chart

Check out our handy chart for what's supported and what's not when it comes to common HTML and styles.

Windows Mail app support

Element or Style365HotmailComments
max-width


mso conditionals

An update may have made MSO conditionals work in both versions
text-decoration: noneLimited
Limited
This is supported in embedded CSS but not inline
<style> in head


<style> in body


classes


IDs


padding


marginLimitedLimitedMargin appears to work but doesn't always create spacing
<ol>


<ul>


border-radius


border


line-height


font-family

Has the Times New Roman bug that Outlook desktop shows
font-size


Animated GIFs

First frame only
<h1>-<h6>


<p>


CSS inline background


HTML attribute background


VML Background


DIVsLimitedLimitedDivs are block level, cannot be inline block or have borders or defined size
background-color


@font-face


font-decoration


IMG

Image size can only be determined with the width/height attributes

Found any interesting quirks?

Feel free to comment on the blog and I'll check them out! Or head over to our forum if you have a question that requires code samples or a lot of detail.

About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

I noticed a 1px space on the left of images in my tests. Any idea how to fix that?
Marjolein
Same here, 1px spacing issue between images and none of the usual fixes work for it.
I've tried block, border, line height, font size, border-collapse, etc... no luck!

Any ideas would be greatly appreciated! smile
Gordon
Am I right that EOA doesn't offer testing for this scenario? I need to test Windows 10 Outlook Mail app on Lumia phone.
Big River
No testing service supports the OApp and you shouldn't either. It's a tiny percentage of the market and it needs to die out, it's way too buggy and doesn't even come close to any of the popular apps I'm terms of development and display.

Sack it off!! smile
Gordon
Someone figured out a way to make background images work! https://litmus.com/community/discussions/6229-windows-10-mail-vml-background-solution
Marjolein

Leave a Comment