ESS
All Guides
Design

HTML Email Development: A Modern Approach

Andrea Reeves
December 20, 2024
20 min read
6 sections

The Email HTML Landscape

Email HTML is stuck in 2005. While the web has moved to flexbox, grid, and modern CSS, email clients still rely on inconsistent rendering engines. Outlook uses Microsoft Word's rendering engine. Gmail strips <style> tags in non-AMP contexts. Yahoo has its own quirks.

The result: email developers must code for the lowest common denominator while progressively enhancing for capable clients. It is frustrating, but understanding the constraints lets you build emails that look good everywhere.

Layout Approaches

Three main approaches to email layout in 2025:

  • Table-based layout — the classic approach that works everywhere. Nest <table> elements for structure. Verbose but bulletproof.
  • Hybrid/spongy — uses <div> elements with max-width and mso- conditional comments for Outlook. Cleaner code, good support.
  • Component-based (React Email, MJML) — write in a modern framework that compiles to compatible HTML. Best developer experience.

For new projects, we recommend component-based development with React Email or MJML. You get a modern development experience while the framework handles cross-client compatibility automatically.

Responsive Techniques

Making emails responsive requires understanding which clients support media queries:

  • Full support: Apple Mail, iOS Mail, Outlook.com, Thunderbird
  • Partial support: Gmail (web), Yahoo Mail
  • No support: Gmail (mobile app), some older Android clients

The fluid-hybrid method works without media queries by using percentage widths with max-width constraints. For clients that support media queries, add breakpoints for fine-tuned control.

Key responsive patterns:

  • Use max-width on wrapper elements instead of fixed width
  • Set images to max-width: 100%; height: auto;
  • Stack multi-column layouts vertically on mobile using display: block
  • Increase tap targets (buttons, links) to at least 44x44px on mobile

Dark Mode Support

Dark mode in email is chaotic. Different clients handle it differently:

  • Full color inversion: iOS 13+, Apple Mail — inverts all colors automatically
  • Partial inversion: Outlook.com — inverts backgrounds but not images
  • No inversion: Gmail — renders exactly as coded, regardless of device theme

Strategies for dark mode:

  • Use transparent PNGs for logos so they work on both light and dark backgrounds
  • Add @media (prefers-color-scheme: dark) styles for clients that support it
  • Test with both light and dark modes in every client you support
  • Avoid pure white backgrounds — use a slight off-white (#fafafa) that looks natural when inverted

Testing Workflow

A reliable testing workflow saves hours of debugging:

  1. Design review — verify the design is achievable within email constraints
  2. Local development — use a hot-reloading tool for rapid iteration
  3. Litmus/Email on Acid — preview across 90+ client/device combinations
  4. Real device testing — test on actual iOS, Android, and desktop Outlook
  5. Accessibility check — verify screen reader compatibility and color contrast
  6. Spam testing — run through spam filter analysis before sending

At minimum, test in: Apple Mail, iOS Mail, Gmail (web + mobile), Outlook (desktop + web), and Yahoo Mail. These cover over 90% of email opens.

Modern Development Tools

The email development toolchain has improved dramatically:

  • React Email — build emails with React components, renders to compatible HTML
  • MJML — markup language that compiles to responsive email HTML
  • Maizzle — Tailwind CSS framework for email development
  • Parcel — email-aware CSS inliner and build tool
  • Brew — built-in template editor with preview across clients

Component-based tools like React Email represent the future of email development. Write clean, maintainable code and let the compiler handle the ugly compatibility layer.