Responsive Email Design

Strategy

• Design mobile-first (most emails opened on mobile)
• Single column layout works everywhere
• Stack multi-column content on small screens

Fluid vs Responsive

• Fluid: Percentage widths, scales with viewport. Simpler, broader support.
• Responsive: Media queries for breakpoints. Better control, less support.

Mobile Optimization

• Minimum font size: 16px (prevents iOS zoom)
• Minimum tap target: 44x44px
• CTA button: full-width on mobile
• Reduce padding on mobile (more content visible)
• Hide non-essential content on mobile
• Preheader text: optimize for mobile inbox preview