← All Articles
· 14 min read

Email Client Compatibility: What Works Where

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

TL;DR: Email Client Compatibility - What Actually Works

Email client compatibility is the single biggest challenge in HTML email development. Unlike web browsers that have standardized on modern rendering engines, email clients use fragmented technology that dates back decades. Outlook uses Microsoft Word's rendering engine - yes, the same Word for writing documents. Gmail strips CSS for security. Apple Mail supports modern CSS. This fragmentation means you must code for the lowest common denominator or use tools that handle compatibility automatically.

The reality in 2026: Flexbox and Grid do not work in email. CSS positioning (absolute, relative, fixed) is unreliable. Floats fail in Outlook. Background images require VML code for Outlook support. Media queries work in some clients but not others. Tables are still the only safe layout approach. These limitations feel archaic, but they're the reality of building emails that render consistently across Gmail, Outlook, Apple Mail, and the dozens of other clients your recipients use.

The solution: Use HTML email builders that generate compatible code automatically. Platforms like Sequenzy, MJML, and Stripo output HTML that works across 90+ clients. You design visually or write clean markup, and the platform handles the table-based layouts, inline styles, and Outlook-specific fixes. Test in Outlook first - if your email works there, it probably works everywhere. Focus your testing on Outlook (Windows), Gmail (web and mobile), and Apple Mail - these represent the vast majority of your audience.

Best practices: Stick to safe CSS properties (color, font-size, padding on table-cells, width, border). Use inline styles for critical rendering. Avoid modern CSS that requires prefixing or has limited support. Embrace tables for layout structure. Test across clients before every send. Never assume what works in a browser will work in email - email HTML is fundamentally different from web HTML. For teams who want to bypass the complexity entirely, modern drag-and-drop email builders provide visual interfaces that generate compatible code while letting you focus on content rather than debugging rendering quirks.

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.

Comparison: Email Builders and Compatibility Handling

Platform Compatibility Approach Outlook Support Price
Sequenzy Automatic table-based layouts, VML for Outlook, inline styles Full Outlook compatibility including background images $19/mo, free trial
MJML Framework compiles to email-safe HTML with tables Conditional comments for Outlook fixes Free open-source
Stripo Drag-and-drop with automatic compatibility handling Outlook-specific code generation $15/mo and up
BEE Free Visual builder with tested email templates Basic Outlook compatibility $25/mo and up
Litmus Testing platform with 90+ client previews All Outlook versions tested $99/mo for testing

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.

Best Practices for Email Client Compatibility

1. Test in Outlook First

Outlook (Windows) is the most restrictive email client. If your email works there, it probably works everywhere. Make Outlook your primary testing target, then verify in Gmail and Apple Mail. Visual email builders test templates across all major clients automatically.

2. Use Tables for Layout Structure

Tables remain the only safe layout method in email. Use nested tables for complex layouts. All modern HTML email builders generate table-based structures automatically, ensuring compatibility without manual coding.

3. Inline Critical Styles

Gmail strips embedded styles. Always inline critical CSS (colors, fonts, spacing). Use CSS inliner tools or let your email platform handle this automatically. Inline styles work in every client.

4. Provide Font Fallbacks

Custom web fonts work in some clients but not all. Always provide web-safe fallbacks (Arial, Helvetica, Georgia). Specify fallbacks in your font-family stack to ensure text remains readable everywhere.

5. Use Conditional Comments for Outlook

Outlook-specific issues require Outlook-specific solutions. Use conditional comments to target Outlook with fixes like VML for background images or fixed-width containers. Modern email builders generate these conditionals automatically.

Frequently Asked Questions

Can I use Flexbox or Grid in email?

No. Flexbox and Grid do not work reliably in email clients. Use tables for layout instead. Some frameworks simulate Flexbox-like behavior using tables, but actual CSS Flexbox is not supported.

Why does Outlook use Word's rendering engine?

Microsoft switched Outlook to Word's rendering engine in 2007 for security reasons and document consistency. The decision fragmented email rendering, and Microsoft has kept the engine ever since. This is why Outlook requires special handling.

Do I need to code email HTML manually?

No. HTML email builders like Sequenzy, Stripo, and BEE provide drag-and-drop interfaces. Frameworks like MJML let you write clean markup that compiles to compatible HTML. Manual coding is only necessary for highly customized requirements.

Which email clients should I test in?

Focus on the big three: Outlook (Windows), Gmail (web and mobile), and Apple Mail. These represent the majority of your audience. Use testing tools like Litmus for comprehensive previews across 90+ clients.

Why does Gmail strip my CSS?

Gmail removes embedded styles and many CSS properties for security reasons. This prevents malicious emails from using JavaScript or exploiting vulnerabilities. Always inline critical styles to ensure Gmail renders your email correctly.

Are email builders worth the cost?

For most teams, yes. The time saved on compatibility issues, testing, and debugging typically outweighs the monthly cost. Sequenzy at $19/mo is far cheaper than the hours developers spend debugging Outlook rendering issues. Choose based on your team's skills and email volume.