Last week we saw the release of Microsoft’s new Outlook app.

Of course, the release of a new email client gets everyone in the display block office a bit apprehensive, especially given Microsofts poor track record with HTML rendering across it’s email clients. Over the years, various versions of Microsoft Outlook have gained infamy in the Email Marketing world for not supporting a lot of basic functions and causing us to don our email hacking hats.

As soon as I could, I got beneath the hood of this new app to see how it would render our lovingly crafted emails.

If the new Outlook app looks kind of familiar to you, that’s because it probably is; it’s a rebranded version of the email app formerly known as Acompli which Microsoft acquired at the end of 2014. Although the slick interface and focus inbox are no doubt big parts of this Outlook app, what I’m more interested in is what it’ll do to our emails.

The big question

The big question on everyone’s mind is a pretty simple one, does it support mobile responsiveness?

The simple answer is yes! The app does support the commonly used way of doing mobile responsive emails; Media queries. You will be able to flip, stack, twist and change using media queries to your heart’s content.

This is obviously a huge plus for this app, we all know the world is relying more and more on their mobile phones for all things digital.

Putting it through it’s paces

I decided to see how well it not only rendered responsive email, but a lot of the different tricks and “hacks” we use to make truly unique, beautiful emails. Here’s what I found.

Heading Tags

Heading tags are well supported, which is more than can be said for Outlook’s online client which doesn’t support them. You can see in the image below that anything under <h3> starts to go a bit off with the line heights but that is easily remedied with some inline CSS. Although you’ll often see people not writing in semantic HTML for email, it is still something to consider if the support is there for accessibility reasons.

CSS in the head

This app does not strip the CSS from the head, which makes lots of our “hacks” work. Good news on this one! This is one of the big downfalls of many of the competitor apps on the market so they definitely score big points for not stripping it out.

Paragraph text

You can wrap paragraph text in <p> <div> or <span> tags without any major issue at all. It is worth noting that it will force a line break after each closing </div> tag, meaning you can’t nest them inside sentences.

Blockquotes

It does support the HTML <blockquote> tag and will slightly indent the quote. To do extra to this, you could use inline CSS to perhaps add a background colour to the quote to accentuate it even more. Although we don’t often see blockquotes used in emails, it definitely scores brownie points for supporting them.

Lists

As you’d expect, it handles both ordered and unordered lists, including nesting, very well.

Font Styles

It supports the basic <strong> and <em> tags as well as <s> for strikethroughs and both <sub> and <sup> for subscriptr and superscript respectively.

Text Shadows

Text Shadows render very well, allowing us to do more cool stuff with text and enhance it for mobile users.

Border Radius

It also supports the handy border radius, which we like to use to add curves to elements such as CTA’s (Call To Action) in our emails.

Web Fonts

It does support web fonts, which is an upgrade on its desktop cousin Outlook.com. I tried two different fonts using the @import method from Google fonts and they both worked. This is another big plus for the Outlook app as we’re seeing more and more emails being enhanced by the use of web fonts.

Spacing

I tried forcing spacing in three different ways; using Cellpadding, CSS padding, and CSS margins and it supported all three methods perfectly. I personally prefer to use cellpadding as my favoured way of forcing spacing in emails, but knowing that all three of these work is good too. The advantage of this is that all methods of laying out email are possible in this app.

CSS Animations

This is one I really hoped would be supported. I tested a large amount of different CSS3 animations and had mixed results.

Interestingly, the animations themselves using CSS such as transforms, rotates and opacity worked fine but hhen I applied those animations to different elements the results were mixed.

When animating images it worked flawlessly so no complaints there. It was when I was animating text that things came unstuck. When applying the animation to either a <span> or <a> tag, the animation will not work on the Outlook app. It does work when applied to a <div>, however, as I mentioned above a div will force a line break after the closing div tag. This means, for example, we can’t nest that animated text within a sentence. I will continue to experiment with different ways to get text to animate on, as it’s something I’d really love to see supported.

One final thing to note with the CSS animations is that they will pause when a user is scrolling through the email. This means that small, subtle animations may be missed by skim readers.

Image formats

Another basic test, but some email clients have been known to cause trouble when trying to using PNG images. More good news on this front as JPG, GIF, PNG with and without transparency, and animated GIFs were all supported. As with CSS animations,  scrolling through an email will pause the animation of the GIF.

Hover effects

Obviously you can’t register a user’s hover on a Smartphone (imagine…) but by using the :hover it actually will do your effect on tap instead, which is pretty cool. We can use this functionality in clever ways, such as hiding a background image behind a regular image and on :hover (or tap, for the mobile) revealing the background image behind it, thereby adding extra interactivity to your emails.

Background images

Background images are another big sticking point with some email clients, with Microsoft email clients being particularly bad at rendering them. However, there’s more good news here as the Outlook app supports them too. No need for pesky VML to force background images here.

Round up

Here is a table rounding up all the support for the stuff we tested. It’s worth noting that this was all tested on the iOS version of the app. We’re currently working on getting a similar table up for the Android version, but I highly doubt it will look much different to the below.

*They work on tap instead of on hover.
**They don’t work on <span> or <a> tags.

Other things to note

Mark Robbins found out a few bits about what the Outlook app supports too. He keenly noticed that it will show your <title> tag before your preheader text in the inbox. He also noted that it strips form elements and it shows img linked SVG images but not inline <svg> tags.

If you wish to join the Litmus conversation about the new app on both iOS and Android, you can do so here but you will require a Litmus account (don’t worry, using Litmus community is free!)

The app as a whole

I have to say I’m very impressed with the Outlook app on the whole. Support of the various elements I tested was very impressive.

On top of that I love the app as a whole. It has actually become my primary email app on my iPhone now. I absolutely adore the sleek, flat design and using it is an absolute pleasure. The focus inbox does a fantastic job at pulling out my conversations from the noise of all the other emails I get. If anyone is considering checking it out, I’d definitely recommend it.

If you have any email elements you’d like us to test in this new Outlook app just leave a comment below and we’ll add it to our support list above.