{"id":6398,"date":"2015-06-17T00:00:00","date_gmt":"2015-06-17T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/rendering-css-support-more-in-office-365s-outlook-web-app\/"},"modified":"2023-07-13T13:24:34","modified_gmt":"2023-07-13T17:24:34","slug":"rendering-css-support-more-in-office-365s-outlook-web-app","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/rendering-css-support-more-in-office-365s-outlook-web-app","title":{"rendered":"Rendering, CSS Support & More in Office 365\u2019s Outlook Web App"},"content":{"rendered":"
Update: On February 17, 2016, Microsoft announced that they have finished the rollout and the infrastructure and interface of Outlook.com has officially been replaced with Office 365<\/a>.<\/div>\n

Over the years, Microsoft has created many email programs\u2014desktop, webmail, and mobile\u2014for businesses and consumers alike. These programs\u2014most of which were released under the Outlook name\u2014have left many confused about differences between the apps<\/a>, 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.<\/p>\n

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\u2019re replacing the interface and infrastructure of Outlook.com with Office 365. This will not only give Outlook.com\u2019s inbox a facelift, but will likely affect the way your emails display for those subscribers.<\/p>\n

Do your subscribers use Microsoft Office 365? Find out with Litmus Email Analytics.<\/p>\n

\n\n\n\n
<\/td>\n\n

Find out if your subscribers use Microsoft Office 365<\/h2>\n

When it comes to email marketing, it\u2019s all about your audience. Use Litmus Email Analytics<\/a> to discover which email clients are most popular with your subscribers. Sign up free!<\/p>\n

Discover your audience \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

What is Office 365, and how will it affect email rendering<\/a> in Outlook.com?<\/p>\n

Outlook web-based services<\/h2>\n

Microsoft offers two web-accessible versions of Outlook: Office 365\/Outlook Web App and Outlook.com.<\/p>\n

Office 365\/Outlook Web App<\/h3>\n

Office 365<\/a> is a subscription-based, online version of Microsoft Office. Rather than buying a one-time license to perpetually run the software\u2014like you would for the desktop version\u2014you essentially rent monthly access via a subscription.<\/p>\n

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<\/strong>. Outlook Web App can only be used to access Office 365 for businesses and other accounts that are hosted on a server that\u2019s running MIcrosoft Exchange 2013 or later.<\/p>\n

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.<\/p>\n

Outlook.com (formerly Hotmail)<\/h3>\n

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.<\/p>\n

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<\/a> is supported when Outlook.com messages are viewed in current versions of Firefox, Chrome, and Safari, but not in Internet Explorer.<\/p>\n

Aligning Outlook.com and Office 365<\/h2>\n

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\u2014and, likely, eventually everyone.<\/p>\n

With these changes Microsoft will be replacing the technology and interface of Outlook.com with Office 365 \/ Outlook Web Access (which we\u2019ll refer to as OWA from here on out). It appears as if the Outlook.com name will remain, but the technology \u2018under the hood\u2019 will be significantly updated to reflect a similar level of HTML and CSS support (and therefore rendering capabilities) that is currently behind Office 365.<\/p>\n

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\u2019t be problematic.<\/p>\n

\"1-Outlook-com\"<\/figure>\n

Outlook.com<\/p>\n

\"1-Office-365\"<\/figure>\n

Office 365<\/p>\n

Email on Office 365\/OWA<\/h2>\n

We\u2019ve previously covered<\/a> email rendering for Outlook.com\u2014but how does email look in a future where an OWA-powered Office 365 has replaced Outlook.com?<\/p>\n

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\u2019s rendering capabilities, it still has some quirks.<\/p>\n

Rendering quirks in Office 365\/OWA<\/h3>\n

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<\/a>, it lacks support for HTML5<\/a> video backgrounds, or CSS3<\/a>.<\/p>\n

Be sure to provide proper fallbacks for advanced techniques if you\u2019re seeing a large percentage of your audience opening on Office 365\/OWA.<\/p>\n

Inbox view<\/h3>\n

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 \u201c…always select the first item when you sign in.\u201d<\/p>\n

\"2<\/figure>\n

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.<\/p>\n

\"3<\/figure>\n

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<\/a> you can test\u2014such as character counts, asking questions, and leveraging localization\u2014to see how subscribers respond.<\/p>\n

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<\/a> 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.<\/p>\n

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<\/a> before sending to ensure that the symbol you\u2019ve selected is supported!<\/p>\n

\"4<\/figure>\n

Image blocking<\/h3>\n

Similar to Outlook.com and Hotmail, OWA has a few image blocking<\/a> quirks.<\/p>\n

\"5<\/figure>\n

Images are blocked by default except for trusted senders. When images are blocked, there are two options displayed at the top of the email:<\/p>\n