A Guide to Rendering Differences in Microsoft Outlook Clients

[ 10 By

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.

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:

Outlook 2000-2003

check-X

Displays images

check-green

ALT text*

check-X

Styled ALT text

check-X

Forms*

check-green

Animated GIF

check-X

HTML5 Video*

check-X

Symbols in subject lines*

*ALT TEXT

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:

ALTtextOutlook03

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.

*FORMS

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.

*HTML5 Video

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!

SymbolSubjectLineOutlook2003

Symbols in subject line for Outlook 2000-2003

Outlook2011SymbolSubject

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:

Outlook 2007/2010/2013

check-X

Displays images

check-green

ALT text*

check-X

Styled ALT text

check-X

Forms*

check-x

Animated GIF

check-X

HTML5 Video*

check-green

Symbols in subject lines*

*ALT TEXT

Similarly to early versions of Outlook, these later versions also support ALT text, but include a security message.

*Forms

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.”

FormOutlook2007-2

Form in Outlook 07/10/13

AppleMailForm-2

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.

37signals-Outlook2000

Outlook 2000

37signals-ol2007

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.

Outlook 2011

check-X

Displays images*

check-green

ALT text

check-green

Styled ALT text

check-green

Forms

check-green

Animated GIF

check-green

HTML5 Video

check-green

Symbols in subject lines

*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:

  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

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:

Outlook.com

check-X

Displays images*

check-green

ALT text

check-green

Styled ALT text*

check-x

Forms*

check-green

Animated GIF

check-green

HTML5 Video*

check-green

Symbols in subject lines*

*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.

hotmail-image-blocking

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.

*Forms

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.

*HTML5 Video

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:

Outlook.com (Android)

check-X

Displays images*

check-X

ALT text

check-X

Styled ALT text

check-X

Forms*

check-green

Animated GIF

check-green

HTML5 Video*

check-green

Symbols in subject lines

Outlook.com (iPhone)

check-X

Displays images*

check-green

ALT text

check-green

Styled ALT text

check-X

Forms*

check-green

Animated GIF

check-X

HTML5 video*

check-green

Symbols in subject lines

*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.

*Forms

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

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.

ADDITIONAL RESOURCES

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.




  • Mark Robbins

    I got a new Windows 8.1 laptop the other day and I’m a little worried about how prominent the Outlook app is.

    It doesn’t even say Outlook it says Mail. I’m worried the masses are just going to accept this and use it for their emails, settling for a sub-par experience.

    Screen shot: http://cdn3.pcadvisor.co.uk/cmsdata/features/3360933/metro_screen_mail_icon.png

    On a separate note,
    I wrote a little thing about Outlook.com in mobile browsers and why it’s not responsive. http://emailcodegeek.com/13-characters-why-outlook-com-isnt-responsive/

    • http://www.litmus.com Justine, Litmus

      How *is* the experience of the Outlook/Mail app on Windows 8? There isn’t much info out there about it… is this the same client as the Outlook that comes with Office 365?

      • Mark Robbins

        The UI is pretty bad, they’ve moved things so they aren’t where you’d naturally expect to find them and they are using icons with no labels.

        I’ve not used 365 but from screen shots it looks pretty similar.

        Not really looked into CSS support but sent a few test emails and nothing major stood out.

        • http://brodymckee.com/ Brody McKee

          I disagree. Mail on Windows 8.1 has a great touch-first experience. the icons without labels are a problem with metro, I agree, but otherwise it’s good.

          The average Surface comes with both Outlook and Mail.

          Mail is nothing like Office 365…

  • delainanicole

    The loss of using the margin properties is what really killed me. I started trying to put everything into td’s but that was a huge pain in the behind. After a while I said, forget it, and just hoped that more people are using gmail and iOS and even yahoo.

    • Haifa Sekkouah

      I agree. Have you tried using Jade? It has really neatened things up for me so it’s easier to keep track of the structure…

  • http://www.tedgoas.com/ Ted Goas

    Oh man I feel like this should be required reading for any email developer. It’s a good summary of all the little Outlook quirks that we need to defend against.

    A++ job as always!

  • Dennis, ListsUK

    Great summary, thanks Lauren.

  • Leo

    Great summary!
    Outlook.com does support background images btw (using html “background=” instead of css).

  • Pingback: Which browsers/operating systems/platforms are used on Litmus? - Help – Litmus()