Good email design is not about aesthetics alone. Layout, hierarchy, image balance, accessibility, and rendering consistency all affect whether a message gets read or filtered. This guide covers the structural and technical decisions that matter most, from how to set up a single-column layout that survives Outlook to how dark mode can silently break your branding. It is written for both the developer writing the HTML and the marketer owning the template. Each section focuses on specific, actionable choices rather than general advice.
Layout and Structure: Start With a Single Column
The 600px-wide single-column layout remains the most reliable email structure in 2026. The convention survives because Outlook on Windows still uses the Word rendering engine, which does not respect CSS media queries and behaves unpredictably at non-standard widths. A fluid container that caps at 600-640px on desktop and collapses to 320px on mobile gives you the safest cross-client baseline.
Single-column layouts also perform better on mobile for a practical reason: they remove the cognitive load of scanning across multiple columns on a 390px screen. The reader scrolls linearly, which matches how people actually consume email on a phone.
If your design calls for a two-column promotional layout on desktop, use media queries to stack those columns into a single column on viewports below 480px. Campaign Monitor recommends making CTA buttons full-width at mobile breakpoints and sizing them at a minimum of 44x44px, matching Apple’s Human Interface Guidelines for touch targets.
Structural checklist before you write a single line of HTML:
- Outer wrapper table at 100% width; inner content table capped at 600px
- All layout via
<table>elements, not CSS flexbox or grid (Outlook ignores both) - Inline critical styles on
<td>elements; use<style>in<head>for responsive overrides - Test in both Outlook 2019 and Apple Mail before any other client
Hierarchy and the Inverted Pyramid
The inverted pyramid is the most useful structural concept in email design. Place the most important content at the top, taper toward supporting details, and end with a single focused CTA. Readers who stop midway still get the core message, and the CTA is never buried under copy they did not read.
In practice, this means:
- Pre-header text (40-130 characters) that extends the subject line, visible in inbox previews before the email is opened
- Hero image or headline that communicates the main value in under five seconds
- Supporting copy (one to three short paragraphs) that earns the click
- CTA button with a minimum 44px height and enough surrounding whitespace to be tappable without zooming
Avoid placing multiple primary CTAs in a single email. Secondary actions belong in the footer or as in-line text links, not competing buttons.
Mobile-First Responsive Design
According to Litmus’s email client market share data, Apple products (iPhone, iPad, and Mac Mail) account for roughly half of all email opens, and Apple iPhone alone holds the largest single client share globally. Designing for desktop first and retrofitting for mobile typically produces worse results than the reverse.
A mobile-first approach means writing styles for the narrowest viewport first, then using min-width media queries to expand the layout. The key responsive rules for most emails:
@media only screen and (min-width: 480px) {
.container { width: 600px !important; }
.column { display: inline-block !important; width: 48% !important; }
}For building reusable responsive templates in code, the React Email component library and purpose-built responsive email templates give you a tested structural starting point rather than a blank table.
Font sizes that actually render on mobile:
| Element | Minimum size | Recommended size |
|---|---|---|
| Body copy | 14px | 16px |
| Headlines | 22px | 24-28px |
| CTA button | 16px | 18px |
| Footer/legal | 11px | 12px |
Avoid using web fonts unless you have a reliable fallback stack. Gmail on Android and several Outlook versions substitute system fonts silently, and font substitution can collapse line-height and break layout.
Dark Mode: What Actually Breaks and How to Fix It
An estimated 35% of email opens tracked by Litmus in 2022 used dark mode, a figure that has grown with device-level dark mode adoption. The issue for email designers is that dark mode behavior varies widely by client.
Apple Mail performs a partial color inversion: it inverts pure black (#000000) and pure white (#FFFFFF) backgrounds but leaves defined colors alone. Gmail’s dark mode transforms background colors and text colors across the board. Outlook.com applies its own dark mode logic. This means a template that looks correct on your screen in dark mode may look broken in three different ways across three different clients.
The practical fixes:
- Set explicit background colors on every
<td>, not just the outer wrapper. Clients that invert colors will respect thebackground-colorattribute on the cell itself. - Use the
prefers-color-schememedia query to swap text and background colors for Apple Mail and Samsung Email, the two clients that fully support it. - Never use a transparent PNG logo on a white background. In dark mode, the white background disappears and the logo appears to float on a dark canvas. Use a version of your logo with a defined background or a transparent version that works on both light and dark surfaces.
- Test with Email on Acid or Litmus’s dark mode previews before sending to any list with significant iOS traffic.
@media (prefers-color-scheme: dark) {
body, .email-body { background-color: #1a1a1a !important; }
.email-text { color: #e8e8e8 !important; }
.email-link { color: #4da6ff !important; }
}Accessibility: Alt Text, Contrast, and Semantic Structure
Many images in email are blocked by default in Outlook on Windows and in some corporate environments. When images do not load, alt text is what the reader sees. Alt text that describes the image content accurately turns a broken image icon into useful information; alt text that says “image” or is left blank turns it into dead space.
WCAG 1.4.3 requires a contrast ratio of at least 4.5:1 between normal text and its background for Level AA compliance. In email, the most common violations are light gray footer text on white, white body text on pastel-colored backgrounds, and CTA buttons where the text color and button color are too close. Use a contrast checker before finalizing any color combination.
Accessible email structure checklist:
- Every meaningful image has descriptive
alttext; decorative images havealt="" - Text contrast meets 4.5:1 minimum (3:1 for large text at 18px+ or 14px bold)
- Link text is descriptive (“View your invoice” rather than “Click here”)
- Reading order in the HTML matches visual reading order for screen reader users
- Language attribute is set on the
<html>element (lang="en")
Screen readers, voice assistants, and smartwatch clients all rely on proper HTML semantics to present content correctly. Accessibility improvements in email also tend to help deliverability: messages with clear structure and descriptive text give spam filters more signal to score.
Image-to-Text Ratio and Deliverability
A single-image email (all content in one large graphic, no live text) is consistently flagged by spam filters because spammers use images to hide text from content analysis. The 60/40 guidance that has circulated for years, keeping image content below 40% of the email’s visible area, reflects SpamAssassin’s scoring logic, which is still used by many corporate mail filters.
More important than any ratio is whether the email communicates its message without images loaded. If your email is meaningless when images are blocked, your deliverability and your reader experience are both at risk. Live text for headlines, body copy, and CTAs is the baseline. Images should support the message, not carry it.
Practical guidelines:
- Keep total email file size under 100KB (HTML only, before images); large HTML files are clipped by Gmail
- Use
widthandheightattributes on all<img>tags to prevent layout collapse when images block - Host images on a CDN; email clients do not render images embedded as base64 reliably
- Compress images to the minimum quality acceptable; slower-loading images lower engagement on mobile connections
For a deeper look at how design choices like these connect to inbox placement, the email deliverability best practices guide covers sender reputation, authentication, and filtering logic.
Branding Consistency and Typography
Email templates often exist in isolation from the rest of a design system. The result is a CTA button that uses a slightly different shade of blue than the product, a header font that is not the brand typeface, or a footer layout that looks nothing like the website. These inconsistencies erode trust over time.
Maintain a documented set of token values used consistently across every template:
- Primary and secondary button colors (with their accessible text-on-button contrast ratios documented)
- Header and body font stacks with fallbacks
- Maximum body copy width (around 560px inside a 600px container) for comfortable line length
- Spacing scale for padding above and below sections
For SaaS products, transactional emails (password resets, receipts, notifications) are often the highest-read emails you send. If you want to understand what makes a transactional email different from a marketing email structurally, that guide covers the taxonomy in detail. Applying the same visual consistency to transactional as to marketing templates builds brand familiarity at high-attention moments.
Cross-Client Testing Before You Send
No amount of careful coding replaces testing in actual clients. The rendering gap between Apple Mail and Outlook 2019 is wider than most teams expect. Build a testing checklist tied to your actual audience’s client distribution.
Minimum testing matrix for a typical SaaS audience:
| Client | Why it matters |
|---|---|
| Apple Mail (macOS) | Largest single client; dark mode inversions |
| Apple Mail (iOS) | High mobile volume; different dark mode behavior |
| Gmail (web) | Strips <head> styles; inline styles required |
| Gmail (Android/iOS) | Dark mode transformation differs from web |
| Outlook 2019/2021 | Word rendering engine; CSS grid/flex both break |
| Outlook.com | Modern rendering; different from desktop Outlook |
| Samsung Email | Significant Android share; partial dark mode support |
Litmus and Email on Acid both offer screenshot-based previews across 90+ clients. Running a preview pass before any batch send catches layout breaks that are invisible in your local mail client.
After testing, the deploy side matters too: a well-designed template loses impact if it sends at the wrong time or to the wrong segment. Template management and send-time logic are where design and automation intersect.
What is the best width for HTML email templates?
600px is the standard maximum content width for HTML emails. This width fits within Outlook’s preview pane, renders correctly on most desktop clients, and scales down reliably on mobile. The outer wrapper table should be 100% width; the inner content container should be capped at 600px using max-width. Some teams use 680px for modern clients, but 600px remains the safest cross-client choice.
How do I make an email display correctly in dark mode?
Set explicit background colors on every table cell rather than relying on inherited or default white backgrounds. Use the prefers-color-scheme: dark media query to swap text and background colors for Apple Mail and Samsung Email. Avoid transparent PNG logos with white-dependent backgrounds. Test with a preview tool like Litmus or Email on Acid, since dark mode behavior differs significantly between Gmail, Apple Mail, and Outlook.com.
Does image-to-text ratio really affect email deliverability?
It can. SpamAssassin and similar filters score all-image emails more harshly because spammers historically used single-image emails to hide text from content analysis. The common 60/40 guideline (at most 40% image content) reflects this scoring logic. More important than any ratio is whether your email communicates clearly without images loaded. Live text for all critical content is the baseline; images should support the message, not carry it.
What alt text should I use for email images?
Write alt text that describes the content and function of each image accurately. For a product screenshot, describe what it shows (“Dashboard with campaign performance metrics”). For a decorative divider, use alt="" so screen readers skip it. Never leave alt text blank on a meaningful image, since it renders as a broken icon when images are blocked. Avoid starting alt text with “image of” or “picture of” because screen readers already announce the element as an image.
What font size should body copy be in HTML email?
Use a minimum of 14px for body copy, with 16px strongly preferred for mobile readability. Headlines should be at least 22px, with 24-28px common for hero sections. CTA button labels should be 16-18px. Footer and legal text can drop to 12px but should not go lower. Avoid relying on web fonts for body copy without a defined fallback stack, since Gmail on Android and some Outlook versions substitute system fonts without warning.
How many CTAs should an email have?
One primary CTA per email is the standard best practice. Multiple primary CTAs compete for attention and dilute click-through rates. If secondary actions are needed (social links, help center, account settings), place them as text links in the footer rather than as competing buttons. The inverted-pyramid layout reinforces this: everything in the email builds toward a single action, making the CTA the natural endpoint of the visual flow.
Which email clients should I test before sending?
At minimum: Apple Mail on macOS and iOS, Gmail on web and Android, Outlook 2019 or 2021, Outlook.com, and Samsung Email. These cover the majority of global opens and represent the widest range of rendering engines. Gmail strips <head> styles and requires inline CSS. Outlook uses the Word rendering engine and ignores modern CSS. Apple Mail and Samsung Email both support the prefers-color-scheme dark mode media query but behave differently. Tools like Litmus and Email on Acid provide screenshot-based previews across 90+ clients.
I’ve spent my career building software at scale with a soft spot for email: deliverability, lifecycle campaigns, and getting messages to actually land. I started Coldletter to fix what bugged me about transactional and marketing email tools. I’m based in Vancouver.