• Features
    All Features Email Previews
    Builder Checklist Spam Testing Email Analytics Litmus Extension
  • Pricing
  • Resources
    Resources Litmus Conference Convince Your Team Gmail Promotions Builder
  • Enterprise
  • Community
    Discussions Snippets Templates Jobs
  • Blog
  • Sign In
  • Litmus
  • Features
  • Pricing
  • Resources
  • Enterprise
  • Blog
  • Community
  • Discussions
  • Snippets
  • Templates
  • Jobs
  • My Account
  • Sign In
  • Community Home
  • Discussions
  • Learning
  • Snippets
  • Templates
  • Jobs

    Outlook Overview

    • Posted by Alan Tippins

    Outlook

    Outlook
    Outlook

    Microsoft Outlook is one of the oldest and most widely used email clients available. Having undergone a number of revisions and updates over the years, there is a wide range of versions in use today by both consumers and businesses. Litmus currently tests for the most popular versions, which consists of seven separate versions of Outlook.

    Microsoft notoriously changed the rendering engine used to display emails from Internet Explorer to Microsoft Word with the release of Outlook 2007 - leading to a regression in what HTML and CSS could be used in email campaigns. This change in rendering engines is a source of constant frustration for email designers, as Microsoft Word lacks support for many widely used HTML tags and CSS properties.

    Market Share

    Outlook has a number of versions in use, but combined they represent an impressive 17% of the market, placing Outlook in the #2 position in our top ten. Outlook is very popular amongst both consumers and businesses - meaning that nearly every email designer needs to watch out for its multitude of quirks.

    Deliverability

    Microsoft Outlook has built in spam filtering typically referred to as their Junk Email Filter. By default, the Junk Email Filter in Outlook is set to “low”, which typically allows in messages from known senders and trusted sources. However, if you are sending to a new subscriber, Outlook’s Junk Email Filter may filter your initial emails to them. Outlook typically does not delete the messages on a server, but instead dumps suspected emails into a junk folder.

    Users can also use Outlook to access POP3 and IMAP accounts, which are usually subject to that services own deliverability rules and spam filtering, much like many other clients.

    It’s important to note that Outlook is a very popular client in the business world, and as such, has a large number of third-party add-ons that can impact deliverability. Many businesses also use firewalls to protect their networks, which can greatly affect deliverability, even from trusted senders.

    Rendering

    Microsoft Outlook is often cited as one of the most hated email clients amongst designers. It is the source of many headaches, mainly due to the fact that Microsoft swapped out the rendering engine with Outlook 2007 - favoring Microsoft Word’s HTML rendering capabilities over those Internet Explorer. With this change came a decrease in the number of HTML tags and CSS properties that were supported, along with a few obnoxious quirks when rendering things like images and spacing.

    A distinction needs to be made between versions of Outlook when considering rendering issues. Outlook for Mac generally has very good support for HTML and CSS since it is built on the same Webkit rendering engine as Apple Mail. Emails displayed in Outlook for Mac are unlikely to break when following good design practices.

    The same goes for emails rendered in older versions of Outlook, primarily Outlook 2000-2003, which rely on Internet Explorer for rendering. The main problems you will likely run into with earlier versions is the lack of support for the min-width and max-width CSS properties. Many designers use these properties with fluid and responsive templates to constrain table widths. Outlook users will typically experience blown-out layouts if this is not accounted for.

    More recent versions of Outlook (2007-2013) have considerably less support for HTML and CSS and include a number of bugs to keep in mind.

    Outlook
    Outlook 2013

    One of the biggest problems in Outlook is missing support for the box-model. While Outlook does support the width and margin properties - it is sorely lacking support for the height property, min- and max-width, and padding on p and div tags. This can lead to a variety of problems - usually collapsed blocks of text or blown-out table widths.

    Apart from the box-model, Outlook has essentially zero support for positioning elements with CSS. While not commonly used by designers, properties like position, float, top, right, bottom, and left simply won’t work in Outlook. More importantly for some modern design techniques - most versions of Outlook do not support the display property - meaning that any hidden elements for responsive templates will be displayed on desktop if relying on display:none; for hiding elements.

    Along with abysmal support for CSS, Outlook has a number of unique bugs that designers need to keep in mind.

    If you are using animated GIFs (a common technique), they will not animate within Outlook. Fortunately, Outlook still displays the first frame of animation. It is recommended that you keep any vital information visible in the first frame so that your message is not lost.

    If you are using padding-top within a row and have multiple table cells within that row, padding-top will be applied to every table cell in the row, regardless of only declaring it on one of the elements.

    Outlook has issues with rendering text when line-height is declared, especially with decimal values like 1.5 or values less than 0.

    Outlook ignores resizing images via code and will display the images at their actual size. This can be a huge problem if you are feeding emails retina images that are resized in code, leading to broken layouts for Outlook users.

    Outlook has zero support for styling lists - so no using images for bullets or even declaring a specific list-style-type for Outlook readers.

    Since Outlook relies on Microsoft Word for rendering emails, longer emails will sometimes be rendered with odd gaps in the layout. This is due to Word incorrectly assuming that the email is a document with defined page breaks, normally meant for printing. It will attempt to force emails into a normal document length, leading to gaps where it thinks page breaks should fall.

    Understandably, accounting for Outlook (at least versions 2007-2013) is one of the worst parts of designing HTML emails. The unreasonable lack of support for CSS and the multitude of bugs in the rendering engine means that designers need to be very careful when building emails for audiences with large numbers of Outlook users. With Outlook ranking as the second most popular email client today, that effectively means that every email designer needs to build accordingly.


    Targeting Outlook

    With the plethora of rendering issues that comes with having to support Outlook, it is sometimes useful to target Outlook with specific styles. Fortunately, targeting various versions of Outlook is relatively easy using conditional CSS.

    <!--[if gt mso 11]>
        <style type="text/css">
            ... Specific Outlook Styles...
        </style>
    <![endif]-->
    

    Looking at the example above, you can see a conditional statement containing a style block for CSS to be used for Outlook. That conditional statement can be used to target Outlook in a variety of ways:

    • lt is less than a specific version.
    • gt is greater than a specific version.
    • lte is less than or equal to a specific version.
    • gte is greater than or equal to a specific version.

    It's important to understand which versions you are targeting, too. Microsoft's numbering scheme is below:

    • Outlook 2000 = 9
    • Outlook 2002 = 10
    • Outlook 2003 = 11
    • Outlook 2007 = 12
    • Outlook 2010 = 14
    • Outlook 2013 = 15
    • Outlook 2016 = 16

    In addition to using conditional CSS, Outlook has a variety of Microsoft-specific properties which you can use to your advantage if you're running into any particularly nasty bugs. Not many designers will utilize any of these properties, but for the purposes of documentation, here they are:

    mso-ansi-font-size mso-ansi-font-style mso-ansi-font-weight
    mso-ansi-language mso-arabic-font-family mso-armenian-font-family
    mso-ascii-font-family mso-ascii-theme-font mso-background-source
    mso-bengali-font-family mso-bidi-font-family mso-bidi-font-size
    mso-bidi-font-style mso-bidi-font-weight mso-bidi-language
    mso-bidi-theme-font mso-bookmark mso-bopomofo-font-family
    mso-border-alt mso-border-bottom-alt mso-border-color-alt
    mso-border-insideh mso-border-insidev mso-border-left-alt
    mso-border-right-alt mso-border-shadow mso-border-style-alt
    mso-border-top-alt mso-border-width-alt mso-break-type
    mso-cell-special mso-cellspacing mso-char-indent-count
    mso-char-indent-size mso-char-tracking mso-char-type
    mso-char-wrap mso-color-alt mso-color-index
    mso-column-margin mso-currency-font-family mso-cyrillic-font-family
    mso-data-placement mso-default-font-family mso-default-props
    mso-devanagari-font-family mso-displayed-decimal-separator mso-displayed-thousand-separator
    mso-element mso-element-anchor-horizontal mso-element-anchor-vertical
    mso-element-frame-height mso-element-frame-hspace mso-element-frame-width
    mso-element-left mso-element-top mso-element-wrap
    mso-endnote-continuation-separator mso-endnote-numbering-style mso-endnote-separator
    mso-eudc-font-family mso-even-footer mso-fareast-font-family
    mso-fareast-language mso-fareast-theme-font mso-field-code
    mso-font-alt mso-font-charset mso-font-format
    mso-font-kerning mso-font-pitch mso-font-signature
    mso-font-width mso-footer mso-footer-margin
    mso-footnote-continuation-separator mso-footnote-id mso-footnote-separator
    mso-generic-font-family mso-georgian-font-family mso-gram-e
    mso-greek-font-family mso-gurmukhi-font-family mso-halfwidthkana-font-family
    mso-han-font-family mso-hangul-font-family mso-hansi-font-family
    mso-hansi-theme-font mso-header mso-header-margin
    mso-hebrew-font-family mso-height-rule mso-height-source
    mso-hide mso-highlight mso-hyphenate
    mso-ignore mso-kana-font-family mso-kannada-font-family
    mso-kinsoku-overflow mso-lao-font-family mso-latin-font-family
    mso-latinext-font-family mso-layout-grid-align mso-level-font-family
    mso-level-indent mso-level-legacy mso-level-legacy-indent
    mso-level-legacy-space mso-level-number-format mso-level-number-position
    mso-level-size mso-level-start-at mso-level-style-link
    mso-level-tab-stop mso-level-text mso-line-height-alt
    mso-line-height-rule mso-line-spacing mso-linked-frame
    mso-list mso-list-id mso-list-template-ids
    mso-list-type mso-malayalam-font-family mso-margin-bottom-alt
    mso-margin-left-alt mso-margin-top-alt mso-no-proof
    mso-number-format mso-oriya-font-family mso-outline-level
    mso-padding-alt mso-page-border-surround-footer mso-page-border-surround-header
    mso-page-orientation mso-pagination mso-paper-source
    mso-para-margin mso-para-margin-bottom mso-para-margin-left
    mso-para-margin-right mso-para-margin-top mso-pattern
    mso-position-horizontal mso-position-horizontal-relative mso-position-vertical
    mso-position-vertical-relative mso-protection mso-rotate
    mso-row-margin-left mso-row-margin-right mso-shading
    mso-spacerun mso-special-character mso-special-format
    mso-spl-e mso-style-id mso-style-link
    mso-style-locked mso-style-name mso-style-next
    mso-style-noshow mso-style-parent mso-style-priority
    mso-style-qformat mso-style-type mso-style-unhide
    mso-style-update mso-symbol-font-family mso-syriac-font-family
    mso-tab-count mso-table-anchor-horizontal mso-table-anchor-vertical
    mso-table-layout-alt mso-table-left mso-table-lspace
    mso-table-overlap mso-table-rspace mso-table-top
    mso-tamil-font-family mso-telugu-font-family mso-text-animation
    mso-text-raise mso-thaana-font-family mso-thai-font-family
    mso-themecolor mso-themeshade mso-title-page
    mso-tstyle-colband-size mso-tstyle-rowband-size mso-width-alt
    mso-width-source mso-wrap-distance-bottom mso-wrap-distance-left
    mso-wrap-distance-right mso-wrap-distance-top mso-wrap-edited
    mso-yfti-firstrow mso-yfti-irow mso-yfti-lastrow
    mso-yfti-tbllook


    Resources

    Email Client Market Share
    Campaign Monitor's Guide to CSS Support
    MailChimp's CSS Support Guide
    Wikipedia Outlook Article
    Outlook 2007 Rendering Capabilities Part 1
    Outlook 2007 Rendering Capabilities Part 2
    Why Does My Email Look Like Monkey Poop in Outlook?
    About the Junk Email Filter
    Overview of the Junk Email Filter
    How Outlook Helps Protext You from Spam
    Using Conditional Comments in Outlook
    The Truth Behind the Outlook 2007 Change
    HTML Email Rendering Issues in Outlook 2013
    It's not You, it's Outlook
    Microsoft to Ignore Web Standards
    Word HTML
    Rendering HTML Emails in Outlook
    Common Rendering Issues in Email Marketing

    Login to leave a comment
    Litmus Logo
      Company
    • Team
    • Customers
    • Careers
    • Contact
    • Brand
      Product
    • Features
    • Pricing
    • Enterprise
    • Extension
      Tools
    • Events
    • Labs
    • Scope
    • Resources
      Help
    • Knowledgebase
    • Status
    • Community
    • Trust
    Subscribe to our emails

    Copyright © Litmus Software, Inc. 2005-2023. 675 Massachusetts Ave., 11th Floor, Cambridge, MA 02139. View our Terms of Service or Privacy Policy. Send us a note to hello@litmus.com or give us a call at +1 (866) 787-7030

    Sign in to Community

    Are you new to Litmus Community?

    Create a Free Litmus Account

    Use your existing Litmus login to connect with the world’s most amazing email designers.

    Having trouble signing in? Try Forgot password

    Join the Litmus Community

    Sign up to Community

    Litmus uses the information you provide us to bring you great content about email marketing trends, stats, events and relevant products and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy
    Already have a Litmus login? Sign in

    Get more out of your Litmus account

    Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial.

    • Email Previews

      Get 2,000 screenshots/month in popular email clients, including key international webmail clients, to ensure your emails look great everywhere.

    • Builder

      Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

    • Checklist

      Get screenshots in popular email clients to ensure your email looks great everywhere.

    • Code Editor Integrations

      Preview and troubleshoot your emails right where you build with seamless integrations between Litmus and any local code editor, like Dreamweaver or Sublime.

    • ESP Integrations

      Save time producing and troubleshooting your campaigns with seamless integrations between Litmus and your email service provider (ESP).

    • Spam Testing

      Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

    • Email Analytics

      Optimize your campaigns with subscriber-level insights to improve segmentation and targeting strategies.

    • Private Litmus Teams

      Get full team visibility. Manage Litmus access and monitor usage across private teams.

    No thanks, just sign me up without a trial

    Forgot password

    Enter your email address to reset your password


    Already have a Litmus login? Sign in