Email HTML is not web HTML. If you've spent your career building websites, email will feel like stepping back in time—because you kind of are. Email clients render HTML using engines that range from modern (Apple Mail) to a literal word processor (Outlook on Windows). This guide covers the constraints you need to understand before you start designing.
The good news: the Email Love Figma Plugin handles most of this complexity for you. But understanding why things work the way they do will make you faster, help you troubleshoot issues, and save you from designing something that looks incredible in Figma but falls apart in the inbox.
Why Email HTML Is Different
When you build a website, you're targeting a handful of browser engines that follow web standards reasonably well. Email is a different universe entirely. Your design gets rendered by dozens of email clients, each with its own quirks and limitations.
The Big Constraints
- Table-based layouts: Most email clients don't support CSS Grid or Flexbox. Emails are built using nested HTML tables—yes, like it's 2003. MJML handles this behind the scenes so you don't have to.
- Inline CSS only: Many clients strip style blocks entirely. CSS must be inlined on each element. The plugin does this automatically during export.
- No JavaScript: Every email client strips JavaScript. Interactivity is limited to CSS-based techniques and animated GIFs.
- Limited CSS support: Properties like position, float, flexbox, grid, box-shadow, and many animations are unsupported or inconsistent across clients.
- Image blocking: Many corporate email environments block images by default. Your email needs to make sense even when images don't load.
The Outlook Problem
Outlook on Windows uses Microsoft Word's rendering engine to display emails. Yes, a word processor. This means it ignores large chunks of modern CSS, doesn't support background images without VML fallbacks, and renders padding and margins inconsistently. Roughly 10% of email opens still come from Outlook desktop, so you can't ignore it.
Pro tip: The Email Love plugin generates Outlook-specific conditional comments and VML code automatically. You design once in Figma; the plugin handles the Outlook headaches.
How MJML Bridges the Gap
MJML (Mailjet Markup Language) is the framework that powers the Email Love Figma Plugin. Think of it as a translation layer: you design in Figma's modern interface, and MJML converts your design into the table-based, inline-styled HTML that email clients expect.
A simple two-column layout that would take 800+ lines of hand-coded HTML becomes about 240 lines of MJML. And you don't even see the MJML—the plugin generates it from your Figma layers.
The MJML Hierarchy
Every email follows a strict nesting structure. Understanding this hierarchy helps you work faster and avoid export errors:
Layer | MJML Equivalent | Purpose |
Email Frame | mj-body | Your entire email canvas |
Wrapper | mj-wrapper | Container for sections (optional background color/image) |
Section | mj-section | A horizontal row of content |
Column | mj-column | A vertical division within a section (1–4 per section) |
Content | mj-text, mj-image, mj-button | The actual elements your subscribers see |
Important: Content always goes inside columns. Columns always go inside sections. Sections go inside wrappers or directly inside the frame. Breaking this hierarchy will cause export errors—Copilot will catch these before you export.
Design Constraints to Know Upfront
Maximum Width
The Email Love plugin defaults to a 640px email width—this is the out-of-the-box frame size and a great standard for modern email design. Some teams go narrower (600px) or wider (up to 700px), but 640px offers a strong balance of readability and compatibility across clients.
Column Limitations
- Maximum of 4 columns per section for reliable rendering
- Columns automatically stack on mobile devices
- Equal-width columns are the safest; unequal widths work but test carefully
- Nested columns (columns within columns) are not supported in MJML
Font Limitations
Custom web fonts only render reliably in Apple Mail. Gmail, Outlook, and most other clients fall back to web-safe fonts. Design with this in mind—choose fallbacks that complement your brand font and won't break your layout. See the Typography guide for details.
Color Considerations
Dark mode changes your colors automatically in most email clients. White backgrounds become dark, black text becomes light. You can customize dark mode behavior for iOS devices in the plugin, but Gmail and Outlook's dark mode transformations are outside your control. See the Dark Mode guide for specifics.
Designing for Email Success
Think in Rows and Columns
Email layouts are fundamentally a grid: horizontal rows (sections) containing vertical columns. Plan your design around this structure rather than trying to force complex web layouts into email.
Design for Worst Case First
- What does your email look like with images blocked?
- What does it look like on a 320px mobile screen?
- What does it look like in Outlook with fallback fonts?
- What does it look like in dark mode?
If the answer to any of these is "unreadable" or "broken," adjust your design before exporting.
Use the Component Library
Start with Email Love's pre-built components rather than building from scratch. These components are already structured with correct MJML hierarchy, tested across email clients, and optimized for responsive rendering. Customize the styling to match your brand—don't rebuild the structure.
Quick Reference: What Works in Email
Feature | Support | Notes |
Background colors | ✅ Full | Works everywhere |
Background images | ⚠️ Partial | Requires VML for Outlook (plugin handles this) |
Border radius | ⚠️ Partial | Not supported in Outlook on Windows |
Web fonts | ⚠️ Limited | Apple Mail only; others use fallback |
Animated GIFs | ⚠️ Partial | First frame shown in Outlook |
Video | ❌ None | Use a thumbnail image linking to hosted video |
JavaScript | ❌ None | Stripped by all clients |
CSS Grid / Flexbox | ❌ None | Use MJML columns instead |
SVG images | ❌ None | Use PNG or JPG |
Forms / Inputs | ❌ Unreliable | Link to a web form instead |
Next Steps
Now that you understand the landscape, you're ready to start building:
- New to Email Love? Head to the Getting Started guide to install the plugin and set up your first email.
- Ready to design? Check out Designing an Email Template from Scratch for a step-by-step walkthrough.
- Want to go deeper? Read Understanding MJML for a detailed look at the framework powering the plugin.
Need help? Reach out at support@emaillove.com or join our Discord community.
Powered by