A responsive HTML email needs two layers of strategy working together. Media queries handle clients that support them (Apple Mail, most modern clients). A fluid foundation handles everything else, including Outlook’s legacy Word-based renderer, which ignores media queries entirely. Build the fluid layer first, then progressively enhance with media queries on top. That way your email adapts on every client, not just the ones with full CSS support.
This tutorial walks through each layer with a working code snippet at the end.
Why Table-Based Layout Is Still the Starting Point
Email rendering has not caught up with the web. Outlook for Windows (versions up to 2021) uses Microsoft Word’s HTML engine, not a browser engine. The Word renderer understands a limited subset of CSS and ignores flexbox, CSS grid, and in many cases max-width. So table-based layout remains the safe structural baseline for 2026 deliveries, even though it feels archaic.
The standard structure is an outer <table> set to width="100%" that creates a full-width container, and an inner <table> capped at 600px that holds your actual content. All layout goes through <table>, <tr>, and <td> elements. Never use CSS flexbox or grid for layout you need to survive Outlook.
<!-- Outer wrapper: full width -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<!-- Inner content table: capped at 600px -->
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 24px;">
Your content here
</td>
</tr>
</table>
</td>
</tr>
</table>Two things to note: role="presentation" tells screen readers to ignore the table structure, and all critical styles go inline on <td> elements. Styles in <head> are stripped by Gmail and some other webmail clients when they inject your email into their page.
The Fluid/Hybrid Approach: Responsive Without Media Queries
The hybrid (also called “spongy”) technique makes your email adapt to screen size without relying on media queries at all. According to Email on Acid, hybrid design uses “percentage-based widths, max-widths, and clever workarounds for Outlook clients” to achieve universal compatibility. Because it doesn’t depend on media query support, it works in Gmail’s mobile app and every other client that strips or ignores @media rules.
The core pattern uses width: 100% with max-width to let columns fill available space on mobile while constraining them on desktop:
<div style="display: inline-block; width: 100%; min-width: 200px; max-width: 300px; vertical-align: top;">
Column content
</div>On a wide viewport, two such <div> elements sit side-by-side (each 300px). On a narrow viewport, they stack because there isn’t room for both at their min-width. No media query needed.
The Outlook Ghost Table
Outlook does not respect max-width, so the fluid pattern breaks there: columns expand to fill the full pane width. The fix is a “ghost table”: a fixed-width <table> wrapped in MSO conditional comments that Outlook reads but other clients ignore.
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td width="300">
<![endif]-->
<div style="display: inline-block; width: 100%; min-width: 200px; max-width: 300px; vertical-align: top;">
Left column
</div>
<!--[if mso]>
</td>
<td width="300">
<![endif]-->
<div style="display: inline-block; width: 100%; min-width: 200px; max-width: 300px; vertical-align: top;">
Right column
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->Other clients see only the <div> elements and let them flow fluidly. Outlook sees the fixed table cells. Both get a usable layout.
Adding Media Queries for Supported Clients
Apple Mail, iOS Mail, and Samsung Mail all support media queries. Together, Apple devices accounted for roughly 46% of email opens tracked by Litmus in early 2026, making media query enhancements worth adding on top of the fluid foundation.
Place your @media rules in a <style> block in <head>. Because inline styles take cascade precedence, you need !important to override them:
<head>
<style>
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
.column {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.cta-button {
width: 100% !important;
text-align: center !important;
}
}
</style>
</head>Also add the viewport meta tag inside <head>. Without it, mobile browsers scale the email to fit, which can make a fluid 600px layout render tiny:
<meta name="viewport" content="width=device-width, initial-scale=1">Fluid Images and Buttons
Images that aren’t constrained will overflow narrow viewports. The standard fix is max-width: 100% with height: auto:
<img src="hero.jpg" width="600" alt="Hero image"
style="display: block; max-width: 100%; height: auto; border: 0;">The width="600" HTML attribute is for Outlook (which ignores the CSS). Other clients use the inline max-width: 100%. display: block removes the whitespace gap that appears below images in table cells.
For buttons, avoid <a> tags styled as buttons: Outlook clips padding and renders them inconsistently. Use a table-based button instead:
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td style="border-radius: 4px; background-color: #0066ff;">
<a href="https://example.com"
style="display: inline-block; padding: 12px 24px; color: #ffffff;
font-family: Arial, sans-serif; font-size: 16px;
text-decoration: none; font-weight: bold;">
Get Started
</a>
</td>
</tr>
</table>Minimal Working Responsive Email Snippet
Here’s a complete single-column email with a header, body text, image, and CTA button. It uses the fluid foundation plus a media query for additional mobile tweaks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Responsive Email</title>
<style>
@media screen and (max-width: 600px) {
.email-container { width: 100% !important; }
.email-body { padding: 16px !important; }
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4; font-family: Arial, sans-serif;">
<!-- Outer wrapper -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"
style="background-color: #f4f4f4;">
<tr>
<td align="center" style="padding: 24px 0;">
<!-- Email container -->
<table class="email-container" role="presentation" width="600"
cellpadding="0" cellspacing="0" border="0"
style="background-color: #ffffff; border-radius: 4px;">
<!-- Header -->
<tr>
<td style="background-color: #0066ff; padding: 24px; text-align: center;
border-radius: 4px 4px 0 0;">
<p style="margin: 0; color: #ffffff; font-size: 20px; font-weight: bold;">
Your SaaS Product
</p>
</td>
</tr>
<!-- Hero image -->
<tr>
<td style="padding: 0;">
<img src="https://via.placeholder.com/600x200" width="600" alt="Feature overview"
style="display: block; max-width: 100%; height: auto; border: 0;">
</td>
</tr>
<!-- Body copy -->
<tr>
<td class="email-body" style="padding: 32px 24px;">
<h1 style="margin: 0 0 16px; font-size: 22px; color: #111111; font-weight: bold;">
Subject line mirrors here
</h1>
<p style="margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: #444444;">
Your main message goes here. Keep the most important point in the first
sentence. Readers scan on mobile; frontload the value.
</p>
<!-- CTA button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0"
align="left">
<tr>
<td style="border-radius: 4px; background-color: #0066ff;">
<a href="https://example.com"
style="display: inline-block; padding: 12px 24px; color: #ffffff;
font-size: 16px; text-decoration: none; font-weight: bold;">
Get Started
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 16px 24px; text-align: center; border-top: 1px solid #eeeeee;">
<p style="margin: 0; font-size: 12px; color: #999999;">
You're receiving this because you signed up at example.com.
<a href="{{unsubscribe_url}}" style="color: #999999;">Unsubscribe</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Testing Before You Send
Code that looks correct can still break in specific clients. The two non-negotiables to test before any send:
- Outlook 2019 / 2021 on Windows: The Word-engine clients. If it breaks here, check your ghost tables and make sure layout-critical styles are on
<td>elements, not divs. - Apple Mail on iOS: The largest single client by opens. Test both light and dark mode.
Beyond those, Litmus and Email on Acid both provide screenshot previews across 90+ client/device combinations. Use them for any template that goes to a large list.
One practical note: Microsoft has announced October 2026 as the end-of-support date for Outlook versions using the Word rendering engine. The new Outlook for Windows uses a Chromium-based engine that supports standard CSS. The ghost table and MSO conditional comment patterns will become unnecessary as that transition completes, but they’re still required for anyone on Outlook 2016-2021 today.
If your team uses React to build templates, react-email generates the same table-based HTML from React components, removing the need to write the repetitive markup by hand.
Frequently Asked Questions
Do I still need table-based layout for HTML email in 2026?
For anything that needs to reach Outlook 2016-2021 on Windows, yes. Those clients use Microsoft Word’s rendering engine, which does not support CSS flexbox, grid, or max-width. Table-based layout is the only reliable structural approach until the Outlook transition to the Chromium engine is complete (end-of-support is October 2026, but adoption will be gradual).
What is the difference between responsive and fluid/hybrid email design?
Responsive email uses CSS media queries to change layout at specific breakpoints. Fluid/hybrid email uses percentage widths and max-width so columns adapt naturally to viewport width without any media query at all. Hybrid is more universally compatible because some clients (including several Gmail app versions) strip or ignore media queries. The recommended approach is hybrid as a foundation, with media queries added on top for clients that support them.
Why won’t my media queries work in Gmail?
Gmail strips the <style> block from <head> when it injects your email into its interface. Media queries inside that block are removed. The workaround is to use fluid/hybrid layout as your base so the email is already mobile-adapted without needing media queries. Gmail on iOS and Android will render the fluid version correctly.
What width should I use for an HTML email?
600px is the standard maximum width. It fits comfortably in the preview pane of most desktop email clients and scales down cleanly on mobile. Set the inner content table to width="600" (HTML attribute for Outlook) and add max-width: 600px inline CSS for other clients.
Why does my HTML button look broken in Outlook?
Outlook clips padding on anchor tags styled as buttons. Use a table-based button pattern instead: wrap the <a> tag inside a <td> that carries the background color, border-radius, and padding. The link inherits the cell’s dimensions reliably across Outlook versions.
Do I need the viewport meta tag in email?
Yes, for mobile browsers rendering your email in a webview. Without <meta name="viewport" content="width=device-width, initial-scale=1">, some mobile browsers scale the email to fit the screen, making a 600px fluid layout appear tiny. The tag tells the browser to use the device’s actual width as the viewport.
I’ve spent my career building software at scale with a soft spot for email: deliverability, lifecycle campaigns, and getting messages to actually land. I started Coldletter to fix what bugged me about transactional and marketing email tools. I’m based in Vancouver.