Email Design to Code: The Complete 2026 Guide
Everything you need to know about converting Figma, PSD, or Sketch designs into production-ready responsive HTML emails.
Why Email HTML Is Different
If you've ever tried to take a beautiful email design and code it in HTML, you know the pain. Email HTML is stuck in 2004 — tables for layout, inline CSS, no flexbox, no grid, and every email client renders differently.
Here's the reality of email rendering in 2026:
- •Gmail strips
tags in some cases - •Outlook (desktop) uses Microsoft Word's rendering engine
- •Apple Mail is the most standards-compliant (thankfully)
- •Samsung Mail has its own quirks
- •Dark mode varies wildly across clients
The Modern Workflow
Step 1: Design Audit
Before writing a single line of code, audit the design for email-compatibility issues:
- •Max width: Keep the email at 600px (580px content + 10px padding each side)
- •Fonts: Stick to web-safe fonts with fallbacks. Custom fonts only work in Apple Mail and iOS
- •Images: Every image needs an alt tag and explicit width/height
- •Buttons: Build with
+
for Outlook compatibility - •Spacing: Use padding on table cells, not margins
Step 2: MJML Development
MJML is the industry standard for email development. It's a markup language that compiles to email-safe HTML.
<mjml> <mj-body> <mj-section background-color="#ffffff"> <mj-column> <mj-text font-size="24px" font-weight="bold"> Hello World </mj-text> <mj-button href="https://example.com"> Click Me </mj-button> </mj-column> </mj-section> </mj-body> </mjml>This compiles to ~200 lines of table-based HTML with inline styles. You write 10 lines, get 200 lines of production code.
Step 3: Testing
Test across these priority clients:
1. Gmail (desktop + mobile)
2. Apple Mail (desktop + iOS)
3. Outlook 365 (web + desktop)
4. Outlook 2019/2016 (desktop — the hard one)
5. Samsung Mail
6. Yahoo Mail
7. Dark mode on all the above
Step 4: ESP Integration
Upload the compiled HTML to your ESP (Klaviyo, Mailchimp, HubSpot, etc.) and set up:
- •Dynamic merge tags (
{{ first_name }}etc.) - •Tracking links
- •Unsubscribe handling
- •Preview text
The AI Advantage
We use AI at multiple steps:
1. Design extraction — AI analyzes the design file and extracts color values, font sizes, spacing
2. MJML generation — AI generates the initial MJML structure from the design
3. Image generation — AI creates placeholder images for testing
4. Subject line optimization — AI generates and scores subject line variants
5. Dark mode adaptation — AI checks and adjusts colors for dark mode compatibility
This cuts development time from 8-12 hours per email to 2-4 hours.
Cost of Email Development
Service DIY Freelancer Agency Lare Labs Single template Free (your time) $200-500 $500-1500 $149 5-email flow Free (your time) $1000-2500 $2500-5000 $497 Timeline 2-4 weeks 1-2 weeks 2-4 weeks 48 hours *Need your design coded into responsive HTML? Upload your file and get a quote in 30 minutes.*
Need help with your email program?
Get a free audit — we'll show you exactly what to fix and how much revenue you're missing.
Get a Free Email Audit