Definition
Adaptive design is an email layout approach that serves different fixed designs based on detected screen size or email client. Instead of one fluid layout that reflows continuously, adaptive email uses a set of predefined layouts for common breakpoints, such as desktop, tablet and mobile.
Unlike fully responsive design, which relies on percentages and media queries to reshape content, adaptive design detects the viewport and selects the most appropriate layout from a limited set. This can give designers more precise control over how the email appears on specific devices.
Adaptive design is useful when complex layouts, such as multi-column product grids or detailed data tables, must look correct on specific devices. It requires more planning than a single responsive template but can produce more predictable results for emails with rich visual structures.
Best Practices
- Define breakpoints based on your actual audience devices, not generic assumptions.
- Keep the number of layout variants low to avoid excessive build and QA time.
- Test each predefined layout across the email clients your audience actually uses.
- Use fallback layouts for clients that do not support detection logic.
- Document the adaptive logic so the team can maintain it over time.
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
AMP for Email
AMP for Email is a technology that allows interactive, dynamic content to live inside an email message, enabling forms, carousels and live updates.
AMP for Email
AMP for Email is a Google-developed framework that allows email messages to include interactive elements like forms, carousels, accordions, and live content. It turns static emails into dynamic, interactive experiences directly inside the inbox.
Frequently Asked Questions
Responsive design uses fluid grids and media queries to reflow content for any screen. Adaptive design uses a fixed set of layouts chosen for specific screen sizes or clients.
Use adaptive design when you need precise control over complex layouts, such as product grids or data tables, on specific devices.
No. Some clients ignore media queries or detection logic. Always provide a safe fallback layout that works everywhere.
Yes. It typically requires more planning, more assets and more testing than a single responsive template.
Yes. Many email teams use responsive techniques for most modules and adaptive overrides for specific complex sections.