Over 60% of emails are opened on mobile devices. If your emails aren't responsive, you're frustrating the majority of your audience. This guide covers everything you need to create emails that adapt beautifully to any screen size.
Responsive Email Basics
Responsive email design uses three main techniques:
- Fluid layouts - Percentage-based widths that scale
- Media queries - CSS rules for specific screen sizes
- Scalable images - Images that resize with their containers
The Foundation: Viewport Meta Tag
Always include this in your email's <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">This tells mobile devices to render at actual device width instead of desktop width.
Fluid Table Layouts
Use percentages with max-width for tables that scale:
<table role="presentation" style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td style="padding: 20px;">
Content here
</td>
</tr>
</table>Responsive Images
Make images scale within their containers:
<img src="image.jpg"
width="600"
style="display: block; width: 100%; max-width: 600px; height: auto;"
alt="Description" />Key properties:
width: 100%- Fills container widthmax-width: 600px- Prevents stretching beyond original sizeheight: auto- Maintains aspect ratiodisplay: block- Removes bottom gap
Media Queries for Email
Media queries let you apply different styles at different widths:
<style>
/* Desktop styles (default) */
.column {
width: 50%;
display: inline-block;
}
/* Mobile styles */
@media screen and (max-width: 600px) {
.column {
width: 100% !important;
display: block !important;
}
.mobile-center {
text-align: center !important;
}
.mobile-padding {
padding: 10px !important;
}
.mobile-hide {
display: none !important;
}
}
</style>Note: Gmail strips <style> blocks in its mobile app. Always inline critical styles as fallbacks.
Stacking Columns on Mobile
Create columns that stack vertically on small screens:
<!--[if mso]>
<table role="presentation" width="100%">
<tr>
<td width="50%">
<![endif]-->
<div class="column" style="display: inline-block; width: 100%; max-width: 280px; vertical-align: top;">
<table role="presentation" style="width: 100%;">
<tr>
<td style="padding: 10px;">
Column 1 content
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td width="50%">
<![endif]-->
<div class="column" style="display: inline-block; width: 100%; max-width: 280px; vertical-align: top;">
<table role="presentation" style="width: 100%;">
<tr>
<td style="padding: 10px;">
Column 2 content
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->Mobile-Friendly Buttons
Buttons should be large enough to tap easily (44x44px minimum):
<table role="presentation" cellpadding="0" cellspacing="0">
<tr>
<td style="border-radius: 6px; background: #7C3AED;">
<a href="https://example.com" style="
display: inline-block;
padding: 15px 30px;
font-size: 16px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
">
Shop Now
</a>
</td>
</tr>
</table>Font Sizing for Mobile
Increase font sizes on mobile for readability:
<style>
.body-text {
font-size: 16px;
line-height: 1.5;
}
@media screen and (max-width: 600px) {
.body-text {
font-size: 18px !important;
}
.headline {
font-size: 24px !important;
}
}
</style>Prevent iOS Text Resizing
iOS sometimes resizes text unexpectedly. Prevent this:
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}Disable iOS Auto-Linking
iOS automatically turns dates, addresses, and phone numbers into links. Control this:
<!-- Add to head -->
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<!-- For specific elements -->
<span style="color: #333333; text-decoration: none;">
<a style="color: #333333; text-decoration: none;">
123 Main Street
</a>
</span>Testing Responsive Emails
Mailglass Lite offers three preview modes:
- Desktop (800px) - Standard email client view
- Tablet (768px) - iPad-style preview
- Mobile (375px) - iPhone-style preview
Toggle between them to see how your email responds at each breakpoint.
Responsive Design Checklist
- ☐ Viewport meta tag present
- ☐ Tables use percentage widths with max-width
- ☐ Images are fluid (100% width, auto height)
- ☐ Multi-column layouts stack on mobile
- ☐ Buttons are at least 44x44px tap targets
- ☐ Font sizes increase on mobile
- ☐ Critical styles inlined (Gmail fallback)
- ☐ Tested on real devices
Email Client Support for Media Queries
| Client | Media Query Support |
|---|---|
| Apple Mail | ✅ Full |
| iOS Mail | ✅ Full |
| Gmail (Web) | ✅ Full |
| Gmail (Mobile) | ❌ No (strips <style>) |
| Outlook.com | ✅ Partial |
| Outlook Desktop | ❌ No |
| Yahoo Mail | ✅ Full |
Key Takeaways
- Always include the viewport meta tag
- Use fluid tables with max-width constraints
- Make images responsive with 100% width
- Stack columns on mobile with media queries
- Inline fallback styles for Gmail
- Test at desktop, tablet, and mobile widths
Ready to test your responsive emails? Try Mailglass Lite with built-in desktop, tablet, and mobile preview modes.