← All Articles
ยท 14 min read

Email Client Compatibility: What Works Where

Know what CSS and HTML features work in which email clients.

Email client compatibility is the core challenge of HTML email development. Unlike web browsers, which have largely converged on standards, email clients render HTML and CSS inconsistently. This guide documents what works where.

If you want to avoid dealing with compatibility directly, email builders like Sequenzy and frameworks like MJML handle these issues for you. But understanding the landscape helps you make informed decisions.

The Major Email Clients

Outlook (Windows)

The most challenging client. Outlook 2007-2019 use Microsoft Word's rendering engine, not a browser engine. This means:

  • No CSS floats
  • No background images on divs (table cells work)
  • Limited margin/padding support
  • No CSS positioning
  • Tables are required for layout

Outlook 365 (new Outlook) is slightly better but still has significant limitations.

Gmail

Gmail strips style tags unless they are in the head (for some clients). It also removes many CSS properties. Key limitations:

  • Strips some CSS selectors
  • No support for embedded @media queries in some contexts
  • Requires inline styles for reliability
  • Blocks external images by default

Gmail App (mobile) has better CSS support than Gmail web in some areas.

Apple Mail (macOS/iOS)

The most capable email client. Uses WebKit, similar to Safari. Supports:

  • Media queries
  • CSS animation (limited use cases)
  • Background images
  • Modern CSS properties

If your audience is primarily Apple users, you have more design flexibility.

Yahoo Mail

Moderate CSS support. Strips some styles but less aggressively than Gmail. Supports background images with fallbacks.

Outlook.com (Hotmail)

Different from desktop Outlook. Uses a browser-based renderer. Better CSS support than desktop Outlook but still has quirks.

CSS Property Support

Safe to Use Everywhere

/* These work in all major clients */
color: #333333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 10px; /* on table cells */
width: 100%;
max-width: 600px;

Partial Support (Test Required)

/* Work in most clients, issues in Outlook */
border-radius: 4px; /* No Outlook support */
background-image: url(...); /* Use VML for Outlook */
box-shadow: ...; /* Limited support */
margin: 10px; /* Inconsistent in Outlook */

Avoid or Use Carefully

/* These cause problems */
display: flex; /* No email support */
display: grid; /* No email support */
position: absolute/relative; /* Very limited */
float: left/right; /* Outlook issues */
transform: ...; /* Limited support */
animation: ...; /* Only Apple Mail */

Layout Techniques

Tables for Structure

Tables remain the reliable layout method:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding: 20px;">
      <table width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td>Content here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Outlook Conditional Comments

Target Outlook specifically:

<!--[if mso]>
  <!-- Outlook-only code -->
  <table width="600"><tr><td>
<![endif]-->

  <div style="max-width: 600px;">
    Content for all clients
  </div>

<!--[if mso]>
  </td></tr></table>
<![endif]-->

VML for Outlook Background Images

Background images on sections require VML for Outlook:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="tile" src="background.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url(background.jpg); background-color: #ffffff;">
  Content here
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Images

Basic Image Code

<img
  src="https://example.com/image.jpg"
  alt="Description"
  width="600"
  height="300"
  style="display: block; max-width: 100%; height: auto; border: 0;"
>

Key attributes:

  • width/height: Set dimensions (Outlook needs these)
  • display: block: Removes gap below image
  • max-width: 100%: Responsive scaling
  • border: 0: Removes linked image border

Image Formats

  • JPG: Photos, complex images
  • PNG: Transparency, simple graphics
  • GIF: Animation (carefully)
  • SVG: Limited support, avoid in email
  • WebP: Not supported in Outlook

Fonts

Web-Safe Font Stack

font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, Times, serif;
font-family: 'Courier New', Courier, monospace;

Custom Fonts

Web fonts work in some clients (Apple Mail, iOS, some Android). Use with fallbacks:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>

<p style="font-family: 'Open Sans', Arial, sans-serif;">
  Text with custom font
</p>

Outlook and Gmail will use the fallback. Apple Mail will use the custom font.

Media Queries

Support varies significantly:

<style>
  @media screen and (max-width: 600px) {
    .mobile-full-width {
      width: 100% !important;
    }
    .mobile-hide {
      display: none !important;
    }
    .mobile-stack {
      display: block !important;
    }
  }
</style>

Media query support:

  • Apple Mail: Full support
  • iOS Mail: Full support
  • Gmail App (iOS): Support
  • Gmail App (Android): Support
  • Gmail (web): Limited
  • Outlook: No support

Using Email Builders for Compatibility

Email builders abstract away compatibility concerns. Sequenzy generates HTML that works across clients. You design visually, the tool handles the technical output.

Frameworks like MJML compile semantic markup to compatible HTML. You write clean code, the framework generates the nested tables and inline styles.

Testing tools like Litmus show rendering across 90+ clients. See issues before sending.

Testing Strategy

  1. Test in Outlook first. If it works there, it probably works everywhere.
  2. Check Gmail. CSS stripping can cause issues.
  3. Verify on mobile. Over 60% of opens are mobile.
  4. Test with images off. Ensure the message is clear without images.

The Bottom Line

Email client compatibility is complex but manageable. Stick to proven techniques: tables for layout, inline styles, web-safe fonts with fallbacks. Test across clients before sending.

For teams who want to avoid the complexity, tools like Sequenzy and MJML handle compatibility automatically. The output is tested, and you focus on content rather than rendering quirks.