How to design high-converting HTML email templates

Designing HTML emails isn’t just about how they look. For many teams—designers, CRM managers, product managers and those signing off campaigns—it’s about creating a repeatable framework that works in the inbox, supports the brand and makes reviews smoother.

This guide walks through the design process from concept to sign-off. It covers design tools like Figma, how to hand designs over to developers, what to watch out for in HTML, and how to run effective reviews.

1. Start in Figma (or your design tool of choice)

Most teams now begin email design in Figma. It’s fast to iterate and allows everyone to collaborate in one place. Set up a shared library of components such as headers, product modules and footers so designs stay consistent.

Use auto layout in Figma to quickly adapt layouts to desktop and mobile views. This mirrors what developers will do in code and prevents issues later.

When mocking up, keep in mind that emails are coded using tables, not divs. Avoid overly complex layers and stick to simple grid structures.

2. Design for mobile first

Over 80% of emails are opened on smartphones (Ajroni, 2025). Start by ensuring your single-column design works on a narrow screen before expanding it for desktop.

Key points:

Minimum body text size: 14–16px
Buttons at least 44px tall
Plenty of white space to avoid “fat-finger” taps

3. Balance brand and readability

While it’s tempting to pack in brand fonts and heavy visuals, many email clients strip custom fonts and block images by default. To keep emails accessible:

Choose safe fallback fonts
Provide descriptive alt text for images
Use high-contrast colour combinations
Limit line length to 60–70 characters (Harvard Accessibility, 2024)

Dark mode is also critical. Test how your brand colours invert and adjust assets where needed.

4. Build modularly

Instead of treating each email as a one-off, break designs into modules: hero, product grid, content block, footer. This makes both design reviews and coding far faster. Tools like Modular Mail are built around this approach, ensuring non-technical users can assemble campaigns without breaking layouts.

5. Run structured design reviews

Email campaigns often touch multiple teams. A structured review process avoids endless comment threads:

Round 1: Internal design critique (designers + CRM)
Round 2: Stakeholder review (brand, product, compliance)
Round 3: Developer feasibility check before coding
Final round: Content and sign-off

Agreeing on stages keeps feedback clear and prevents late-stage surprises (Indeed, 2024).

6. Consider the code while designing

Design choices affect how emails are coded:

Background images: Not all clients support them; use fallback colours.
Custom fonts: Rarely supported; plan for web-safe alternatives.
Interactivity (hover states, video): Most clients won’t allow it.
Responsive scaling: Stick to percentages and fluid layouts rather than fixed widths.

Knowing these limitations early saves rounds of redesign later.

7. Test across devices and clients

Once coded, test designs in major clients: Outlook, Gmail, Apple Mail. Services like Litmus or Email on Acid can automate this. Always preview in both light and dark mode, and with images off.

8. Measure and refine

A “high-converting” template isn’t made in one draft. Track click-throughs on different modules, subject lines and CTAs. Feed these learnings back into Figma so the design library evolves over time.

Suggested images to include

Screenshot of a Figma email wireframe with auto layout visible
Example of a single-column mobile design vs desktop view
Visual of dark mode vs light mode brand colours
Annotated diagram of an email showing labelled modules (hero, product grid, footer)
Example of alt text and accessible font sizes

By approaching email design as a repeatable, collaborative process with Figma at the centre and coding realities in mind, you’ll create templates that don’t just look good in a mockup but also perform in the inbox.