Mar 4, 2026·8 min read

Responsive Email Design: A Developer's Guide

Making emails look good on mobile isn't as simple as adding a viewport meta tag. Email clients handle responsive design in wildly different ways. Here's what actually works.

Three approaches to responsive email

There are three main strategies, each with different tradeoffs in compatibility and control:

Fluid

Uses percentage-based widths and max-width. Works everywhere, including Gmail on mobile (which strips media queries). The safest default approach.

Pros

+ Universal support
+ No media queries needed
+ Simple to implement

Cons

- Limited control over breakpoints
- Can't completely rearrange layout

Hybrid (spongy)

Combines fluid percentage widths with MSO conditional comments for Outlook fixed widths. Best balance of compatibility and control.

Pros

+ Works in Outlook + mobile
+ Good control over widths
+ Progressive enhancement

Cons

- More complex markup
- MSO conditionals add code weight

Responsive

Uses @media queries to change layout at breakpoints. Most flexible, but Gmail on mobile strips media queries entirely.

Pros

+ Full layout control
+ Can hide/show elements
+ Desktop-first or mobile-first

Cons

- Gmail mobile ignores media queries
- Requires <style> block support

Media query support across clients

Before choosing an approach, check which clients your audience uses. Here's the current media query support landscape:

Client	@media Support
Apple Mail	Full
iOS Mail	Full
Outlook.com	Full
Outlook (Windows)	None
Gmail (Web)	Partial (class-based only)
Gmail (Android)	None
Gmail (iOS)	None
Yahoo Mail	Full
Samsung Mail	Full
Thunderbird	Full

Fluid layout example

The fluid approach is the safest default. It uses percentage widths with max-width, wrapped in MSO conditionals for Outlook's fixed-width requirement:

Fluid layout

<!-- Fluid two-column layout -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding: 0 20px;">

      <!--[if mso]><table role="presentation" width="600" align="center"
        cellpadding="0" cellspacing="0"><tr><td><![endif]-->

      <div style="max-width: 600px; margin: 0 auto;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <!-- Left column: fluid 50% -->
            <td style="width: 50%; padding-right: 10px; vertical-align: top;">
              <img src="image.png" alt="Feature"
                style="max-width: 100%; height: auto;" />
            </td>
            <!-- Right column: fluid 50% -->
            <td style="width: 50%; padding-left: 10px; vertical-align: top;">
              <p style="margin: 0; font-family: Arial, sans-serif;
                font-size: 14px; line-height: 1.6; color: #333;">
                Your content here.
              </p>
            </td>
          </tr>
        </table>
      </div>

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

    </td>
  </tr>
</table>

MSO conditional comments

Microsoft Outlook (Windows) ignores max-width and needs explicit table widths. Conditional comments let you serve different markup to Outlook without affecting other clients:

MSO conditionals

<!-- Fixed width for Outlook, fluid for everyone else -->
<!--[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 email content here -->
</div>

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

<!-- Outlook-only content -->
<!--[if mso]>
<p>This paragraph only shows in Outlook.</p>
<![endif]-->

<!-- Hide from Outlook -->
<!--[if !mso]><!-->
<p>This paragraph is hidden from Outlook.</p>
<!--<![endif]-->

Mobile-first vs desktop-first for email

On the web, mobile-first is standard. For email, it depends on your audience:

B2C (consumer) — mobile-first. Over 60% of consumer emails are opened on mobile. Start with a single-column layout that stacks naturally.
B2B (enterprise) — desktop-first. Outlook on Windows dominates enterprise email, and it doesn't support media queries at all.

Dark mode considerations

Responsive design includes dark mode. Several clients (Apple Mail, Gmail, Outlook.com) auto-invert colors in dark mode, which can break carefully designed layouts. Add color-scheme: light dark meta tags and use prefers-color-scheme media queries to provide explicit dark mode styles.

See how your email renders on every device

Test responsive behaviour across 15 clients — desktop, mobile, and webmail — with per-client compatibility scores.

Preview your email

Free plan — 30 previews/day