Definition
Progressive enhancement in email is a design and development strategy that starts with a universally functional baseline and progressively adds enhancements for clients that support them. The baseline is typically a single-column, table-based layout with inline CSS that renders reliably in Outlook, the most restricted major client. Additional layers of CSS, interactivity, and responsive behaviour are added for clients like Apple Mail and mobile apps that support modern web standards.
The progressive enhancement approach for email typically begins with a linearised, stacked layout that works at any width. Outlook receives this baseline because its Word rendering engine cannot parse @media queries. The next layer adds fluid hybrid styles for clients that support percentage widths and max-width containers. The final layer includes @media queries for responsive breakpoints, advanced CSS selectors for dark mode, and potentially @supports for animation or interactive features.
Progressive enhancement contrasts with graceful degradation, where the email is designed for the best client first and then fixed for Outlook. Progressive enhancement forces the developer to prioritise core content and functionality, ensuring that recipients using any email client can access the message's essential information and calls to action.
Best Practices
Start with a linearised, single-column layout that stacks content vertically. This layout works in every email client, including text-only views and preview panes with limited width.
Use inline CSS for all baseline styles. Inline styles survive CSS stripping in Gmail and are honoured by Outlook. Reserve embedded <style> blocks for enhancement layers that non-supporting clients will safely ignore.
Add fluid hybrid containers as the first enhancement layer. Use width: 100% tables with max-width containers so the email scales on mobile devices while remaining readable on desktop.
Layer media queries on top of the fluid base for targeted responsive breakpoints. Keep enhancements additive so that clients that do not support media queries still receive the fully functional base layout.
Test the baseline layout in Outlook before adding enhancements. If the core content, navigation, and CTA work in Outlook without enhancements, you have successfully implemented progressive enhancement.
Related Glossary Terms
Email Above Fold
The portion of an email visible without scrolling, varying significantly by device, client, and preview pane configuration.
Email Apple Mail
Apple's email client for macOS and iOS, known for the best CSS support among major email clients due to its WebKit rendering engine.
Email Background Image
A background image applied to an email's table cell or container, requiring VML fallbacks for Outlook due to its lack of CSS background-image support.
Email Conditional
Proprietary conditional comments used to target Microsoft Outlook with specific HTML or VML code for cross-client email rendering.
Email Emoji
The use of emoji in email subject lines and body content, with platform-specific rendering differences and measurable engagement impacts.
Email Ghost Table
A responsive email technique using hidden tables to conditionally show or hide content for mobile and desktop layouts across all email clients.
Frequently Asked Questions
Progressive enhancement builds from a simple baseline upward, while graceful degradation starts with a feature-rich design and removes unsupported features. Progressive enhancement is generally preferred because it guarantees a functional experience in every client.
It requires more upfront planning but is not necessarily harder. The structural approach of stacking layers — baseline, fluid, responsive, enhanced — creates a clear development workflow that can be easier to maintain than trying to fix a complex layout after it breaks.
Yes. MJML's compile process generates responsive HTML that follows progressive enhancement principles. The compiled output includes inline styles, fluid tables, and media queries that create a baseline-plus-enhancement structure automatically.
Media queries for mobile responsiveness, `@supports` for animation support, WebKit-specific selectors for iOS rendering, dark mode colour overrides, `prefers-reduced-motion` for accessibility, and advanced background styles for clients that support them.
Test the HTML without any embedded styles to verify the baseline layout. Then test with styles enabled in Outlook, Gmail, Apple Mail, and mobile clients. Each client should display the appropriate layer of enhancement without breaking the baseline.