Over 60% of emails are now opened on mobile devices. A non-responsive email on a smartphone forces the reader to zoom in and scroll horizontally — an experience that leads directly to deletion or an unsubscribe. Responsive email design ensures your message looks great and is easy to read on any screen size. This guide covers every technique you need to build emails that work beautifully on desktop, tablet, and mobile.
The Mobile-First Principle
Design your email for mobile first, then enhance it for desktop — not the other way around. This approach ensures the most common device experience is prioritised, and desktop users (who see a larger layout) receive an enhanced version rather than mobile users receiving a cramped one.
Mobile-first checklist:
- Single-column layout as the base — expands to multi-column on desktop
- Minimum font size 16px for body text
- Buttons at least 44px tall with generous tap padding
- Images scale to full content width on mobile
- No horizontal scrolling on a 320px viewport
Layout Strategies
| Strategy | How It Works | Best For |
|---|---|---|
| Single-column fluid | Content in one column at 100% width — scales naturally to any screen size | Simple newsletters, transactional emails, announcements |
| Hybrid / Spongy | Uses max-width and min-width to constrain width on desktop while expanding on mobile, without relying solely on media queries | Emails that need to work in clients that ignore media queries (some Outlook versions) |
| Media query responsive | Desktop uses fixed multi-column layout; mobile uses media queries to stack columns and adjust sizing | Marketing emails where visual design quality is important on both desktop and mobile |
Responsive CSS with Media Queries
/* Include in <style> block in <head> — NOT inline */
@media screen and (max-width: 600px) {
/* Make email full width on mobile */
.email-container {
width: 100% !important;
max-width: 100% !important;
}
/* Stack columns vertically */
.col-2 {
width: 100% !important;
display: block !important;
}
/* Larger text on mobile */
.headline {
font-size: 24px !important;
line-height: 1.3 !important;
}
/* Full-width buttons */
.cta-button {
width: 100% !important;
display: block !important;
text-align: center !important;
}
/* Hide on mobile */
.desktop-only {
display: none !important;
max-height: 0 !important;
overflow: hidden !important;
}
/* Show only on mobile */
.mobile-only {
display: block !important;
max-height: none !important;
}
/* Adjust padding */
.mobile-padding {
padding: 20px 16px !important;
}
}
Typography Best Practices
| Element | Desktop | Mobile | Notes |
|---|---|---|---|
| Headline (H1) | 28–36px | 22–26px | Bold weight; short — 6 words maximum |
| Subheading (H2) | 20–24px | 18–20px | Semi-bold; introduces sections |
| Body copy | 16px | 16px (minimum — never below) | Line height 1.5–1.6; contrast ratio ≥ 4.5:1 |
| Small print / legal | 12–13px | 12px (minimum) | Never below 11px — illegible on mobile |
| Font families | Arial, Helvetica, sans-serif (safe); Georgia, serif (safe); system-ui (modern) | Use web-safe fonts as primary; Google Fonts as optional enhancement with fallback | |
Images in Responsive Email
- Max width 100% — add
style="max-width:100%; height:auto;"to all<img>tags so images scale down on narrow screens. - Optimal image dimensions — create images at 2x your target display width for Retina/HiDPI screens. A 600px-wide email image should be 1200px wide at 1x quality.
- File size — compress all images before hosting. JPEG for photos (quality 80%), PNG for logos and graphics. Aim for under 100 KB per image.
- CDN hosting — host images on a CDN or your own server. Never embed base64 images in email HTML — they inflate email size and are blocked by many clients.
- Always include alt text — descriptive alt text ensures the message is understood when images are blocked. The alt text for a CTA banner should convey the same message as the image.
- Avoid image-only emails — an email that is entirely one image is blocked by spam filters and unreadable when images are disabled. Always include meaningful text alongside images.
CTA Buttons — Mobile Optimisation
<!-- Mobile-optimised button using table (not CSS button) -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0"
style="margin: 20px auto;">
<tr>
<td class="cta-button"
style="background-color: #10B981; border-radius: 6px;
padding: 14px 32px; text-align: center;">
<a href="{{cta_url}}"
style="color: #ffffff; font-family: Arial, sans-serif;
font-size: 16px; font-weight: bold;
text-decoration: none; display: inline-block;
min-width: 200px;">
{{cta_text}}
</a>
</td>
</tr>
</table>
<!-- Mobile media query makes button full-width -->
<style>
@media screen and (max-width: 600px) {
.cta-button {
display: block !important;
width: auto !important;
padding: 16px 24px !important;
}
.cta-button a {
min-width: unset !important;
display: block !important;
}
}
</style>
Common Responsive Email Testing Checklist
| ✓ | Check |
|---|---|
| □ | No horizontal scrolling on 320px viewport |
| □ | All text readable without zooming (minimum 16px body) |
| □ | CTA buttons are finger-tappable (minimum 44px height) |
| □ | Images scale correctly and do not overflow their containers |
| □ | Multi-column layout stacks correctly on mobile |
| □ | Email renders correctly when images are blocked (alt text visible) |
| □ | Dark mode tested — colours readable in dark mode on Apple Mail |
| □ | Tested in Gmail (mobile app), Apple Mail, Outlook 2019+ |