{"id":52023,"date":"2023-10-27T15:24:00","date_gmt":"2023-10-27T19:24:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=52023"},"modified":"2025-06-24T10:39:03","modified_gmt":"2025-06-24T14:39:03","slug":"a-guide-to-rendering-differences-in-microsoft-outlook-clients","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients","title":{"rendered":"Outlook Email Rendering Issues and How to Solve Them"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_774c51f7be0b5221e306349624da5895\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3>Key Takeaways<\/h3>\n<ul>\n<li>Understanding how different versions of Microsoft Outlook render emails helps ensure consistent formatting and prevents display issues that can damage your email performance.<\/li>\n<li>Fixing common Outlook-specific rendering problems\u2014like image distortion, missing padding, and scaling issues\u2014keeps your emails visually polished and accessible across devices.<\/li>\n<li>Applying reliable coding solutions such as conditional comments, MSO properties, and VML empowers you to maintain design quality\u2014even in the most challenging Outlook environments.<\/li>\n<li>Testing emails across Outlook clients reduces errors, safeguards your brand\u2019s reputation, and increases engagement by delivering a seamless subscriber experience.<\/li>\n<\/ul>\n<p>There is nothing worse than spending hours creating a beautiful email, filled with perfectly witty\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email\/\" rel=\"noopener\">animated GIFs<\/a>, amazing images, <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-personalization\">handcrafted personalization<\/a>, and <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-bulletproof-buttons-in-email-design\/#vml\" rel=\"noopener\">accessible buttons<\/a>, only to find that it fails Outlook preview when you move to\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" rel=\"noopener\">email testing<\/a>. Soul crushing.<\/p>\n<p>Outlook emails not displaying HTML emails properly has been a staple in the email marketing book of pet peeves for a long time. But does it have to be? Discover how to overcome the Outlook obstacles and create\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/dynamic-email-content-to-increase-engagement\/\" rel=\"noopener\">dynamic<\/a>, engaging emails which are certain to look fabulous\u2026 even in Outlook!<\/p>\n<p>Today, we\u2019ll take a look at the Outlook <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/why-testing-the-rendering-of-every-email-you-send-increases-your-roi\" target=\"_blank\" rel=\"noopener\">email rendering<\/a> issues you may encounter in the wild\u2026 and how to solve them.<\/p>\n<p>(Psst. Use our handy menu on the left to skip to the part most relevant to you.)<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<section>\n<div class=\"container pt-5\">\n\t<div class=\"row\">\n\t\t<div class=\"col-3 d-none d-lg-block\">\n\t\t\t<div class=\"sticky-sidebar-section\">\n\t\t\t\t<div id=\"sticky-list-group\" class=\"sidebar-item sticky-top list-group\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"list-group-item list-group-item-action\" rel=\"noopener\" href=\"#Part1\">\n\t\t\t\t\t\t<strong>Part 1:<\/strong> Find your version of Microsoft Outlook\t\t\t\t\t<\/a><!--list-group-item list-group-item-action-->\n\t\t\t\t\t\t\t\t\t\t<a class=\"list-group-item list-group-item-action\" rel=\"noopener\" href=\"#Part2\">\n\t\t\t\t\t\t<strong>Part 2:<\/strong> Common Outlook email rendering issues\t\t\t\t\t<\/a><!--list-group-item list-group-item-action-->\n\t\t\t\t\t\t\t\t\t\t<a class=\"list-group-item list-group-item-action\" rel=\"noopener\" href=\"#Part3\">\n\t\t\t\t\t\t<strong>Part 3:<\/strong> Code Snippets\t\t\t\t\t<\/a><!--list-group-item list-group-item-action-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div><!--sidebar-item sticky-top list-group-->\n\t\t\t<\/div><!--sticky-sidebar-section-->\n\t\t<\/div><!--col-3 d-none d-lg-block-->\n\t\t<div data-bs-spy=\"scroll\" id=\"sticky-list-content\" data-bs-target=\"#sticky-list-group\" class=\"col-12 col-lg-9 pb-5\">\t\t\t\t\t\t<div class=\"row d-flex align-items-center sticky-sidebar-multi-content\" id=\"Part1\">\n\t\t\t\t<h2 class=\"h-xxl\"><strong>Part 1:<\/strong> Find your version of Microsoft Outlook<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"row mb-5\">\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t<div class=\"col-12\">\n\t\t\t\t\t\t<h3 class=\"h-md\"><strong>Find your version of Microsoft Outlook and learn its eldritch secrets<\/strong><\/h3>\n\t\t\t\t\t\t<p>The name \u201cOutlook\u201d covers several different email clients with a couple of different rendering engines and at least two different viewing settings. All of this can be a giant headache if you let it. Let\u2019s dive in to the different Outlook versions.<\/p>\n<h3>Outlook 2007-2019<\/h3>\n<p>These are the Windows desktop versions of Outlook. These use Word as the rendering engine, which made sense at a time when email was like writing letters. (Ah, simpler times.) But, for email marketers, it doesn\u2019t cut it for rendering Outlook HTML emails.<\/p>\n<p>120 DPI (dots per inch) adds to the complexity. Windows users can choose 120 DPI to increase their screen resolution. If they do, the desktop email clients will respect that and will update images and text to be larger.. Unfortunately, this can wreak havoc on your email.<\/p>\n<h3>Outlook for Mac<\/h3>\n<p>This is the Mac desktop version of Outlook. It uses Webkit as the rendering engine. This means it\u2019s usually on par with Apple Mail and iOS as far as email rendering is concerned. If it looks good in your browser, there\u2019s a decent chance it will look good in Outlook for Mac and you\u2019ll have less chance of your\u00a0html email not displaying properly.<\/p>\n<h3>Outlook.com and the Outlook mobile apps<\/h3>\n<p>These clients use Webkit or Webkit-based rendering engines, so they provide good HTML rendering and don\u2019t usually break your emails.<\/p>\n<h3>Outlook Office 365<\/h3>\n<p>There are two different versions of Outlook Office 365:<\/p>\n<ul>\n<li>Desktop email client<\/li>\n<li>Web-based email client<\/li>\n<\/ul>\n<p>The desktop version is similar to Outlook 2007-2019 and uses Word as a rendering engine (hard for email). The web-based email client uses Webkit or Blink and renders emails similarly to Outlook.com (much easier).<\/p>\n<h3>The New Outlook<\/h3>\n<p>In January 2021 , Microsoft announced their\u00a0<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.windowscentral.com\/project-monarch-outlook-web-universal-email-client-microsoft\" target=\"_blank\" rel=\"noopener\">\u201cOne Outlook\u201d vision<\/a> to replace the desktop clients with one client that works everywhere. As of May 2022, this version of Outlook was available to Beta Channel users, and as of April 2023, it is available in the <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/apps.microsoft.com\/store\/detail\/outlook-for-windows\/9NRX63209R7B\">Windows App store.<\/a> Just look for the &#8220;Try the New Outlook&#8221; text.<\/p>\n<p>This new Outlook for Windows is based on current Outlook web apps. The biggest difference between this version and past desktop versions is that this new version doesn&#8217;t use Microsoft Word as a rendering engine, but instead uses a web browser engine. (Yay!) The goal is <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/dev.to\/emailmarkup\/the-new-outlook-for-windows-54k7\">consistency<\/a>. Unfortunately, all those old desktop clients aren\u2019t going to just disappear, so they\u2019ll still have to be supported to some extent.<\/p>\n<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-69590\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Slide-into-inboxes.png\" alt=\"Preview your emails across all versions of Outlook before send to ensure an on-brand, error-free subscriber experience.\" width=\"1342\" height=\"435\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Slide-into-inboxes.png 1342w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Slide-into-inboxes-300x97.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Slide-into-inboxes-1024x332.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Slide-into-inboxes-768x249.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Slide-into-inboxes-700x227.png 700w\" sizes=\"(max-width: 1342px) 100vw, 1342px\" \/><\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div><!--col-12 col-lg-5-->\n\t\t\t\t<\/div><!--row-->\n\t\t\t\t\t\t\t\t\t\t\t<\/div><!--row d-flex align-items-center mb-5-->\n\t\t\t\t\t\t<div class=\"row d-flex align-items-center sticky-sidebar-multi-content\" id=\"Part2\">\n\t\t\t\t<h2 class=\"h-xxl\"><strong>Part 2:<\/strong> Common Outlook email rendering issues<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"row mb-5\">\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t<div class=\"col-12\">\n\t\t\t\t\t\t<h3 class=\"h-md\"><strong>Learn about common Outlook rendering issues and how to solve them<\/strong><\/h3>\n\t\t\t\t\t\t<div id=\"simple-text-block-block_60dce46b33670\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>The key takeaway is that we\u2019re working with two different rendering engines\u2014Word and Webkit. Webkit is easier to code for, and Word is more difficult. Neither is necessarily good or bad, they just require different approaches and have different quirks that need to be taken into consideration.<\/p>\n<p>Let\u2019s look at some of the common rendering issues in Outlook desktop clients and how to solve them.<\/p>\n<h3>Got weird image sizes?<\/h3>\n<p>Fix: Include width and height attributes on your images<\/p>\n<p>Outlook does not support CSS styles for widths and heights. If you don\u2019t include the width and height attributes, Outlook will display your image at its actual size. If you\u2019re using\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/understanding-retina-images-in-html-email\/\" rel=\"noopener\">retina images<\/a>\u00a0(which you should be), this will lead to giant images that\u2019ll break your emails.<\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/1r.png\" alt=\"\" \/><\/div>\n\n<h3>Security message coming up instead of your image?<\/h3>\n<p>Fix: Include ALT text.<\/p>\n<p>Don\u2019t let Outlook\u2019s security message speak for your images. Make sure to include ALT text; Outlook\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-email-image-blocking\/\" rel=\"noopener\">doesn\u2019t display images<\/a>\u00a0by default unless people turn the feature on.<\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/2r.png\" alt=\"\" \/><\/div>\n\n<h3>Outlook ignoring your tags?<\/h3>\n<p>Fix: Use tables!<\/p>\n<p>Email has come a long way and you can use &lt;div&gt; blocks in lots of email clients, but Outlook isn\u2019t one of them. Outlook will ignore most styles that you apply to your &lt;div&gt; tags including widths and paddings, so it\u2019s important that you use &lt;table&gt; tags for your content instead.<\/p>\n<h3>Experiencing a unique Outlook rendering issue?<\/h3>\n<p>Fix: Use Outlook-specific code<\/p>\n<p>This may not solve all your issues, but including some\u00a0<a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/learning\/8-outlook-overview\" rel=\"noopener\">Outlook-specific CSS<\/a>\u00a0can help you solve a rendering issue that you\u2019re only seeing on Outlook. Or, you may hide a small block if your\u00a0Outlook email is not displaying properly, and use conditional code to show a version that\u00a0<i>would<\/i>\u00a0work for a specific version of Outlook. (More on conditional code later.)<\/p>\n<h3>Small images or table cells not displaying correctly?<\/h3>\n<p>Fix: Add line heights<\/p>\n<p>Outlook sets a minimum height on table cells and images. If you\u2019re using a table cell as a spacer or have a small image, make sure to add a line-height attribute to the element equal to the height that you want them to appear. For example:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_754453\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml plain\">&lt;<\/code><code class=\"xml keyword\">tr<\/code><code class=\"xml plain\">&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"xml spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"xml plain\">&lt;<\/code><code class=\"xml keyword\">td<\/code> <code class=\"xml color1\">style<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;\"<\/code><code class=\"xml plain\">&gt;&amp;nbsp;&lt;\/<\/code><code class=\"xml keyword\">td<\/code><code class=\"xml plain\">&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"xml plain\">&lt;\/<\/code><code class=\"xml keyword\">tr<\/code><code class=\"xml plain\">&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce5eb33671\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<h3>Trouble with DPI scaling?<\/h3>\n<p>Fix: Add XML namespace and CSS properties<\/p>\n<p>On Windows computers, there\u2019s a global setting that people can change (or in some cases, are set higher by default) that scales up the text and graphical elements to make them larger and easier to read. This is great for\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/ultimate-guide-to-email-accessibility\/\" rel=\"noopener\">accessibility<\/a>, but not so great for Outlook (some elements are scaled up while others aren\u2019t).<\/p>\n<p>Luckily, there\u2019s a fix. First, you have to add an XML namespace to the HTML tag:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_828111\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml plain\">&lt;<\/code><code class=\"xml keyword\">html<\/code> <code class=\"xml color1\">lang<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"en\"<\/code> <code class=\"xml color1\">xmlns<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"http:\/\/www.w3.org\/1999\/xhtml\"<\/code> <code class=\"xml color1\">xmlns:o<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"urn:schemas-microsoft-com:office:office\"<\/code><code class=\"xml plain\">&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce63d33672\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>Then, add some code to fix for image scaling right before the &lt;\/head&gt; tag:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_859807\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml comments\">&lt;!--[if gte mso 9]&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"xml comments\">&lt;xml&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"xml comments\">&lt;o:OfficeDocumentSettings&gt;<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"xml comments\">&lt;o:AllowPNG\/&gt;<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"xml comments\">&lt;o:PixelsPerInch&gt;96&lt;\/o:PixelsPerInch&gt;<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"xml comments\">&lt;\/o:OfficeDocumentSettings&gt;<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"xml comments\">&lt;\/xml&gt;<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"xml comments\">&lt;![endif]--&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce67133673\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>Finally, make sure to include any set widths as CSS properties with pixels and not as an attribute on your tables.<\/p>\n<p>\u2717 Not this with width=&#8221;600&#8243;:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_230168\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml plain\">&lt;<\/code><code class=\"xml keyword\">table<\/code> <code class=\"xml color1\">cellpadding<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"0\"<\/code> <code class=\"xml color1\">cellspacing<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"0\"<\/code> <code class=\"xml color1\">border<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"0\"<\/code> <code class=\"xml color1\">role<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"presentation\"<\/code> <code class=\"xml color1\">width<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"600\"<\/code><code class=\"xml plain\">&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60ddf739b7051\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>\u2714 Yes, like this with style=&#8221;width:600px;&#8221;:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_780202\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml plain\">&lt;<\/code><code class=\"xml keyword\">table<\/code> <code class=\"xml color1\">cellpadding<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"0\"<\/code> <code class=\"xml color1\">cellspacing<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"0\"<\/code> <code class=\"xml color1\">border<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"0\"<\/code> <code class=\"xml color1\">role<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"presentation\"<\/code> <code class=\"xml color1\">style<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"width:600px;\"<\/code><code class=\"xml plain\">&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce6ae33674\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>That will fix most of your issues for 120 DPI clients. Take a look at this side-by-side table comparison before and after this fix:<\/p>\n<div style='position: relative;width: auto;padding: 0 0 47.34%;height: 0;top: 0;left: 0;bottom: 0;right: 0;margin: 0;border: 0 none' id=\"experience-64c3fbfe809e5\" data-aspectRatio=\"2.11221122\"><iframe allowfullscreen src='https:\/\/www.litmus.com\/wp-content\/uploads\/packages\/experience-64c3fbfe809e5-07-28-2023-1742\/index.html' style='position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: 0;padding: 0;border: 0 none;height: 100%;width: 100%' frameborder='0' class='ceros-experience' title='Outlook Blog Email Example. #3'><\/iframe><\/div>\n<p><script type=\"text\/javascript\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/packages\/experience-64c3fbfe809e5-07-28-2023-1742\/assets\/scroll-proxy.min.js\" data-ceros-origin-domains=\"\"><\/script><\/p>\n<p>What a difference!<\/p>\n<h3>Where\u2019s my hover?<\/h3>\n<p>Fix: Unfortunately, Outlook doesn\u2019t support the hover pseudo-class \ud83d\ude41<\/p>\n<p>While Outlook doesn\u2019t support the hover pseudo-class, you should still include it to create interactions to increase the accessibility of your email across\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-client-market-share\/\" rel=\"noopener\">other email clients.<\/a>\u00a0But don\u2019t be surprised when your\u00a0Outlook email is not displaying properly with the hover effect.<\/p>\n<h3>Why isn\u2019t my GIF moving?<\/h3>\n<p>Fix: Have the initial frame display the image you want to show up in Outlook<\/p>\n<p>Some Outlook desktop clients do not support <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email\/\" rel=\"noopener\">animated GIFs<\/a>. Outlook 2016 and Outlook 2019 <em>do<\/em> support GIFs now, but other versions do not. So, check your version of Outlook, first!<\/p>\n<p>If you&#8217;re using a version of Outlook that does not support GIFs, there are some workarounds. You can have the initial frame display the image you want to show up in Outlook, or you can hide the animated GIF from Outlook and use conditional coding to display a still image that you want. <b>(H3) Do not use interactive content without a fallback<\/b><\/p>\n<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/interactive-emails-top-trend-anyone-using\/\" rel=\"noopener\">Interactive HTML emails<\/a>\u00a0are a big \u201cno\u201d for Outlook. They depend on either AMP coding or the checkbox hack, neither of which are supported on Outlook.<\/p>\n<p>In the case of\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/amp-for-email\/\" rel=\"noopener\">AMP for email<\/a>, the HTML file will be displayed instead of the AMP one, so no extra coding for that. For the\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-interactive-forms-in-email\/\" rel=\"noopener\">checkbox hack interactivity<\/a>, you will have to hide the interactive content and show the Outlook fallback. Again, conditional coding is your friend when it comes to Outlook HTML emails.<\/p>\n<h3>Where\u2019s my image padding?<\/h3>\n<p>Fix: Add padding to the table cell around the image, instead of the image itself<\/p>\n<p>Outlook strips padding and margins off of images. Add padding to the table cell around the image, or if you have the image in the same cell as copy, add a margin to the tag around the copy (&lt;h1&gt;, &lt;h2&gt;, &lt;p&gt;, etc.).<\/p>\n<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-69591\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Perfect-emails.png\" alt=\"Outlook\u2019s got nothing on this. See how your email will display across 100+ email clients, apps, and devices to deliver the best customer experiences possible.\" width=\"1342\" height=\"435\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Perfect-emails.png 1342w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Perfect-emails-300x97.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Perfect-emails-1024x332.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Perfect-emails-768x249.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/03\/Perfect-emails-700x227.png 700w\" sizes=\"(max-width: 1342px) 100vw, 1342px\" \/><\/a>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div><!--col-12 col-lg-5-->\n\t\t\t\t<\/div><!--row-->\n\t\t\t\t\t\t\t\t\t\t\t<\/div><!--row d-flex align-items-center mb-5-->\n\t\t\t\t\t\t<div class=\"row d-flex align-items-center sticky-sidebar-multi-content\" id=\"Part3\">\n\t\t\t\t<h2 class=\"h-xxl\"><strong>Part 3:<\/strong> Code Snippets<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"row mb-5\">\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t<div class=\"col-12\">\n\t\t\t\t\t\t<h3 class=\"h-md\"><strong>Grab your code snippets here and be on your way, email wizard!<\/strong><\/h3>\n\t\t\t\t\t\t<div id=\"simple-text-block-block_60dce6ae33674\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>We\u2019ve got the code you need to face your Outlook HTML email fears!<\/p>\n<p>Coding a great email for Outlook\u2019s desktop email clients requires jumping outside the \u201cnormal\u201d HTML and CSS. There are three types of code that will help <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips\" target=\"_blank\">make your emails shine<\/a> in these clients: conditional coding, MSO properties, and VML.<\/p>\n<p>It can be scary to work with something new, but it\u2019s worth it. When you get it to work properly and it no longer means that your\u00a0Outlook email is not displaying properly, you will feel on top of the world!<\/p>\n<h3>Conditional coding<\/h3>\n<p>Conditional coding looks at what email client or browser your subscriber is using,and only shows the code if it fulfills the conditional inside the comment, such as:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_793054\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml comments\">&lt;!--[if mso]&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"xml comments\">&lt;p&gt;This content is only visible on Outlook desktop clients&lt;\/p&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"xml comments\">&lt;![endif]--&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce7ba33675\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>You can even use this to target specific versions of Outlook\u2019s desktop clients by adding the version numbers:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_587344\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml comments\">&lt;!--[if mso 14]&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"xml comments\">&lt;p&gt;This content is only visible on Outlook 2010 desktop client&lt;\/p&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"xml comments\">&lt;![endif]--&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce7d533676\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>Outlook is anything but straightforward, though, so the version numbers don\u2019t correspond with the name of the email client:<\/p>\n<ul>\n<li>Outlook 2000 = mso 9<\/li>\n<li>Outlook 2002 = mso 10<\/li>\n<li>Outlook 2003 = mso 11<\/li>\n<li>Outlook 2007 = mso 12<\/li>\n<li>Outlook 2010 = mso 14<\/li>\n<li>Outlook 2013 = mso 15<\/li>\n<li>Outlook 2016, Outlook 2019, and Office 365 desktop = mso 16<\/li>\n<\/ul>\n<p>You can get more intricate by targeting a range of clients with less than (lt), greater than (gt), less than or equal to (lte), or greater than or equal to (gte). For example:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_331840\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml comments\">&lt;!--[if (gte mso 9) | (lte mso 11)]&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"xml comments\">&lt;p&gt;This content is only visible on Outlook 2000 to Outlook 2003&lt;\/p&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"xml comments\">&lt;![endif]--&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce80233677\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>If you\u2019re only seeing some issues on a specific client, you can target that client specifically to hide and show better content for it.<\/p>\n<p>You can also use conditional comments to hide content from Outlook by saying \u201cif !mso\u201d meaning \u201cif not mso\u201d:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_299854\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml comments\">&lt;!--[if !mso]&gt;&lt;!--&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"xml plain\">&lt;<\/code><code class=\"xml keyword\">p<\/code><code class=\"xml plain\">&gt;This is visible on anything except Outlook desktop clients&lt;\/<\/code><code class=\"xml keyword\">p<\/code><code class=\"xml plain\">&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"xml comments\">&lt;!--&lt;![endif]--&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce82433678\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>Something to keep in mind: conditional code only works on Outlook desktop clients. As this is where a lot of issues come into play, you\u2019ll probably need these more than any fix for the webmail clients.<\/p>\n<p>There are ways to target the web clients as well, though no way to target one Outlook web client over the other. So when you target Outlook.com, you\u2019ll also target the Office 365 web client (but not the desktop client).<\/p>\n<p>You can target the Outlook web clients by exploiting the fact that Outlook appends \u201cx_\u201d to all class names, but doesn\u2019t do this for the attribute selector. So if you have a class \u201cfoo\u201d and want to treat it differently for Outlook web clients, you can target it with this code:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_383808\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml plain\">[class~=\"x_foo\"] { }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce84833679\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>(Thanks to\u00a0<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/M_J_Robbins\" target=\"_blank\" rel=\"noopener\">Mark Robbins<\/a>\u00a0for this fix and to\u00a0<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/dylanatsmith\" target=\"_blank\" rel=\"noopener\">Dylan Smith<\/a>\u00a0for\u00a0<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/howtotarget.email\/\" target=\"_blank\" rel=\"noopener\">howtotarget.email<\/a>.)<\/p>\n<h3>MSO properties<\/h3>\n<p>As mentioned above, there is CSS specific to Outlook that you can add that will only affect Outlook desktop email clients. Here are a few of the most common:<\/p>\n<p>mso-hide: all;<\/p>\n<p>This property will hide everything from Outlook desktop clients. It does get stripped out when the email is forwarded, so be wary of using it by itself if that\u2019s a function you know your subscribers often use. You can pair it with the \u201cif not mso\u201d conditional code if you\u2019re a \u201cjust in case\u201d coder.<\/p>\n<p>mso-line-height-rule: exactly;<\/p>\n<p>This property ensures that Outlook displays your line height at what you designate in the line-height property. Without it, Outlook doesn\u2019t necessarily respect your line heights. If you\u2019re working in an industry where precision is key, you\u2019re probably very familiar with this property.<\/p>\n<p>mso-padding-alt<\/p>\n<p>This one\u2019s a little less common, but lets you declare padding that is specific to Outlook. If the normal padding you have on a cell isn\u2019t rendering quite right in Outlook, you can use\u00a0<b>mso-padding-alt<\/b>\u00a0to set values that fit your design for Outlook.<\/p>\n<p>mso-ansi-font-size<\/p>\n<p>This lets you set font sizes specific to Outlook. If Outlook is rendering your font a touch bigger than other email clients and you end up with a short final line of copy you didn\u2019t want, add<b>\u00a0mso-ansi-font-size<\/b>\u00a0and set a font size that makes your copy fit.<\/p>\n<p>There are\u00a0<a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/learning\/8-outlook-overview\" rel=\"noopener\">lots more MSO properties<\/a>\u00a0that you can use, so experiment to see if there\u2019s anything that will fix a rendering issue for you.<\/p>\n<h3>VML<\/h3>\n<p>VML stands for Vector Markup Language. It is Microsoft\u2019s version of SVG, but the language has been depreciated and is very rarely used (yay, email!). Microsoft does have the\u00a0<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/win32\/vml\/web-workshop---specs---standards----introduction-to-vector-markup-language--vml-\" target=\"_blank\" rel=\"noopener\">documentation<\/a>\u00a0for VML archived online, so you can still look up how to use it to create vectors in Outlook, where it is still supported. Theoretically, when Microsoft transitions to it\u2019s \u201cOne Outlook\u201d model, we\u2019ll be able to leave VML behind.<\/p>\n<p>Make sure to include the VML namespace declaration. I usually add it to the &lt;html&gt; element in my boilerplate template so I can use VML whenever I need to:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_36260\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml plain\">&lt;<\/code><code class=\"xml keyword\">html<\/code> <code class=\"xml color1\">lang<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"en\"<\/code> <code class=\"xml color1\">xmlns:v<\/code><code class=\"xml plain\">=<\/code><code class=\"xml string\">\"urn:schemas-microsoft-com:vml\"<\/code><code class=\"xml plain\">&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce90a3367e\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>Once you have that, you can add any VML to your code inside MSO conditionals:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_960541\" class=\"syntaxhighlighter nogutter xml\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"xml comments\">&lt;!--[if mso]&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"xml spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"xml comments\">&lt;v:rect fillcolor=\"blue\" stroked=\"false\" style=\"width:200px; height:50px;\"&gt;&lt;\/v:rect&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"xml spaces\">\u00a0<\/code><code class=\"xml comments\">&lt;![endif]--&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"simple-text-block-block_60dce9313367f\" class=\"block-simple-text-block alignfull \">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col\">\n<div class=\"copy\">\n<p>That code would make a blue rectangle that\u2019s 200px by 50px. That may not be something you can actually use in an email, but you can use VML to add buttons with rounded corners to your code, background images, and background gradients. You can also use VML to create\u00a0<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/sayo1337.medium.com\/overlay-email-absolute-positioning-efd2f2f09ed4\" target=\"_blank\" rel=\"noopener\">faux absolute positioning<\/a>,\u00a0<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/win32\/vml\/msdn-online-vml-shadow-element\" target=\"_blank\" rel=\"noopener\">shadow effects<\/a>, or\u00a0<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.goodemailcode.com\/email-enhancements\/css-art.html\" target=\"_blank\" rel=\"noopener\">a fallback to support CSS art in Outlook<\/a>. There are lots you can do with VML once you dive in.<\/p>\n<h2>Test to ensure your Outlook email rendering goes smoothly!<\/h2>\n<p>Outlook has long been the bane of email marketers, but it doesn\u2019t have to be. Whether you\u2019re just starting to work with Outlook or a master marketer able to summon CSS classes at will, with these tools, you\u2019ll be able to charm even the most unruly Outlook inbox.<\/p>\n<p>Check out the resources throughout this post to build up your Outlook coding chops, and test them out in your emails with\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\/\" rel=\"noopener\">Litmus Builder<\/a>\u00a0and\u00a0<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" rel=\"noopener\">Email Previews<\/a>. (And of course, don&#8217;t forget to protect those lovely emails with <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-guardian\">Email Guardian<\/a>!)<\/p>\n<p>Think of coding for Outlook as a puzzle waiting to be solved, and you may find yourself loving Outlook and all of its quirks.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div><!--col-12 col-lg-5-->\n\t\t\t\t<\/div><!--row-->\n\t\t\t\t\t\t\t\t\t\t\t<\/div><!--row d-flex align-items-center mb-5-->\n\t\t\t\t\t\t\t\t<\/div><!--col-12 col-lg-9 pb-5-->\n\t<\/div><!--row-->\n\t<\/div><!--container pt-5 background-spinner-wrapper-->\n<\/section>\n<script type=\"text\/javascript\">\n\tjQuery(document).ready(\n\t\tfunction normalizeStickySidebar() {\n\t\t\t$('body').scrollspy({target:'#sticky-list-group', offset:290});\n\t\t\tsetTimeout(function() { \n\t\t\t\t$(\".list-group-item:last-child\").removeClass(\"active\");}, 2000);\n\t\t});\n<\/script>\n\n<div id=\"post-cta-buttonblock_0fda2ac791b55b8a47125e55b066119b\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/emailguardianicon.png\" alt=\"Litmus Email Guardian icon\" width=\"244\" height=\"244\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Never send another &#8220;oops&#8221; email<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Protect your emails across all clients (including Outlook!) with emerging AI technology from Litmus. Prevent email errors and protect your brand reputation with Email Guardian!<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-guardian\">\n\t\t\t\t\t\tLearn more\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Wonder why your emails look bad in Outlook? Learn about the email rendering and display issues you may face and how to fix them for email perfection.<\/p>\n","protected":false},"author":54,"featured_media":31306,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[694,520,499,10312,102,1148,1575,10264],"blog_category":[10300,10303],"class_list":["post-52023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-broken-email","tag-email-accessibility","tag-email-coding","tag-email-optimization","tag-html","tag-quality-assurance","tag-rendering","tag-subscriber-experience","blog_category-email-building","blog_category-email-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Outlook Email Rendering Issues and How to Solve Them - Litmus<\/title>\n<meta name=\"description\" content=\"Ever wonder why your emails look bad in Outlook? Learn about outlook email rendering and display issues you may face and how to fix them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Outlook Email Rendering Issues and How to Solve Them\" \/>\n<meta property=\"og:description\" content=\"Ever wonder why your emails look bad in Outlook? Learn about outlook email rendering and display issues you may face and how to fix them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-27T19:24:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-24T14:39:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2014\/03\/Outlook-email-rendering-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Outlook Email Rendering Issues and How to Solve Them - Litmus","description":"Ever wonder why your emails look bad in Outlook? Learn about outlook email rendering and display issues you may face and how to fix them.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients","og_locale":"en_US","og_type":"article","og_title":"Outlook Email Rendering Issues and How to Solve Them","og_description":"Ever wonder why your emails look bad in Outlook? Learn about outlook email rendering and display issues you may face and how to fix them.","og_url":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2023-10-27T19:24:00+00:00","article_modified_time":"2025-06-24T14:39:03+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2014\/03\/Outlook-email-rendering-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients"},"author":{"name":"","@id":""},"headline":"Outlook Email Rendering Issues and How to Solve Them","datePublished":"2023-10-27T19:24:00+00:00","dateModified":"2025-06-24T14:39:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients"},"wordCount":9,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2014\/03\/Outlook-email-rendering-1.png","keywords":["Broken Email","Email Accessibility","Email Coding","Email Optimization","HTML","Quality Assurance","Rendering","Subscriber Experience"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients","url":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients","name":"Outlook Email Rendering Issues and How to Solve Them - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2014\/03\/Outlook-email-rendering-1.png","datePublished":"2023-10-27T19:24:00+00:00","dateModified":"2025-06-24T14:39:03+00:00","description":"Ever wonder why your emails look bad in Outlook? Learn about outlook email rendering and display issues you may face and how to fix them.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2014\/03\/Outlook-email-rendering-1.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2014\/03\/Outlook-email-rendering-1.png","width":1380,"height":725,"caption":"illustration of Outlook email rendering"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Outlook Email Rendering Issues and How to Solve Them"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/52023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=52023"}],"version-history":[{"count":15,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/52023\/revisions"}],"predecessor-version":[{"id":117990,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/52023\/revisions\/117990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/31306"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=52023"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=52023"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=52023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}