Email development guides
How to build an email that looks the same in every inbox, and reaches it. Grouped by the job in front of you.
Build an HTML email
From the first table to the preview text: the parts every email needs.
HTML Email: How to Code One That Works in Every Inbox
HTML email code that holds up in Outlook, Gmail and Apple Mail: a starter template you can copy, the CSS every client supports, and each step of the build.
Read the guideResponsive Email Design: Layouts Without Media Queries
Media queries don't reach every inbox, so an email that only stacks with them breaks on some phones. Fluid, hybrid and responsive layouts compared, with code.
Read the guideHow to Inline CSS for Email (and What Can't Be Inlined)
Some inboxes drop the style block and every rule in it. How inlining works, what it can't move, when your framework already does it, and an inliner in the browser.
Read the guideEmail Fonts: Why Outlook Shows Times New Roman and the Fix
Most email clients ignore web fonts, and Outlook can swap yours for Times New Roman. Safe font stacks, @font-face setup and the fix we verified.
Read the guideYahoo Mail Ignores Your Font? Remove the Quotes
Yahoo Mail drops an inline font-family that quotes a font name, like 'Courier New', and shows its own font. Tested in real inboxes, with the one-line fix.
Read the guideEmail Preheader & Preview Text: HTML Code and Examples
Without a preheader, the inbox shows “View in browser” next to your subject. The hidden preheader HTML, the spacer that stops leaks, and what to write.
Read the guideEmail Banner Size and Image Widths That Hold in Every Inbox
The email banner size and image widths that stay sharp on phones and hold their width in Outlook: 2x source files, the width attribute, and safe formats.
Read the guideHow to Send an HTML Email from Outlook or Gmail
Paste HTML into Outlook or Gmail and the code arrives as text. The methods that work in Outlook Classic, new Outlook and Gmail, and what each one drops.
Read the guideMailto Links in HTML: Subject, Body, CC and Encoding
How to write a mailto link in HTML: several recipients, a subject, a body, cc and bcc, and the RFC 6068 encoding rules that keep each value intact.
Read the guideEmoji in Email: Subject Lines, HTML and What Breaks
Emoji in a subject line need an RFC 2047 encoded header; in HTML, a UTF-8 declaration. Copy-paste examples, and why emoji look different per inbox.
Read the guideDark Mode Email: How Gmail, Apple Mail and Outlook Recolour It
Some clients apply your prefers-color-scheme CSS, others recolour the email themselves. What each does in dark mode and how to keep text and logos readable.
Read the guideTarget Gmail and Outlook with CSS: u + .body, [data-ogsc], MSO
Apply CSS in one email client only: Gmail's u + .body, Outlook's [data-ogsc] and MSO comments, Samsung and Proton wrappers, and which old hacks stopped working.
Read the guideEmail Accessibility: 8 Fixes for Screen Readers and Contrast
Make HTML emails work with screen readers: lang, role=presentation on layout tables, alt text, 4.5:1 contrast, link text, and testing with VoiceOver and NVDA.
Read the guideHTML vs Plain Text Email: Why You Send Both, and How
Every HTML email should carry a text/plain part. Why a missing or auto-generated one hurts deliverability, who reads it, and how to write a good one.
Read the guideOutlook
Outlook Classic renders with Word. What it drops and how to work around it.
New Outlook vs Classic Outlook: What Changes for HTML Email
Classic Outlook renders with Word; the new Outlook is Outlook on the web in a desktop app. What that changes for your HTML, MSO fallbacks and signatures.
Read the guideOutlook CSS Support: What Works and What Word Drops
Outlook Classic renders email with Word and silently drops CSS it doesn't know. See which properties survive, which Outlooks use Word, and the fix for each.
Read the guideFix border-radius, Gradients and object-fit in Outlook
Outlook Classic drops border-radius, linear-gradient and object-fit. The fixes: a VML rounded button, a solid colour under the gradient, pre-cropped images.
Read the guideOutlook HTML Email: MSO Conditional Comments and mso- CSS
Code that only Outlook Classic reads: <!--[if mso]> comments, the [if !mso] pattern that hides markup from it, and the mso- CSS properties that fix its spacing.
Read the guideOutlook Ghost Tables: Multi-Column Emails That Don't Break
Outlook Classic stacks or stretches your columns. A ghost table gives it fixed widths while inline-block columns stack on phones. The full two-column code.
Read the guideEmail Background Images That Work in Outlook (VML)
Outlook on Windows strips CSS background images. Copy-paste VML (v:rect, v:fill, v:textbox) for heroes, full-width banners and high-DPI screens.
Read the guideGmail and Apple Mail
What Gmail strips and clips, and what Apple's privacy proxy changes.
Gmail CSS Support: What Gmail Keeps, Strips and Rewrites
Gmail keeps a <style> block up to 16KB, rewrites class names and drops web fonts, and its apps strip styles for non-Google accounts. What CSS works in Gmail.
Read the guideGmail Email Size Limit: Why Emails Over 102KB Get Clipped
Gmail cuts any email whose HTML passes 102KB, hiding your footer, unsubscribe link and open pixel. What counts toward the limit and how to get under it.
Read the guideApple Mail Privacy Protection (MPP): Why Opens Are Inflated
Apple Mail Privacy Protection preloads every image, so opens fire for readers who never looked. What MPP breaks, what still works and how to adapt.
Read the guideReact Email, MJML, Tailwind and Figma
Where each framework's output breaks in real inboxes.
React Email Guide: Build JSX Emails That Hold Up in Outlook
Set up React Email, see which components compile to tables, style with inline objects, render HTML with render(), and test what the dev preview misses.
Read the guidejsx-email & React Email Bugs: withMargin, renderWhitespace, pxToPt
Outlook gaps from margin and withMargin, words run together (renderWhitespace), pxToPt rounding, MSO comments in JSX: fixes for React Email and @jsx-email.
Read the guideTailwind v4 Breakpoints Broken in Gmail: Why and How to Fix
Tailwind v4 writes @media (width >= 40rem) and nests media rules inside selectors; Gmail drops both. Which clients are affected and three ways to fix it.
Read the guideMJML Guide: Responsive Emails That Hold Up in Outlook and Gmail
Install MJML, learn mj-section, mj-column and mj-head, keep columns side by side with mj-group, add Outlook code with mj-raw, and test the compiled HTML.
Read the guideFigma Email Designs: Check Outlook and Gmail Before Handoff
Rounded buttons go square, columns stack, web fonts fall back: what a Figma email loses in Outlook and Gmail, and how to score the frame before handoff.
Read the guideTest and debug
Catch the break before it ships, and trace it when it does.
How to Test an HTML Email Before You Send (Checklist)
A test send to your own inbox misses Outlook, dark mode and Gmail's clip. A four-step workflow, CI automation, and the pre-send checklist to run every time.
Read the guideEmail Rendering Issues: Find the Cause From What You See
Columns stacked in Outlook, a clipped footer in Gmail, a logo gone in dark mode: look up the symptom, see what causes it, and go straight to the fix.
Read the guideEmail CSS Support in Real Clients: 24 Properties Screenshotted
24 email CSS properties, 43 real email clients, every screenshot set against our simulation: three gaps worth knowing and a Gmail result we withdrew.
Read the guideHow to Test an SMTP Server with Telnet, OpenSSL or Swaks
Check an SMTP server from the command line: find its MX, talk to it on port 25 with telnet, test 587 and 465 with OpenSSL, and script it all with swaks.
Read the guideDeliverability and authentication
SPF, DKIM, DMARC, BIMI and the habits that keep you in the inbox.
SPF, DKIM, DMARC & BIMI: The Developer's Email Authentication Guide
What each email authentication protocol does, how to configure DNS records, common failures, and how to verify your setup.
Read the guideBIMI: How to Get Your Logo in Gmail, Apple Mail and Yahoo
What BIMI needs before an inbox shows your logo: DMARC at enforcement, an SVG Tiny PS file, a VMC or CMC, and one DNS record. Then check it.
Read the guideSpamAssassin Score: What It Means and How to Lower It
A SpamAssassin score is the sum of every rule a message hits; 5.0 is the default spam threshold. How to read the report and fix the rules you control.
Read the guideDMARC Policy Modes: p=none vs Quarantine vs Reject
The p= tag is the heart of DMARC. Here's what each of the three policy modes actually does, how to move between them safely, and when to make the jump.
Read the guideHow DMARC Applies to Subdomains (and the sp= Tag)
Attackers love unguarded subdomains. Here's how DMARC's sp= tag works, how policy inheritance plays out, and how to lock down domains you don't even send from.
Read the guideHow to Read a DMARC Report (Without Losing Your Mind)
DMARC aggregate reports arrive as dense XML. Here's what every field means, how to tell passing mail from spoofing, and how to act on what you find.
Read the guideHow to Warm Up a New Sending Domain (and What to Check First)
A new sending domain has no history, so inbox providers watch the first weeks closely. What to verify before the first send, a ramp you can follow, and the numbers that tell you to slow down.
Read the guideHard vs Soft Bounces: What the SMTP Codes Mean and What to Do
A hard bounce is a permanent 5xx refusal, a soft bounce a temporary 4xx one. How to read the codes, which addresses to stop mailing, and why slow delivery is often a soft bounce you never saw.
Read the guideShould Transactional and Marketing Email Use Separate Subdomains?
Why password resets and newsletters should not share a sending domain, a subdomain layout that works, and how SPF, DKIM and DMARC apply to each subdomain.
Read the guideNewest first instead? See the blog.