• Home
  • /
  • Outlook.com, Office 365’s OWA and Your Email Campaigns

Outlook.com, 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 – Outlook.com and the Office 365 Outlook Web App (OWA).

What is Outlook.com?

Outlook.com 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 Outlook.com and everyone was offered the choice to change their Microsoft ID from username@hotmail.com to username@outlook.com.

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 Outlook.com 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 Outlook.com interface and infrastructure with an Office 365 based one. As with the Hotmail/Outlook.com 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 Outlook.com is out of Preview and the rollout is complete.

For now it seems that they will still be using the Outlook.com 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 Outlook.com 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 Outlook.com 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 Outlook.com, 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 Outlook.com 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 Outlook.com 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 Outlook.com 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:

  • The 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:

rps_95c6 #x_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 Outlook.com 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!

About admin Post

admin - Monday, 05 September 2016 2:19

Comments Post

6pm online coupon code -
Tuesday, 28 March 2017 5:58

I cling on to listening to the news bulletin talk about getting boundless online grant applications so I have been looking around for the most excellent site to get one. Could you tell me please, where could i acquire some?

workshop manuals -
Tuesday, 04 April 2017 6:38

This is very fascinating, You’re an overly skilled
blogger. I’ve joined your rss feed and stay up for in the hunt for extra of your wonderful post.
Additionally, I have shared your website in my social networks

Here is my web page workshop manuals

how can i buy gold bars -
Tuesday, 18 April 2017 1:44

Hey there! I’ve been following your weblog for a while
now and finally got the courage to go ahead and give you a shout out from
Austin Tx! Just wanted to mention keep up the good work!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>