Outlook email checker

Why Outlook breaks emails

Classic Outlook for Windows — Outlook 2007 through 2021 and the “classic” Microsoft 365 desktop app — doesn't use a web browser to display email. It uses the rendering engine from Microsoft Word, which understands tables, a subset of inline CSS and Microsoft's own VML graphics format, and very little else.

The new Outlook for Windows, Outlook on the web and Outlook for Mac use modern browser engines and are far more forgiving. But classic Outlook is still common in offices, so if you send to businesses, it's worth building for it. The good news: the fixes below don't hurt any other client.

1. Lay out with tables that have explicit widths

Word ignores max-width, display:flex, display:grid and float, and it ignores width on a <div>. A container built that way stretches to the full width of the reading pane, and columns stack. Use tables with a width attribute for anything structural.

If you prefer a fluid, div-based layout for modern clients, wrap it in a “ghost table”: a fixed-width table that only Outlook can see, thanks to conditional comments.

<!--[if mso]>
<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<div style="max-width:600px; margin:0 auto;">
  <!-- your content -->
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->

On every layout table, add role="presentation" (so screen readers don't announce it as a data table) and cellpadding="0" cellspacing="0" border="0" to remove Outlook's default gaps.

2. Give background images a VML fallback

Classic Outlook doesn't display CSS background images at all. To show one, you draw it with VML inside an Outlook-only conditional comment. Always keep a solid background-color too: it's what people see while images load, when they're blocked, and in clients that drop backgrounds.

<td background="https://cdn.acme.com/email/hero.jpg" bgcolor="#1e293b" width="600" valign="top"
    style="background-image:url('https://cdn.acme.com/email/hero.jpg'); background-color:#1e293b; background-size:cover;">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:320px;">
    <v:fill type="frame" src="https://cdn.acme.com/email/hero.jpg" color="#1e293b" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div style="padding:64px 32px; color:#ffffff;">
    <!-- headline and text that sit on the image -->
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

VML needs a fixed height. If your text could grow (translations, long headlines), leave generous room or keep critical text off the image.

3. Build “bulletproof” buttons

Outlook ignores padding, display:inline-block and border-radius on links. A button styled only on the <a> tag shows up as a thin coloured strip around the text — or as a plain link. Put the colour and padding on a table cell instead:

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td bgcolor="#f97316" style="border-radius:24px; padding:14px 28px;">
      <a href="https://acme.com/spring"
         style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; text-decoration:none; display:inline-block;">
        Shop the collection
      </a>
    </td>
  </tr>
</table>

Outlook will show square corners and only the text will be clickable, but the button looks right everywhere. If you need rounded corners and a fully clickable area in Outlook, add a VML <v:roundrect> version inside a conditional comment — free generators such as buttons.cm write it for you.

4. Put spacing on table cells

Padding on <div>, <p> and <span> is ignored or applied unpredictably, and margins are unreliable on most elements. Spacing that has to hold belongs on a <td> as padding, or in an empty spacer row with a fixed height.

<td style="padding:24px 32px; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:24px;">
  <p style="margin:0 0 16px;">First paragraph.</p>
  <p style="margin:0;">Second paragraph.</p>
</td>

5. Set image widths with attributes, and fix DPI scaling

Outlook ignores CSS widths on images and shows them at their file size, so a 1200px retina image blows out the layout. Always set a width attribute in plain pixels (width="552", no “px”) and keep CSS for other clients: style="width:100%; max-width:552px; height:auto; display:block;".

On Windows machines with display scaling (for example 125% or 150%), Outlook can also resize images and widths inconsistently. Adding Office's DPI setting to the <head> keeps everything at 96 DPI:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <!--[if mso]>
  <noscript><xml><o:OfficeDocumentSettings>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings></xml></noscript>
  <![endif]-->
</head>

6. Give web fonts a fallback Outlook will use

Classic Outlook doesn't load web fonts, and when it can't use the first font in your stack it can fall back to Times New Roman instead of the next font you listed. End every stack with web-safe fonts, and force a fallback for Outlook only:

<!--[if mso]>
<style>
  body, table, td, p, a, h1, h2, h3 { font-family: Arial, Helvetica, sans-serif !important; }
</style>
<![endif]-->

7. Design for what Outlook ignores

Some CSS simply won't render in classic Outlook, and that's fine as long as the email still works without it:

• border-radius — corners are square.
• box-shadow, text-shadow, gradients — they disappear, so never rely on them for contrast. Put a solid background-color behind any gradient.
• Animations and transitions — the first frame (or nothing) is shown.
• position, float, flex and grid — use tables instead.

Outlook checklist before you send

1. Containers are tables with width attributes, or fluid divs wrapped in ghost tables.
2. Every background image has a VML fallback and a solid background colour.
3. Buttons are coloured table cells (or VML), not padded links.
4. Padding lives on <td> elements.
5. Every image has a width attribute, and the head has the 96 DPI setting.
6. Fonts end with Arial/Helvetica/sans-serif, with an Outlook-only fallback.
7. You've sent a real test to a classic Outlook inbox (or a screenshot service) before the campaign.

Paste your email into the checker above — it flags every item on this list except the final test send.