---

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 Style	365	Hotmail	Comments
max-width
mso conditionals			An update may have made MSO conditionals work in both versions
text-decoration: none	Limited	Limited	This is supported in embedded CSS but not inline
<style> in head
<style> in body
classes
IDs
padding
margin	Limited	Limited	Margin 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
DIVs	Limited	Limited	Divs 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.