Mobile Reality
Mobile email opens consistently outpace desktop. Responsive design is not optional — failure to design for small viewports cuts engagement, raises unsubscribe rates, and breaks the experience for the bulk of your list.
Mobile Email Landscape
Mobile email clients dominate the open landscape. iOS Mail, the Gmail app (Android), Yahoo Mail app, and Samsung Mail together account for the majority of opens. Each has different rendering engines, CSS support, and viewport widths.
Approximate Mobile Client Share:
- Apple Mail (iOS): 25-30%
- Gmail app (Android): 15-20%
- Samsung Mail: 8-10%
- Yahoo Mail app: 5-7%
- Outlook mobile: 5-8%
- Other/Web clients: 20-25%
Viewport Widths (Mobile):
- iPhone SE / iPhone 13 mini: 375px
- iPhone 13 / 14 / 15: 390px
- iPhone 14/15 Pro Max: 430px
- Android phones: 360-412px (highly variable)
- iPad (portrait): 1024px
Design for 320px minimum (edge case), optimize for 375-430px (most common), and test on actual devices before sending.
Fluid-Hybrid Layout Approach
Fluid-hybrid combines fluid widths (percentage-based) with media queries for optimization. This hybrid approach ensures emails work even in email clients that don't support media queries (older Outlook versions, some enterprise clients).
Fluid Layout Example:
This pattern works in Gmail, Apple Mail, and modern Outlook. The fluid widths handle clients without media query support; media queries optimize the experience for mobile devices.
Media Query Strategy
Email has limited CSS support, but modern clients support media queries. Target viewport width, not device type.
Recommended Breakpoints:
- 600px: Primary mobile breakpoint (most phones)
- 480px: Older/smaller phones (secondary)
- 800px+: Tablet/desktop optimization (optional)
Mobile-First Media Query Pattern:
This approach works better than desktop-first because many mobile email clients don't parse max-width queries as reliably as min-width.
600px Max-Width Pattern
The 600px max-width is the industry standard. 600px content fits in most mobile viewports (375-430px) with left/right padding, and displays full-width on desktop without feeling cramped.
Outer Container CSS:
Why 600px? Gmail strips outer CSS (some versions), so use table-based structure with width="600". Even with CSS removed, the table width holds.
Safe Pattern:
The triple specification (HTML width attribute + style width + margin: auto) ensures compatibility across clients that strip some CSS.
Font Size: 16px Minimum Body
iOS Mail auto-zooms any text below 16px to 16px. This can make your carefully sized text unexpectedly large. The solution: use 16px minimum for body text.
Font Size Guidelines:
- Body text: 16px minimum (some use 14px + careful line-height)
- Subheadings: 18-20px
- Main heading: 24-32px
- Small text (footer): 12-13px (acceptable for legal/unsubscribe)
- Button text: 16px minimum for readability
Line Height Matters: Use 1.4-1.6x line-height (24px line-height for 16px text). This improves mobile readability significantly.
Code Example:
Body text with proper sizing and spacing.
Touch Targets: 44-48px
The European Accessibility Act (EAA) requires interactive elements to be at least 44×44px or have adequate spacing. This improves usability and avoids accidental taps.
Button Target Size (44-48px minimum):
- Height: 44-48px
- Width: At least 44px (ideally wider for click area)
- Padding: 14-16px vertical, 24-32px horizontal
Button Code Example:
Click Here
Spacing Between Targets: If multiple buttons, separate by at least 8px. This prevents accidental taps.
Mobile Image Handling
Images need to scale on mobile without breaking layout. Use max-width: 100% to ensure images don't exceed container width.
Image CSS:
img { max-width: 100%; width: 100%; height: auto; display: block; }
In HTML:
Multi-Column Images on Mobile: Use media queries to stack images that are side-by-side on desktop.
@media screen and (max-width: 600px) {
.image-col { width: 100% !important; display: block !important; }
}
Image Size Optimization: Mobile connections are slower. Optimize image file size (compress, use JPEG for photos, PNG for graphics). Use 2x pixel density for clarity on Retina displays.
Outlook Mobile Rendering
Outlook on mobile (Windows Phone, iOS, Android) doesn't use Outlook's Word rendering engine. Instead, it uses the platform's underlying mail renderer.
- Outlook on iOS: Uses Apple Mail's WebKit rendering
- Outlook on Android: Uses Android's rendering engine (varies by version)
- Outlook on Windows Phone: Custom rendering (now niche)
Implication: Media queries, flexbox (limited), and modern CSS work better on Outlook mobile than on Outlook desktop. Your responsive code will render more consistently across mobile clients than desktop.
Testing Strategy: Test on real Outlook mobile apps or use email testing tools (Litmus, Stripo) that simulate Outlook mobile rendering. Account for device viewport, not just client.
Next in the Email Templates Series
Learn email image best practices and why WebP doesn't work in email.
Email Images
Explore with AI
Open this content in your AI assistant for deeper analysis, or copy it as Markdown to paste anywhere.