Over the years, Microsoft has created many email programs—desktop, webmail, and mobile—for businesses and consumers alike. These programs—most of which were released under the Outlook name—have left many confused about differences between the apps, especially when it comes to support for HTML and CSS in email. However, Microsoft seems to be making strides in consolidating some of these clients with Office 365.
In July 2012, Microsoft announced that they would be migrating Hotmail users to Outlook.com in an effort to provide a more modern email experience. In order to further align their user interface and feature set, Microsoft has another big change coming: they’re replacing the interface and infrastructure of Outlook.com with Office 365. This will not only give Outlook.com’s inbox a facelift, but will likely affect the way your emails display for those subscribers.
Do your subscribers use Microsoft Office 365? Find out with Litmus Email Analytics.
 | Find out if your subscribers use Microsoft Office 365When it comes to email marketing, it’s all about your audience. Use Litmus Email Analytics to discover which email clients are most popular with your subscribers. Sign up free! |
What is Office 365, and how will it affect email rendering in Outlook.com?
Outlook web-based services
Microsoft offers two web-accessible versions of Outlook: Office 365/Outlook Web App and Outlook.com.
Office 365/Outlook Web App
Office 365 is a subscription-based, online version of Microsoft Office. Rather than buying a one-time license to perpetually run the software—like you would for the desktop version—you essentially rent monthly access via a subscription.
Included with Office 365 is access to various Microsoft Office services including Excel, PowerPoint, and email. The email client provided with Office 365 is Outlook Web App. Outlook Web App can only be used to access Office 365 for businesses and other accounts that are hosted on a server that’s running MIcrosoft Exchange 2013 or later.
To further confuse things, an earlier version of Outlook Web App (running on pre-2013 Microsoft Exchange Server) is called Outlook Web Access, which has gained a reputation as a lousy email client for its poor support for HTML and CSS.
Outlook.com (formerly Hotmail)
Hotmail was the first free webmail service offered to consumers. Between 2012-2013, Microsoft migrated Hotmail users to Outlook.com. Similar to Hotmail, Outlook.com is a free web-based email service that can be viewed in Internet Explorer, Chrome, Safari, or other popular browsers.
While Outlook.com has its own rendering quirks, the user’s browser of choice can also affect rendering in Outlook.com. For example, styled ALT text is supported when Outlook.com messages are viewed in current versions of Firefox, Chrome, and Safari, but not in Internet Explorer.
Aligning Outlook.com and Office 365
At the end of May 2015, Microsoft announced that they would be upgrading Outlook.com to a new Office 365-based infrastructure. While it was initially rolled out to a small group of customers, it will be made available through a broader audience through an opt-in program—and, likely, eventually everyone.
With these changes Microsoft will be replacing the technology and interface of Outlook.com with Office 365 / Outlook Web Access (which we’ll refer to as OWA from here on out). It appears as if the Outlook.com name will remain, but the technology ‘under the hood’ will be significantly updated to reflect a similar level of HTML and CSS support (and therefore rendering capabilities) that is currently behind Office 365.
In terms of UI changes, Outlook.com is moving towards the OWA interface that is used with Office 365. Seeing as the two already share a similar UI, the transition shouldn’t be problematic.
Outlook.com
Office 365
Email on Office 365/OWA
We’ve previously covered email rendering for Outlook.com—but how does email look in a future where an OWA-powered Office 365 has replaced Outlook.com?
While OWA has been known for rendering issues that rival those commonly found in Outlook 2007-2013, major improvements have been made. A comprehensive post by Community member James White explained changes made by the old OWA pre-processor. For example, inline styles were stripped and CSS in the <head> was not supported. While major updates have improved OWA’s rendering capabilities, it still has some quirks.
Rendering quirks in Office 365/OWA
Revisiting OWA after the Office 365-inspired updates, James White noted significant improvements in rendering basic HTML and CSS. However, there is still room for improvement for more advanced techniques. For example, while OWA now supports animated GIFs, it lacks support for HTML5 video backgrounds, or CSS3.
Be sure to provide proper fallbacks for advanced techniques if you’re seeing a large percentage of your audience opening on Office 365/OWA.
Inbox view
Outside of rendering improvements, there are a few changes to how OWA handles other aspects of the email experience. After logging into OWA, you must select an email to display or click the prompt to “…always select the first item when you sign in.”
The inbox view emphasizes the from name followed by the subject line, and then preview text. Be sure to use a from name your subscribers recognize, as this is not only the first information displayed, but the largest, too.
While the subject line and preview text are the same size, the subject line is a slightly darker shade than the preview text. The subject line also appears bold and blue when an email is unread, making it stand out even more. There are several subject line optimization strategies you can test—such as character counts, asking questions, and leveraging localization—to see how subscribers respond.
Both the subject line and preview text comprise one line of text in the inbox. The subject line is made up of approximately 45 characters, while the preview text is a bit longer at about 50 characters. With the preview text holding the most character real estate in the inbox, we recommend optimizing this text to increase email performance.
OWA will also support the display of some, but not all, symbols used in subject lines and preview text. Be sure to preview your email before sending to ensure that the symbol you’ve selected is supported!
Image blocking
Similar to Outlook.com and Hotmail, OWA has a few image blocking quirks.
Images are blocked by default except for trusted senders. When images are blocked, there are two options displayed at the top of the email:
- “To help protect your privacy, some content in this message has been blocked. To re-enable the blocked features, click here.”
- “To always show content from this sender, click here.”
When either option is selected, images display. If you choose to “always show content from this sender,” images will automatically display from that sender moving forward.
We also noted instances where some images were blocked, while others displayed in the same email.
After doing some digging, it looks like OWA’s preprocessor is changing any img src= to img blockedimagesrc=, causing an image to be blocked unless the subscriber chooses to download images. However, the preprocessor is skipping background images in table cells, so any image in a <td> will display regardless. In theory, even though OWA blocks images by default, if you set your images as background images in a <td> cell, then they will automatically display. Pretty crazy, eh?
As a result of OWA’s quirky image blocking (and the many other clients that block images by default!), it’s always a good idea to defensively design messages. Be sure to use ALT text (or styled ALT text, which is supported in OWA) and a proper balance of live text and imagery to ensure your message gets across even when images are off.
Unsubscribes + Action Items in the inbox
OWA offers features similar to Gmail’s Quick Actions and auto-unsubscribe, offering another opt-out mechanism and the ability to quickly act on CTAs within a message.
The “Unsubscribe” option displays near the top of the message for the majority of commercial/promotional emails. In all of the examples we tested, clicking on this button didn’t unsubscribe the user from a list (like Gmail’s auto-unsubscribe feature), but instead displayed a message stating, “It looks like this is a newsletter, but we aren’t sure if it is safe to unsubscribe from it using the information provided by the sender. If you don’t want to receive from this sender again, you can block it. All new messages from ‘xxx@example.com’ will be moved to your Junk Email folder.”
Rather than unsubscribing the user, OWA blocks the sender and marks subsequent emails as spam. This is bad news for senders—frequent blocks from free providers can have long-term effects on delivery rates.
To avoid this type of blocking, be sure to make it easy to unsubscribe from your emails. While it can be frightening to encourage users to unsubscribe, a smaller, more engaged list will lead to better deliverability in the long term.
“Action Items” may also display alongside the “Unsubscribe” option in emails containing specific types of content. While not as advanced (or fun!) as Gmail’s Quick Actions—where you can view flight itineraries, restaurant reservations, and the like—Action Items uncover calls-to-action (CTAs) in the email, like a whitelisting/add to address book request.
In this example, the CTA is located at the bottom of the email, but is pulled to the top of the email. While this “Action Item” doesn’t allow the subscriber to add the sender address to their address book with a single click, it does enable them to create a task. When subscribers click on the “Follow up” text, a task is created.
A flag will appear in the inbox until the subscriber marks the task as complete. Once completed, a check mark replaces the flag.
Optimize email for Office 365 / OWA
As Outlook.com users continue to be upgraded to an Office 365-based infrastructure, more of your subscribers will viewing your emails in a OWA-like environment. With that in mind, it’s crucial to prepare for upcoming changes to Outlook.com and understand how your audience may be affected. Use Litmus Email Analyticsl to discover who opens your emails on OWA and test your emails in over 50 desktop, webmail, and mobile programs—including Office 365 / OWA.
Lauren Smith is the VP of Acquisition and Lifecycle Marketing at Litmus.
