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.
Because Gmail mobile apps often strip <style> blocks and Outlook on Windows ignores max-width, pure media query responsive design fails. The most reliable strategy is hybrid fluid design: use display: inline-block with percentage widths for mobile wrapping, paired with MSO ghost tables for Outlook desktop.
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 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:
<!-- 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. For foundational structure, explore our HTML email guide, and review Outlook ghost tables for hybrid column stacking.
Frequently Asked Questions
Why do @media queries fail in Gmail mobile apps?
Across non-Google Workspace accounts and third-party IMAP accounts, the Gmail app for iOS and Android often strips or ignores <style> blocks and @media rules entirely. Building layout structures with fluid hybrid percentages ensures responsive stacking even when media queries are stripped.
What is the difference between fluid and hybrid responsive design?
Fluid layouts use percentage widths (width: 100%; max-width: 600px). Hybrid (spongy) design layers Microsoft MSO ghost tables inside fluid percentage layouts so that Word-based Outlook on Windows gets rigid columns while mobile devices stack freely.
What is the industry standard width for HTML emails?
600 pixels is the universal standard container width. It fits comfortably within desktop webmail preview panes (Gmail, Outlook, Yahoo) without horizontal scrollbars, while adapting cleanly to mobile screens.
How do I prevent dark mode from inverting brand colors in responsive emails?
Include <meta name='color-scheme' content='light dark'> and <meta name='supported-color-schemes' content='light dark'> in the document <head>, and use @media (prefers-color-scheme: dark) with !important overrides for background and text colors.
See how your email renders on every device
Test responsive behaviour across 21 clients (desktop, mobile, and webmail) with per-client compatibility scores.
Preview your emailFree plan, 30 previews/day
- •W3C CSS Working Group: Media Queries Level 4 and Responsive Design Specifications
- •Can I Email: Media query and CSS support comparison across mobile email clients
- •Emailens Engine: 21-Client Responsive and Dark Mode Simulation Engine
Reviewed by Philippe KAM · Last updated: Sep 6, 2026
Building next-generation email preview and QA infrastructure for developers. Focused on reverse-engineering rendering engines across Outlook (Word MSO & New Outlook), Gmail, and Apple Mail to eliminate email rendering bugs before dispatch.