Blocks Edit Blog

Dealing with Outlook

Email clients have improved email rendering throughout the years. Except for Microsoft Outlook. Here’s how to support it and keep your sanity.

Dealing with Outlook

Remember Internet Explorer and how its lack of support for web standards got so bad that Microsoft had to kill it? That's pretty much where we are with Outlook. In some cases for mobile, Outlook has improved by using the HTML rendering engines from iOS, Android, and macOS instead of their own. It's Windows that's mainly still an issue.

Having recently changed the rendering engine of their Edge browser, does that mean it's time for Microsoft to finally give Outlook an upgrade as well? Current Outlook usage is roughly at nine percent and continues to go down, so maybe it will just go away completely! But for now, there are enough unfortunate email users that use the bad versions of Outlook that we should be supporting as best we can.

Layout for Outlook

First of all, there's no reason why you shouldn't build your email structure based on good, accessible design and code, and make Outlook-specific code secondary. Outlook has kept table-based design alive even though there's no need for it.

The way to account for Outlook requiring tables is by using the ghost tables technique when needed, where tables are added around your div structure, commented to only be output by Outlook. Here's an example:

<!-- Two-column section with image on the left -->
<!--[if true]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="all: unset; opacity: 0;">
  <tr>
<![endif]-->

<div style="display: table; width: 100%;">
  <!--[if true]><td width="50%" style="padding-right: 0;"><![endif]-->
  <!--[if !true]><!-->

    <div class="column" style="display: table-cell; width: 50%; padding-right: 0;">
  <!--<![endif]-->
      <img height="auto" src="https://via.placeholder.com/600x400/60bcde/ffffff/?text=Content+Image" width="300" alt="" class="fill" style="display: block; width: 300px; height: auto;">
  <!--[if !true]><!-->
    </div>
  <!--<![endif]-->
  <!--[if true]>
    </td>
    <td width="50%" style="padding-left: 14px;">
  <![endif]-->
  <!--[if !true]><!-->

    <div class="column" style="display: table-cell; width: 50%; padding-left: 14px; vertical-align: middle;">
  <!--<![endif]-->
      <p style="margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 24px; color: #333333; font-weight: 300;">Text next to an image, in a two-colum section, split 50/50.</p>
  <!--[if !true]><!-->
    </div>
  <!--<![endif]-->
  <!--[if true]></td><![endif]-->

</div>
<!--[if true]>
  </tr>
</table>
<![endif]-->

Images for Outlook

Another common issue is how Outlook handles image sizes for images that have more pixels that account for high density/retina displays. Normally, you just need to scale the image down by setting the output width or height of the image in your HTML. For Outlook, you'll need to make sure to include both width and height properties.

So what about background images? That's a whole other thing, requiring VML code. First defining it in the HTML element:

<html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

Then adding DPI settings in your head (more info on DPI scaling):

<!--[if mso]>
<noscript>
  <xml>
    <o:OfficeDocumentSettings>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml>
</noscript>
<![endif]-->

And the VML around your code (more info on VML for background images):

<div style="background-image: url(https://via.placeholder.com/1200x600/60bcde/ffffff/?text=Background+Image); background-repeat: no-repeat; background-size: cover; background-position: top center; width: 100%; height: 300px;">
  <!--[if mso]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" fillcolor="#333333" style="width: 450pt; height: 300px; text-align: center;"> <v:fill type="frame" size="450pt,300pt" aspect="atleast" alignshape="true" src="https://via.placeholder.com/1200x600/60bcde/ffffff/?text=Background+Image" data-block="feature-bg" color="#ffffff"> <v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text: true;"><![endif]-->
  <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
    <tr>
      <td style="height: 260px; padding: 14px; vertical-align: middle; text-align: center;">
        <h2 style="margin: 0; font-family: Georgia, Times New Roman, serif; font-size: 28px; line-height: 32px; color: #333333; font-weight: normal;">Headline/primary title text</h2>
      </td>
    </tr>
  </table>
  <!--[if mso]></v:textbox></v:rect><![endif]-->
</div>

Details for Outlook

While writing code for Outlook can be a pain, don't fall into the trap of trying to make your email perfect for Outlook. You don't need to try and support rounded corners or hover effects, for example. As long as it's readable, allow some aspects of your email's design to look a little different in Outlook.

Beyond these main techniques, you may run into issues with certain versions of Outlook. These resources may help you troubleshoot:

Blocks Edit works around your Outlook code to allow you to make your template visually editable.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr