A Guide to Rendering Differences in Microsoft Outlook Clients10
Microsoft has a long and complicated history with the email world. From founding the first free webmail service to building several variations of desktop mail programs, the tech giant’s influence on both business and consumer email messaging is vast. Over the years, Microsoft has expanded the “Outlook” brand to encompass nearly every email project it touches, leaving email industry pros puzzling over seemingly dozens of products using similar naming conventions—not to mention their associated rendering and support quirks.
Consistent use of the “Outlook” brand name has given Microsoft a ton of exposure (of both the positive and not-so-positive variety); conversely, it’s also caused a lot of confusion. Outlook 2003, Outlook 2007, Outlook 2010, Outlook for Mac and Outlook.com are just a handful of the Outlook products available to businesses and consumers. Oddly enough, all of these “Outlooks” do not render the same (that would be too easy!).
DIFFERENT OUTLOOKS FOR DIFFERENT PLATFORMS
There are different versions of Outlook available for viewing in desktop, webmail and mobile environments.
Outlook for Desktop
These paid versions of Outlook are typically provided at corporations, schools and small businesses, and are installed as a standalone program that run on desktop and laptop computers.
- Outlook 2000
- Outlook 2002/XP
- Outlook 2003
- Outlook 2007
- Outlook 2010
- Outlook 2011*
- Outlook 2013
*Microsoft bundled an email program called Entourage with the Office suites released for Mac in 2001 and 2008. Entourage has since been replaced by “Outlook for Mac” as part of the Office 2011 release.
Outlook on the Web
There are also several ways to access versions of Outlook via a web browser:
- Outlook.com (formerly Hotmail)—can be viewed in various web browsers (IE/Chrome/Firefox/Safari), which can affect rendering.
- Office 365—a subscription-based online version of the Microsoft Office software, which includes access to various Microsoft Office services, including email.
- Outlook Web App (OWA)—provides Microsoft Exchange 5.0+ users with access to their mailbox from any computer with Internet connection.
Outlook on Mobile Devices
Variations of Outlook can be accessed on mobile devices in several ways. Whether it’s accessing an Outlook webmail site via a phone’s browser, or a specific Outlook app, there is a large offering of ways to access Outlook on one’s smartphone or tablet.
- Outlook.com (in mobile phone browsers—Android, iPhone, BlackBerry, Windows Phone)
- Apps for Outlook (Outlook Web Mobile, Outlook.com app for Android, OWA for iPhone)
EMAIL RENDERING IN OUTLOOK 2000–2003
Outlook 2000-2003 uses Internet Explorer (IE) as a rendering engine—specifically, the version of IE that is installed on that particular operating system. Litmus runs IE 6 on our Outlook 2000 testing machines and IE 7 on Outlook 2002 and 2003. Because of this dependence on IE (and it’s underlying Trident layout engine), there are variations of how an email may render.
Considering that consistent HTML/CSS support in early versions of IE were a mixed bag, these early versions of Outlook have relatively minor quirks:
Since images are automatically blocked in early versions of Outlook, the inclusion of ALT text is a must. However, while these versions of Outlook support ALT text, Outlook prepends a security message to the beginning of the text, effectively obscuring most meaningful ALT text:
However, since these versions of Outlook display images for trusted senders, if your subscribers add your email address to their address book, images will be displayed automatically.
HTML forms are often used for search boxes and surveys. While forms are displayed in these versions of Outlook, they are not functional. As a result, it’s probably best to link to a form or survey on a website, rather than embedding it in the actual email.
While the video won’t play, HTML5 video is supported in these clients. Rather than playing, the “fallback” content is displayed.
Symbols in Subject Lines
Unfortunately, these early versions of Outlook do not support symbols, instead displaying a “box” (☐) character or question mark instead. If you’re seeing a lot of your subscribers opening your emails on these early versions of Outlook, using symbols in your subject lines may not be a good idea!
Symbols in subject line for Outlook 2000-2003
Symbols in subject line for Outlook 2011
EMAIL RENDERING IN OUTLOOK 2007/2010/2013
Outlook 2007, 2010 and 2013 use Microsoft Word (versions 2007, 2010 and 2013, respectively) to render emails. Yes, a word processor is used to render emails in newer versions of Outlook! Outlook’s usage of Word as a rendering engine resulted in a disappointing setback to CSS support for emails viewed in Word, along with a ton of frustrating quirks, leading to some backlash in the email design community. In fact, there is even a website dedicated to their cause—http://fixoutlook.org/.
Despite the email community’s efforts to fix Outlook, support (or lack thereof) for HTML and CSS in these versions of Outlook have remained virtually unchanged since Outlook 2007 was first released:
- No support for background images in divs and table cells
- No support for CSS float or position
- No support for text shadow
- Poor support for padding and margin
- Poor support for CSS width and height
- Problems with nested elements background colors
Let’s take a look at support in these clients:
Similarly to early versions of Outlook, these later versions also support ALT text, but include a security message.
In these versions of Outlook, the text in forms are displayed, but the interactive elements—checkboxes, radio buttons and form fields—are not. As Campaign Monitor explains, they “custom render the form. Inputs are replaced with brackets and the submit button is replaced with the button’s value enveloped in brackets. So it’s a plain-text version of what the form would look like, even though the HTML is being displayed.”
Form in Outlook 07/10/13
Form in Apple Mail
*Animated GIFs + HTML5 Video
Unlike its predecessors, animated GIFs do not play in these later versions of Outlook. Rather, the first frame is displayed.
Similarly, while HTML5 video does not play, the fallback content is displayed.
This email from 37signals is a great example of the quirkiness of these later versions of Outlook. On the left is the email in Outlook 2000 and, on the right, in Outlook 2007.
The reason the email renders a little “funky” in these later versions of Outlook is because the email layout is controlled using margin and floats. As a result, the “use a different card” and “change the account owner” buttons stack on top of one another, rather than appearing side-by-side. The best way to combat these issues would be to use a table-based layout. Placing each button in an individual column (or <td> cell) rather than using CSS-based positioning would preserve the layout in Outlook clients.
EMAIL RENDERING IN OUTLOOK 2011
Outlook 2011, also known as “Outlook for Mac,” runs on OS X, Apple’s proprietary operating system for Macintosh (Mac) computers, and uses WebKit to render emails. This is great news for email designers, since Outlook for Mac has excellent support for HTML and CSS. There is no PC/Windows equivalent, although Outlook for Mac renders quite similarly to Apple Mail, which also uses WebKit to render.
*Images-Off + ALT Text
Similarly to other versions of Outlook, images are blocked by default, but displayed for trusted senders. ALT text, as well as styled ALT text, are supported in Outlook 2011.
RENDERING IN OUTLOOK.COM (DESKTOP BROWSERS)
Outlook.com uses the same preprocessor, whose job it is to maintain the security and stability of the client by removing potentially dangerous elements, that was used by Hotmail—MS SafeHTML. As a result, Outlook.com renders very similarly to Windows Live Hotmail.
However, as Ros at Campaign Monitor pointed out, Microsoft’s ‘Segoe UI’ will be used for displaying h1, h2 and h3 headings unless another font is specified in your CSS. We also noticed that the default color for headings is white and that paragraph tags will default to Calibri set at 15px. Additional quirks include:
- No support for background images
- No support for CSS floats
- Poor support for CSS width and height
In addition, Outlook.com dropped support for the following CSS properties:
Outlook.com strips margin from paragraph tags, leaving default values (0 for the top, right and left; 1.35em for the bottom, to be exact) in their place. In addition, Outlook.com also strips margin from all block-level elements. But don’t worry, we’ve got the fix for this issue—use <td> and swap margin for padding.
To make matters more complex, rendering inconsistencies can also pop up between browsers. A message opened in Outlook.com in Internet Explorer may look different than the same email opened using Chrome. Here’s a general guideline for what to expect:
*Images-Off + ALT Text
Rather than blocking all images by default, Outlook.com claims to block content from suspicious-looking senders. However, it isn’t clear how they determine who is “suspicious” versus who is “trusted.” Users have the ability to block images for anyone not in their safe senders list in their Outlook.com settings. Outlook.com treats these two types of content filtering differently, blocking images (but showing ALT text) for “suspicious-looking” senders while using grey boxes to block out images for users that have the stricter content blocking settings in place.
In addition, ALT text is supported in Outlook.com when grey boxes aren’t used to hide images. However, styled ALT text support varies based off the browser being used. Styled ALT text is supported in current versions of Firefox, Chrome and Safari, but not supported in Internet Explorer.
Similarly to early versions of Outlook, forms are displayed but they are not functional. As a result, it’s probably best to link to a form on a website, rather than embedding it in the actual email.
Similarly to styled ALT text, HTML5 video support varies depending on which desktop browser it is being viewed on. However, it should be noted that the recipient has to right-click on the video to play it (there is a workaround for this, but Campaign Monitor doesn’t suggest using it—and we agree!).
HTML5 video will be displayed in Chrome 3+, Firefox 3.5+, Safari 3.1+ and IE 9+.
*Symbols in Subject Lines
As Campaign Monitor explains, while symbols are supported in Outlook.com, in some cases, instead of displayed the basic characters, some symbols like ❤ are replaced by a box (☐) instead. The solution to this? Make sure to test your emails in Outlook.com to see how the symbol is rendering!
EMAIL RENDERING IN OUTLOOK.COM (MOBILE BROWSERS)
Not all mobile users use the native mail application on their phones; some subscribers use email apps, while some even up the browser on their mobile phone to use webmail services to read email. For example, users can open up their browsers and use Outlook.com as their email client.
Here’s a general overview of how Outlook.com renders in mobile browsers—keep in mind that specific browsers or OS may affect results:
*Images-Off + ALT Text
Similar to its desktop webmail counterpart, Outlook.com blocks images by default in Android and iPhone browsers, following the same image blocking pattern as Outlook.com on desktop browsers.
While forms are displayed, they are not functional in Outlook.com in the Android or iPhone browser. As a result, it’s best to link to a form on a landing page.
HTML5 video had mixed support between earlier versions of Android and newer versions. On Android 2.3.5, the video’s fallback content was displayed, as well as a popup on the video that said “Click right to play.” This was obviously a bit strange since you can’t technically “click” on a touchscreen. Also, when I attempted to click on that, nothing happened. However, there was a link under the video, “Click to play this video,” and once I clicked that, a new browser opened and the video played.
On the Android 4.1.1, the video plays within the email client. It doesn’t play automatically, but if you click play, the video will play directly within the email client.
For Outlook.com viewed in an iPhone browser, HTML5 video does not play, but fallback content is displayed.
AND THERE’S MORE! SO MUCH MORE.
While we’ve covered a wide array of Outlook clients in this post, there are more out there! It’s important to remember that rendering in Outlook clients can vary greatly, depending on browser and OS versions, user settings and more. As a result, it’s important to know where your subscribers are most frequently opening your emails and ensure your campaigns are optimized in those clients.
- An overview of Outlook 2013
- Outlook.com drops support for margin
- The ultimate guide to styled ALT text
- Video in Email — Will it work? Campaign Monitor.
- Using Forms in Email — Will it work? Campaign Monitor.
- Symbols in Subject Lines — Will it work? Campaign Monitor.
- ALT Attributes — Will it work? Campaign Monitor.
- Image-Blocking in HTML Email — Will it work? Campaign Monitor.
GET MORE EMAIL TIPS AND RESOURCES, STRAIGHT TO YOUR INBOX
Subscribe to our newsletter and receive tips, tricks, stats and helpful advice packaged in a beautiful monthly newsletter.