# Responsive Email Design

> Responsive email design patterns, fluid layouts, and mobile-first email approaches.

- Skill: `dragoon0x/responsive-email-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/responsive-email-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/responsive-email-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/responsive-email-design

---


# Responsive Email Design

## Mobile Email Strategy
- **60%+ of email is opened on mobile.** Design mobile-first.
- Single-column layout adapts best.
- Stack multi-column content vertically on mobile.
- Buttons: full-width on mobile, inline on desktop.

## Fluid vs Responsive
- **Fluid:** Percentage-based widths, works everywhere but less control.
- **Responsive:** Media queries, more control but not all clients support.
- **Hybrid:** Fluid with conditional comments for Outlook. Best of both.

## Mobile-Specific
- Font size: 16px minimum body (prevents auto-zoom on iOS).
- Links: 44px touch target minimum.
- Images: 100% width, max-width for desktop.
- Preheader text: visible on mobile, hidden on desktop.
- Single CTA per section.