Responsive Email Design: A Practical Guide
Most people open email on a phone. Here's how to design emails that adapt cleanly to small screens without breaking on desktop clients.
Overview
A majority of email opens happen on a phone, so an email that only looks good on a desktop monitor is broken for most of your audience. Responsive email design means the layout adapts to the screen: text stays readable, buttons stay tappable, and a multi-column desktop layout collapses to a single clean column on mobile. The constraints of email HTML make this trickier than web responsive design, but the principles are simple.
Mobile-first email design principles
Over half of email opens happen on a phone, so design for the small screen first and let desktop scale up. The concrete rules: a single-column layout (it works everywhere and can't break), body text at 14–16px so it's readable without zooming, headlines around 22–28px, and a comfortable line length. Make tap targets genuinely tappable — buttons ~44px tall with generous padding and space around them, because a thumb is not a mouse cursor and cramped links get mis-tapped.
Keep the key message and primary CTA near the top, above the fold of a short screen, since many readers never scroll. Constrain the body to ~600px so it's sensible on desktop and scales down cleanly, and let any multi-column desktop sections stack to one column on mobile. Treat all of this as the baseline that works even when fancy CSS doesn't.
- Single-column, fluid layout as the baseline
- 14–16px body text; ~600px max width; comfortable line length
- Tap-friendly buttons (~44px tall, padded, spaced)
- Key message and CTA above the phone fold
The reliable way to get responsive email
Here's the email-specific catch that trips people up: many clients (notably some Gmail and Outlook contexts) strip or ignore <style> blocks and media queries. So you can't rely on media queries the way you would on the web — the safe approach is "fluid/hybrid": a layout that already works as a single fluid column with no media query at all, using media queries only as progressive enhancement on top. Hand-coding that (fluid tables + ghost tables for Outlook + conditional CSS) is genuinely fiddly, which is why most teams reach for a framework.
MJML is built exactly for this — its components are responsive by default, so columns collapse on small screens without you writing a single media query, and it emits the Outlook-safe table soup for you. Mailbase uses MJML for campaigns and templates, so emails are mobile-friendly out of the box. Whatever route you take, the only real test is a real device: send to an actual phone (and check Outlook) before launch.
- Some clients strip media queries — use a fluid layout that works without them
- Frameworks (MJML) make columns responsive by default
- Media queries as enhancement, not the foundation
- Always test on a real phone before sending
Common Mistakes
- Using modern CSS layout that Outlook silently breaks (use tables).
- Shipping HTML-only emails with no plain-text part — a spam signal.
- Forgetting alt text and a fallback for when images are blocked.
- Not testing on a real phone and in Outlook before sending.
Sources & Further Reading
Official docs for current setup details, pricing, and API behavior — verify specifics there, since they change.
Related guides
More on responsive email design and the surrounding email design workflow:
FAQ
Why does responsive email design matter?
Because over half of email is opened on mobile. An email designed only for desktop forces small-screen readers to pinch, zoom, and mis-tap — and many just delete it. Responsive design keeps it readable and clickable on a phone, which is where most of your audience actually is.
How do I make an email mobile-friendly?
Use a single-column fluid layout (~600px max), 14–16px body text, large tap-friendly buttons (~44px), and keep the key message and CTA near the top. A framework like MJML generates responsive output automatically; always confirm on a real phone.
Do email clients support media queries?
Many do, but several strip or ignore them, so you can't depend on them. Build a fluid/hybrid layout that already works as a single column with no media query, and use media queries only as progressive enhancement on top.
What's the easiest way to build responsive emails?
Use a framework like MJML (or a builder that outputs responsive HTML) so columns stack on mobile and Outlook quirks are handled for you, rather than hand-coding fluid tables and conditional CSS. Then test on a real device before every send.