How to create responsive email templates (fluid coding and media queries)
- Published : February 27, 2026
- Last Updated : February 27, 2026
- 0 Views
- 8 Min Read
Transactional emails—such as OTPs, password resets, account alerts, and order confirmations—play a critical role in user experience. Unlike marketing emails, they are time-sensitive, action-oriented, and expected to work flawlessly across devices and email clients.
With most transactional emails now opened on mobile devices, responsiveness is no longer optional. However, building responsive emails is fundamentally different from building responsive websites. Email clients can have limited CSS support, outdated rendering engines, and strict security restrictions.
This article explains how responsive transactional emails are built in practice, the different approaches used, and when to use fluid coding, hybrid layouts, and media queries. The later sections of the article will demonstrate these concepts using real HTML examples.
Why responsive transactional emails are harder
Responsive web design relies on modern browser features such as Flexbox, Grid, JavaScript, and advanced CSS selectors. Email clients, on the other hand:
Strip or ignore large parts of CSS.
Don’t support JavaScript.
Render HTML using outdated engines (e.g., Outlook desktop uses Microsoft Word).
Handle styles inconsistently across platforms.
Because of these constraints, responsive email design prioritizes predictability and resilience over visual sophistication.
What is a responsive email?
A responsive email is an email that adjusts its layout and content to display correctly across different screen sizes and email clients. It ensures that text is readable, layouts don’t break, and actions like links or buttons are easy to use on both desktop and mobile devices.
Common methods to create responsive email templates
There are three commonly used approaches to responsiveness in emails. Each solves a different problem and comes with its own compromises.
1. Fluid coding
Fluid coding is the most important and reliable method for responsive emails.
It creates layouts that automatically adapt to the available screen width without relying on knowing information about the display.
Fluid coding ensures that your email:
Automatically scales to the screen width.
Works even when media queries are ignored.
Renders reliably across major email clients.
Key characteristics:
Uses percentage-based widths (width="100%").
Decides maximum expansion of the content with max-width.
Relies on single-column layouts.
Uses table-based structure for compatibility across clients and devices.
Fluid coding ensures that emails resize naturally across devices and clients—even when advanced CSS is ignored.
2. Hybrid (spongy) layouts
Hybrid layouts combine fluid coding with the strategic use of CSS to improve compatibility across difficult clients like Outlook.
This method:
Uses fluid tables as the base.
Adds CSS fallbacks for problematic clients.
Avoids reliance on modern layout properties.
Hybrid layouts are commonly used in enterprise-grade transactional email systems where reliability is more important than visual flexibility.
3. Media queries
Media queries allow developers to apply CSS rules only when specific screen conditions are met, such as small mobile screens.
In email, media queries are used to:
Reduce padding on mobile.
Adjust font sizes slightly.
Improve spacing and readability.
However, media queries aren’t supported by all email clients. For this reason, they should never be the foundation of responsiveness, only an enhancement.
Step-by-step guide to creating a responsive transactional email (using fluid coding, inline styles, and media queries)
Step 1: Start with a fluid layout foundation
Fluid coding should be the foundation of your email template because, fluid coding ensures that your email:
Automatically scales to the screen width.
Works even when media queries are ignored.
Renders reliably across Outlook, Gmail, Apple Mail.
This is the non-negotiable base of responsive email.
These primary elements need to be fluid-coded:
Core layout
Typography
Images and media
CTA buttons
Hyperlinks
Fluid coding example
1. Core layout
<body style="margin:0; padding:0; background-color:#f4f5f7;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="100%"
style="max-width:600px; background-color:#ffffff;">
<tr>
<td style="padding:24px; font-family:Arial, sans-serif;">
<!-- Email content goes here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>Code explanation
Table format: Email clients don’t support modern layout engines. Tables remain a reliable layout across the board.
width="100%" (outer table): Allows the email to stretch across the full screen width of the device it’s being viewed on.
max-width:600px (inner table): Prevents the email from becoming too wide on desktop screens. The max width of the table is mapped to 600px.
Centered <td align="center">: Ensures consistent centering of the content across email clients.
2. Add mobile-safe typography
Typography is one of the most common responsiveness failures in transactional emails.
<h1 style="
margin:0 0 16px 0;
font-size:22px;
line-height:1.3;
color:#111827;
">
Verify your email
</h1>
<p style="
margin:0 0 16px 0;
font-size:16px;
line-height:1.5;
color:#374151;
">
Use the code below to complete verification.
</p>Code explanation
16px body text: Increases the text size in small devices. Makes the content of the body readable on mobile without needing to zoom in.
22px heading: Constrains heading or title text sized. Establishes clear hierarchy without overpowering small screens.
Line height ≥ 1.4: Adjusts the space between lines. It prevents cramped text on narrow displays.
Inline CSS: Safest for email client compatibility in place of div tags. This is a hybrid spongy layout most suitable for transactional emails.
3. Create a fluid, tap-friendly CTA button
Transactional emails often have one critical action. Unlike marketing emails, users should be able to perform the action without hindrance irrespective of the device or email client. That action must be easy to tap on mobile or smaller devices.
<table cellpadding="0" cellspacing="0" role="presentation" style="margin:24px 0;">
<tr>
<td align="center" style="background-color:#2563eb; border-radius:4px;">
<a href="{{action_url}}"
style="
display:inline-block;
padding:14px 28px;
font-size:16px;
color:#ffffff;
text-decoration:none;
font-family:Arial, sans-serif;
">
Verify Email
</a>
</td>
</tr>
</table>Code explanation
Table-based button: Remains primary and reliable format for most clients, especially Outlook.
padding:14px 28px: Padding instead of fixed height so the button scales itself to the screen with fluid coding.
Minimum tap size (~44px).
Text button: Text button instead of image. This works even when images are blocked.
4. Scalable images
Though images are usually not vital for transactional emails, having them rendered well builds trust and ensures a good brand identity.
<img src="logo.png"
alt="Company Logo"
width="120"
style="
max-width:100%;
height:auto;
display:block;
">Code explanation
max-width:100% : Allows the image to shrink and fit the display on smaller screens.
height:auto: Maintains the image’s aspect ratio.
display:block: Removes unwanted gaps below images.
The image is allowed to shrink but never overflow its container.
5. Hyperlinks
Hyperlinks are often used to provide additional information that could be important to users. When viewed on desktop, these links won’t look cluttered and are easily clickable. But the same doesn’t apply on a smaller screen. It’s best to convert them into buttons.
<a href="https://example.com"
style="
display:inline-block;
padding:12px 24px;
background-color:#10b981;
color:#ffffff;
font-size:16px;
text-decoration:none;
border-radius:4px;
">
Reset Password
</a>Code explained
display:inline-block: Lets a normal link behave like a button.
padding:12px 24px: Padding increases click/tap area.
background-color:#10b981: Background color and border radius make it appear as a button.
Step 2: Add media queries for enhancement
Fluid layouts make the email work. Media queries make the email more comfortable and aesthetic on small screens. They cannot be relied on for responsiveness.
Media query example (mobile enhancement)
<style>
@media screen and (max-width: 480px) {
.container {
padding: 16px !important;
}
.heading {
font-size: 20px !important;
}
}
</style>Code explanation
Target width ≤ 480px: This translates to “if the display screen size is less than 480px.” This is often the size of phones.
.container{padding: 16px !important;}: Reduce padding to prevent cramped layouts.
.heading {font-size: 20px !important; }: Slightly reduce heading size to avoid text wrapping.
The email must remain readable even if this CSS is ignored. That’s why fluid coding comes first.
Step 3: Apply media query classes safely
<td class="container" style="padding:24px;">
<h1 class="heading" style="font-size:22px;">Why inline + class?
Inline styles are the fallback.
Classes override only when media queries are supported.
Prevents layout breakage in email clients like Outlook.
Step 4: Add dynamic transactional content
Transactional emails carry information that’s personalized to each recipient and specific to the action that triggered it. They rely on injected system data that’s dynamic.
Example: OTP block
<p style="font-size:16px;">
Your verification code is:
</p>
<p style="
font-size:24px;
font-weight:bold;
letter-spacing:2px;
">
{{otp}}
</p>
<p style="font-size:14px; color:#6b7280;">
This code expires in {{expiry_minutes}} minutes.
</p>Step 5: Make images optional
<img src="{{logo_url}}"
width="120"
alt="Company name"
style="display:block; margin-bottom:16px;">Code explained
alt="Company name: Fallback for when the logo image doesn't load.
Production-ready responsive email template example
Here’s a full, production-ready, responsive HTML password reset email that uses fluid coding, inline styles, and safe media queries together—exactly as discussed in this article. You can copy-paste this into your ESP/SMTP/API payload.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Reset</title>
<!-- Media queries: optional enhancement only -->
<style>
@media screen and (max-width: 480px) {
.container {
padding: 16px !important;
}
.heading {
font-size: 20px !important;
}
.text {
font-size: 15px !important;
}
.cta a {
padding: 14px 20px !important;
}
}
</style>
</head>
<body style="margin:0; padding:0; background-color:#f4f5f7;">
<!-- Full-width wrapper (fluid) -->
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center">
<!-- Main container (fluid + constrained) -->
<table width="100%" cellpadding="0" cellspacing="0"
style="max-width:600px; background-color:#ffffff;">
<tr>
<td class="container"
style="
padding:24px;
font-family:Arial, Helvetica, sans-serif;
">
<!-- Logo (optional) -->
<img src="{{logo_url}}"
width="120"
alt="{{company_name}}"
style="
display:block;
max-width:100%;
height:auto;
margin-bottom:24px;
border:0;
">
<!-- Heading -->
<h1 class="heading"
style="
margin:0 0 16px 0;
font-size:22px;
line-height:1.3;
color:#111827;
">
Reset your password
</h1>
<!-- Body text -->
<p class="text"
style="
margin:0 0 16px 0;
font-size:16px;
line-height:1.5;
color:#374151;
">
Hi {{user_name}},
</p>
<p class="text"
style="
margin:0 0 24px 0;
font-size:16px;
line-height:1.5;
color:#374151;
">
We received a request to reset the password for your account.
Click the button below to choose a new password.
</p>
<!-- CTA Button (fluid, tap-friendly) -->
<table role="presentation" cellpadding="0" cellspacing="0"
class="cta" style="margin:0 0 24px 0;">
<tr>
<td align="center"
style="
background-color:#2563eb;
border-radius:4px;
">
<a href="{{reset_password_url}}"
style="
display:inline-block;
padding:14px 28px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
text-decoration:none;
">
Reset Password
</a>
</td>
</tr>
</table>
<!-- Secondary info -->
<p style="
margin:0 0 8px 0;
font-size:14px;
line-height:1.4;
color:#6b7280;
">
This link will expire in {{expiry_minutes}} minutes.
</p>
<p style="
margin:0 0 24px 0;
font-size:14px;
line-height:1.4;
color:#6b7280;
">
If you didn’t request a password reset, you can safely ignore this email.
</p>
<!-- Footer -->
<p style="
margin:24px 0 0 0;
font-size:12px;
line-height:1.4;
color:#9ca3af;
">
© {{year}} {{company_name}}<br>
{{company_address}}
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Responsive transactional email template checklist
Use this checklist during development, code review, and pre-send QA to ensure your transactional email templates are responsive, reliable, and production-safe.
1. Structural foundation
Uses table-based layout (no div-based primary structure).
Outer container is width="100%" with a max-width (typically 600px).
Content is single-column.
No absolute or fixed positioning.
No reliance on CSS Grid or Flexbox.
Logical HTML reading order (top → bottom).
2. Mobile responsiveness
Layout scales naturally on screens ≤ 480px.
No horizontal scrolling on mobile.
Text readable without zooming.
Padding is sufficient on small screens (≥ 16px).
Media queries are optional enhancements, not required for usability.
3. Typography
Body text ≥ 14–16px.
Headings ≥ 20px.
Line height ≥ 1.4.
Uses system or web-safe fonts only.
No light font weights (< 400).
Text color has a strong contrast against background.
4. Content hierarchy
The purpose of the email is immediately clear.
The primary message appears above the fold.
One primary action only.
Secondary information is clearly separated.
No marketing or promotional distractions.
5. CTA/action elements
CTA is built using HTML + tables, not images.
Tap target ≥ ~44px height.
High contrast between button and background.
Clear action-oriented label.
Only one primary CTA.
Links aren’t too close together on mobile.
6. Images and assets
Email remains fully usable with images disabled.
No image-only buttons.
No critical text embedded in images.
All images include descriptive alt text.
Images are lightweight and optimized.
No background images required for layout.
7. Dynamic data safety
All user-generated content is HTML-escaped.
Placeholders are clearly defined and documented.
Long dynamic values (names, IDs) don’t the break layout.
Dates, currencies, and numbers are localized if required.
Empty or missing variables fail gracefully.
8. Accessibility
Sufficient color contrast (WCAG AA or better).
Links are descriptive (not “Click here”).
Content doesn’t rely on color alone for meaning.
Logical reading order for screen readers.
Font sizes remain readable on small screens.
9. Performance and payload size
CSS is inline (or minimal <style> block).
No external scripts or fonts.
Minimal table nesting.
Email size well below clipping limits.
Fast to load on slow mobile networks.
Before shipping, confirm:
Works without images.
Works without media queries.
Works in email clients with outdated rendering techniques.
Primary action is obvious on mobile.
No unnecessary visual complexity.
If it passes all five, it’s likely production-safe.
Wrapping up
Responsive transactional emails are built using a layered approach and a combination of multiple techniques.
Fluid coding forms the foundation by allowing layouts to adapt naturally to different screen sizes.
Hybrid (spongy) layouts add structural safety for restrictive email clients, ensuring consistent rendering across environments.
Media queries then act as optional enhancements, improving the mobile experience where supported without compromising core usability.
By combining these approaches thoughtfully, developers can create transactional emails that are readable, actionable, and dependable across devices and clients. The HTML examples in this article put these concepts into action, demonstrating how to apply fluid coding, hybrid techniques, and media queries together to build production-ready responsive transactional email templates.
