Blog, Office 365’s OWA and Your Email Campaigns, Office 365’s OWA and Your Email Campaigns

Ever since email arrived on the scene, Microsoft has been creating email clients for both business and home use, generally under the Outlook banner. And now that we have multiple email platforms - namely desktop, internet and mobile there are EVEN more variations. Which confuses everyone from the average user on the street to the people who are supposed to know all about the differences between email clients because it is their job!

But now it looks like Microsoft is finally realising just what a nightmare they have caused, especially for email designers and marketers who have to deal with the different levels of HTML and CSS support. Not only is the new Windows 10 platform designed to have universal apps that are identical on every platform (which is its own set of headaches!), but now they are combining their two web based email clients - and the Office 365 Outlook Web App (OWA).

What is started out life as Hotmail, which many of you will remember. And seeing as it was the very first free webmail service offered to consumers, you probably even had a Hotmail account which you could access from any browser. Then between 2012 and 2013, Microsoft decided to migrate all Hotmail users to and everyone was offered the choice to change their Microsoft ID from to

Many took advantage of this option, but quite a few hung onto their old Hotmail address - either out of sentimentality, or because they didn’t feel like updating all their subscriptions with their new email. Now presents two sets of challenges for email developers - firstly it has a whole range of rendering quirks of its own, but then there is the fact the browser used to access this client can affect how an email renders as well.

What is Office 365’s Outlook Web App?

Outlook Web App

For those who don’t actually know what Office 365 is, it is the Cloud based version of the Microsoft Office Suite and works with monthly or annual subscriptions rather than a once off purchase that is valid for as long as you have the install discs (or can remember your Product ID!). Because it is cloud based, users can access their documents and any programs they are subscribed to from any device with an internet connection.

So Outlook Web App is the email client that comes bundled with this subscription,however it can only be accessed by Office 365 Business subscribers and accounts that are hosted on a server running Microsoft Exchange 2013 or later. And just to add to the confusion, there is an earlier version of the app known as Outlook Web Access (for servers running earlier versions of Microsoft Exchange) which offers truly abysmal HTML and CSS support.

Two webmail services, soon to be one

Apparently wanting better alignment between their user interfaces and feature sets, Microsoft announced that they would be replacing the interface and infrastructure with an Office 365 based one. As with the Hotmail/ update, this update was initially rolled out to a relatively small group of users - but was made available to more through an opt-in program, and now it seems the new version of is out of Preview and the rollout is complete.

For now it seems that they will still be using the name, however the rendering engine and UI of their free webmail service will be upgraded to more closely match the HTML and CSS support offered by the Outlook Web Access (OWA) app that is part of the Office 365 cloud based suite of MS Office products. While this means email marketers have one less problematic email client to deal with, it does mean they’re going to have some changes to deal with.

How the inbox behaves

The UI looks like OWA’s

OWA Inbox view

Fortunately the UI of OWA and are pretty similar, so although the one is being replaced with the other it shouldn’t be too much trouble for users to adjust! The most important change for users is the fact that when they first login, they have to either physically select a message for anything to display or choose to “… always select the first item…” when they sign in.

The senders name is emphasized by being bolded and made larger, so make sure your sender name is one that subscribers know and trust - because it is the very first thing they will see! The from name is followed by the subject line, which has been made slightly darker but is the same size as the preview text. Both take up just one line each, with the subject line being limited to about 45 characters, while the preview text is limited to around 50 characters.

If you use symbols in your subject line or preview text then make sure you’ve previewed your email before actually sending it as OWA does not support all of them.

The Clutter feature has migrated too

OWA Clutter

When Microsoft rolled out a feature to increase productivity and help users keep track of important emails by automatically sending promotional and other non-important emails to the ‘Clutter’ folder, it caused serious heart palpitations for many email marketers as they were expecting a hefty drop in the performance of email marketing campaigns - especially on their B2B campaigns.

However the effect was not as harsh as they were expecting because it essentially mimicked what business email users were already doing - sorting their unimportant emails into a folder where they could deal with them at a more convenient time. And now this feature is also available in, although at the moment users have to specifically choose to activate it.

So if you want to avoid the Clutter folder on your B2C campaigns (which could end in a ‘Sweep to Trash’ because is normally for private users who would only check their mail when they have time), then make sure you’re sending emails your subscribers are interested in - and try segmented email lists so that you can target specific groups of subscribers!

Not ALL images are blocked!

Just like with Outlook for desktop and before it, images are blocked by default although users can add someone to their ‘Trusted Senders’ list and then always see all the content (links, images, etc) in emails from that person. For emails where content is blocked, users will have the option of either unblocking all the features of that specific email or else always showing content from that specific sender.

However, even when images are blocked the pre-processor that changes any images with the tag img src= to img blockedimgsrc= is skipping over background images in table cells. So if your image is in a <td> then it will display, whether your subscriber has you marked as a safe sender or has unblocked the content for your email or not! However this doesn’t mean you should stop using your _ALT_ text because there are many other clients who also block images by default.

And you can now add OWA to the list of email clients who support styled ALT text, so make sure you’ve got a proper balance between the text content and the imagery of your email so that subscribers get your message even when images are blocked. (Check out the Litmus blog to see just how creative you can get with )

The Unsubscribe and Action Items features

Action items

OWA now has an ‘Unsubscribe’ and ‘Action Item’ which displays near the top of an email. However these items don’t work like their Gmail equivalents! Instead when a user clicks Unsubscribe they will get a message saying that isn’t sure that it is safe to unsubscribe from a list using the information the sender provided and will offer to have any future emails from that sender placed in the Junk folder.

So instead of unsubscribing from your email list, any emails you send that subscriber in the future will get marked as spam - which will obviously affect the deliverability of all your emails. You obviously don’t want this happening, so rather make unsubscribing from your emails so easy that subscribers will use your ‘Unsubscribe’ option rather than OWA’s!

The Action Item feature is also not as in-depth as Gmail’s Quick Actions and instead simply looks for what it believes are CTA’s contained within the email. It also doesn’t allow you to act on that CTA with a simple click; rather it adds a ‘Follow Up’ link that creates a task for the user. This adds a flag to the message in the subscribers’ inbox, which will change to a check mark when they mark that task as complete.

The OWA rendering quirks you DON’T have to worry about anymore

  • While OWA used to strip all CSS from the head of your email, it now seems to be placing it in a style tag that appears before the body of your email template

  • Your ID and class references don’t seem to be getting stripped anymore, but they are now getting x_ placed in front of the name you used. Your CSS in the head is getting the same treatment, although it is also getting a selector

  • You can now use text-decoration:none on your anchors which means you don’t have to deal with those ugly underlines anymore, and you no longer have to use <span> to change a links color either!

  • OWA used to strip any inline styling used on everything with <a> and <img> tags, however it looks like the majority of inline styling on elements is not a problem anymore

  • Fortunately, you don’t have to use the align or defensive div approaches to get rid of gaps between your images

  • Whatever tags you’re using for the elements in your email template will be parsed directly, so you won’t be seeing HTML 4.01 tags such as <b>, <u>, <font> and <span> replacing HTML elements such as font-weight:bold, text-decoration: none, font-family and font-size anymore

  • You no longer have to deal with your text being ‘justified’ instead of aligned when you use text-align, and text-transform is now supported

  • Your line-heights will actually be respected, and they will render more consistently, plus you don’t have to deal with a minimum height of 20px being forced on all your table cells

  • You can use background images, and as we mentioned if they are in a table they seem to render even when images are blocked (well done Microsoft!)

  • Your animated GIFs will now work in OWA, however you still won’t be able to use HTML5 video

The rendering quirks you SHOULD be aware of

The CSS in your head is getting modified

It is nice to see that OWA is no longer stripping all CSS from the head of your email and is instead placing a style block at the beginning of your email template. All your CSS rules can be found in this style block however there are two changes being made:

  • he first is that rps_xxxx (where xxxx is a random four character sequence) is being added to the beginning of all your CSS rules

  • The second is that x_ is being added to any ID or class you’ve used to identify any element For example if your code originally looked like this:

outlook td { text-align: left; }

It might look like this after pre-processing:

<span style="color: #ff0000;">rps_95c6</span>#<span style="color: #ff0000;">x</span>outlook td { text-align: left; }

It seems that the CSS rules aimed at elements within your email template are respected when included in the head, and general selectors such as img, td and table work a lot more reliably than they used to. In other words, although a wrapper that you can’t modify is appearing in your email template - it doesn’t seem to be resulting in any changes (or harm!)

Our Final Word

Opening mail

While there is overall better support for CSS2 techniques, unfortunately there is still no support for CSS3 and HTML5 techniques in OWA. But if you’ve been reading the rest of the series about changes affecting email marketing then you’ll realise that this is par for the course (although not with the Android and iOS versions of the Outlook app)!

What this means in terms of your actual email templates is that media queries, along with any other CSS3 specific properties are going to get stripped. And if you’re using vendor prefixes such as -webkit, then you can expect those to disappear as well! But all in all, it seems that you no longer have to worry about the random nature of the CSS rendering in OWA as it seems to be a lot more consistent now!

Seeing as is a web based email client, it would be nice to see some support for HTML5 and CSS3 which is now standard across most of the internet. However the improvements made so far do give us hope for an email client that based in this century rather than the last - although we will just have to wait and see what the future brings!