Email Template Design Best Practices for 2026

Email template design best practices have changed significantly in the past few years. Dark mode is now default on iOS Mail and Outlook on Windows 11. Gmail’s CSS support has improved substantially. And 70%+ of email opens in India happen on mobile, predominantly on Android.

This guide covers what actually matters in 2026 — not theoretical best practices, but specific, implementable patterns that work across the clients your users actually use.

The Email Client Reality

Before designing anything, understand your audience’s email clients. In India:

• Gmail (Android and web): dominant, good CSS support, clips emails > 102KB
• Apple Mail (iOS, macOS): excellent CSS support, dark mode auto-inversion
• Outlook (Windows): notoriously bad CSS support — uses Microsoft Word’s rendering engine for some versions
• Samsung Mail: Android default on Samsung devices, moderate CSS support
• Yahoo Mail: Moderate CSS support

Design for Gmail and Apple Mail first. Then test on Outlook. Outlook’s rendering limitations are what force many of the “safe” HTML email conventions.

1. Mobile-First Layout

Over 70% of email opens in India are on mobile. Design for a single-column layout at 375px wide (iPhone SE width — the smallest common modern phone).

The safe structure

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">
  <tr>
    <td style="padding: 20px 24px;">
<!-- Content here -->

    </td>
  </tr>
</table>

Key rules:

• max-width: 600px on the outer container
• width: 100% for fluid scaling on mobile
• padding on <td> instead of margins (margins are unreliable in Outlook)
• role="presentation" on layout tables so screen readers ignore them

Two-column layouts

Use a two-column layout only on desktop. On mobile, stack to single column. Achieve this without media queries (Outlook doesn’t support them in some versions) using display: inline-block with width in both percentage and fixed-pixel fallback:

<div style="display: inline-block; width: 100%; max-width: 280px; vertical-align: top;">
  Left column
</div>
<div style="display: inline-block; width: 100%; max-width: 280px; vertical-align: top;">
  Right column
</div>

2. Dark Mode Support

Dark mode email rendering splits into two patterns:

Automatic inversion (Apple Mail, some Android mail): The client automatically inverts colours. Light backgrounds become dark; dark text becomes light. If your email uses color: #000000 text on background-color: #ffffff, it usually just works.

Problems occur when:

• You’ve specified both a light background colour on the container AND light text (both get inverted, text becomes invisible)
• You use images with transparent backgrounds (the transparent area becomes dark, making a logo designed for white backgrounds look wrong)
• You’ve used inline color values that conflict after inversion

Dark mode CSS support

Where supported (Apple Mail, recent Gmail), you can use prefers-color-scheme:

<style>
  @media (prefers-color-scheme: dark) {
    .email-body { background-color: #1a1a2e !important; }
    .email-content { background-color: #16213e !important; }
    .email-text { color: #e0e0e0 !important; }
    .logo-dark { display: block !important; }
    .logo-light { display: none !important; }
  }
</style>

For logos, provide two versions: a dark background version and a light background version, toggled with the media query. This is the most professional approach and what DexcyJet’s template editor supports directly.

3. Accessible HTML Email

Accessibility in email is often an afterthought — it shouldn’t be. An estimated 15% of users have some form of visual impairment. Screen readers process email, and accessible HTML is also better-rendered by spam filters.

Accessibility checklist

• alt text on all images: Every <img> needs descriptive alt text. alt="" is correct for decorative images; alt="DexcyJet logo" for meaningful images.
• Minimum font size: 16px for body text, 14px minimum for captions. Do not use 11–12px text that forces zooming on mobile.
• Colour contrast: Minimum 4.5:1 contrast ratio for normal text (WCAG AA). Test at WebAIM contrast checker.
• Link descriptive text: “Click here” is not accessible. “Download the invoice” is.
• Semantic structure: Use heading tags (<h1>, <h2>, <h3>) in the correct hierarchy. One <h1> per email.
• Reading order: Screen readers follow the DOM order. Tables used for layout can confuse this. Use role="presentation" and order content logically.

4. Image-to-Text Ratio

The classic recommendation is 60:40 text-to-image ratio (60% text, 40% image by area). The reasoning: image-heavy emails have historically been used to hide spammy text content from keyword filters, so spam filters weight them negatively.

More precisely: every significant element of your email must also exist as text, not just as text embedded in an image. A CTA button should be an HTML element with background colour, not just a button-shaped image.

VML bulletproof buttons (Outlook)

Outlook ignores CSS border-radius and background-color on <a> tags. Use VML for Outlook-compatible styled buttons:

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
  href="https://jet.dexcy.in/signup"
  style="height:44px; v-text-anchor:middle; width:200px;" 
  arcsize="10%" strokecolor="#4F46E5" fillcolor="#4F46E5">
  <w:anchorlock/>
  <center style="color:#ffffff; font-size:16px; font-weight:bold;">
    Start free →
  </center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->

<a href="https://jet.dexcy.in/signup"
  style="background-color:#4F46E5; border-radius:6px; color:#ffffff; 
         display:inline-block; font-size:16px; font-weight:bold; 
         padding:12px 24px; text-decoration:none;">
  Start free →
</a>
<!--<![endif]-->

DexcyJet’s template builder generates this automatically when you add a button component. You don’t need to write VML by hand.

5. Fallback Font Stack

Web fonts in email are supported by Apple Mail, iOS Mail, and some versions of Android Mail — but not by Outlook or Gmail. Always specify a fallback font stack:

font-family: 'DM Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;

For DexcyJet’s own marketing emails, the font stack mirrors the site: Syne for headings, DM Sans for body. For your own brand, define a fallback chain that looks acceptable when the custom font doesn’t load.

If you use a Google Fonts @import in your <head>, it will work in Apple Mail and Android but will be stripped by Gmail. The fallback font must be acceptable in Gmail.

6. Preheader Text

The preheader is the text shown in the inbox preview pane after the subject line. It’s 40–90 characters depending on the mail client. Leave it unset and the client will grab the first text in your email — often something like “View this email in a browser” or “Unsubscribe”.

Set it deliberately:

<span style="display:none; max-height:0; overflow:hidden; font-size:1px; 
  color: transparent;">
  Here's your quarterly email analytics summary — top 3 things to improve this month.
</span>

Place this immediately after the opening <body> tag, before any visible content.

7. Gmail 102KB Clipping

Gmail clips emails larger than 102KB in file size, showing a “Message clipped” link and hiding the rest of the email including the unsubscribe link. This is a deliverability and compliance concern.

Keep your HTML under 100KB. Common causes of bloat:

• Inline CSS that’s duplicated dozens of times
• Large image files embedded as base64 (never do this)
• Excessive tracking parameters in URLs
• VML code for every button multiplied by many buttons

DexcyJet’s template validator flags emails that exceed 95KB so you can optimise before sending.

Testing Before You Send

A/B test subject lines (see our post on A/B testing email subject lines), but also test template changes across clients. Use tools like:

• Litmus or Email on Acid: Cross-client screenshot testing
• Mail Tester: Overall spam score + authentication check
• Your own inbox: Always send a test to yourself at Gmail, an Apple Mail account, and if possible, an Outlook.com account

DexcyJet’s “Send Test” function sends to a set of your configured test addresses in one click. See our features for the full pre-send checklist capabilities.

Try DexcyJet: Built-in template editor with dark mode preview, mobile preview, and Outlook VML generation. No design tools required. Start free.