Where to Start With Email Coding
For developers new to the quirks of HTML email, Caity G. O’Connor has published a comprehensive one-page guide on getting started with email coding, covering courses, tutorials and general best practices. Lee Munroe’s introduction to building and sending HTML emails on Smashing Magazine is another solid starting point.
For a hands-on approach, How to Code HTML Emails for Any Device walks through building a reliable newsletter template from scratch and testing it. If you prefer video, Jason Rodriguez offers a detailed HTML email course covering everything from accessibility to workflows and troubleshooting. When you need help from peers, the invite-only #emailgeeks Slack community has channels for code, design, jobs and tools; resources are also shared under the #emailgeeks hashtag on Twitter.
Markup Languages and Frameworks
Writing responsive emails that render well everywhere is time-consuming, which is why several abstraction layers exist. HEML is an open-source markup language that lets you write standard HTML and CSS without email-specific quirks — no special styling paradigms to learn.
MJML takes a similar approach with a semantic syntax that an open-source engine compiles into responsive HTML. A step-by-step tutorial helps you get started, and a library of standard components keeps codebases lean. For building your own components, the Modular Template System Guide offers guidance.
Since HTML email still relies heavily on tables, Inky is a templating language that converts simple tags like <row> and <columns> into the complex table HTML email requires.
Framework Options: Tailwind CSS and Sass
Maizzle is a framework for building emails quickly with Tailwind CSS, offering email-specific post-processing and ready-made starter projects.
Alternatively, Foundation for Emails uses a grid-based approach, UI patterns and a CSS inliner to craft responsive emails that work across clients, including Outlook. Sass gives you control over common styles, and a selection of responsive templates covers transactional emails, drip campaigns and newsletters.
Reliable Templates and Template Builders
A few projects offer small collections of battle-tested templates. Cerberus and HTML Email provide responsive templates tested in 50+ email clients including Gmail, Outlook, Yahoo and AOL. EmailFrame.work adds pre-built grid options and basic components supported in 60+ clients.
Codedmails offers 60 MJML-written templates tested for compatibility; the code is on GitHub and free for non-commercial use. Many other sources feature free templates: Stripo, Chamaileon, Postcards, Topol.io, GoodEmailCode, Pixelbuddha, and Bee Free. Litmus offers Responsive Email Templates for newsletters and receipts, and CampaignMonitor has a free drag-and-drop builder. Another no-code option worth considering is Unlayer.
Feature Support and Known Bugs
Can I email, inspired by caniuse.com, tracks support for 179 HTML and CSS features across 31 email clients.
You can search for a specific feature, compare clients, or view a support scoreboard that ranks email clients. The full dataset is available as JSON. For unusual client behavior, Rémi Parmentier maintains Email Bugs, a GitHub repository cataloguing weird behaviors — from missing SVG support in Apple Mail to Gmail’s full-width issues and Outlook’s treatment of animated GIFs.
The repo aims to report bugs to the companies behind the clients, and How to Target Email Clients offers workarounds for targeting specific clients when fixes aren’t possible.
Mailto Utilities
For generating mailto: links with CC, BCC, subject and body, Mailtolink.me handles the snippet generation cleanly.
If you want to avoid forcing users into a desktop email client, Mailgo and MailtoUI both intercept email links and show a modal with options to use a preferred web service or copy the address. Mailgo also handles tel links, offering Telegram, WhatsApp, Skype or direct call options, and supports dark mode.
Finding Inspiration and Testing Accessibility
A curated collection of resources, blogs and podcasts covers creative and up-to-date email techniques. The Litmus Blog, CampaignMonitor blog and HTML Email publish best practices and tips. For visual inspiration sorted by industry, Really Good Emails, Email Love, HTML Email Designs and HTML Email Gallery let you browse by company, email type or campaign goal.
For accessibility concerns, the Accessible Email repo collects articles, tools and presentations focused on email accessibility. Accessible-Email.org analyzes sent campaigns for accessibility improvements, and the Dark Mode for Email Simulator previews how emails render in dark mode.
CSS Processing Tools
To inline CSS and clean up code, Alter.Email offers transformers for inlining, removing unused CSS, formatting HTML and preventing widow words. Postdrop also minifies and inlines CSS and can send a test email.
If unused CSS removal is the specific pain point, Email Comb handles that for email templates. It lets you specify classes and IDs to ignore, choose minification and comment removal, and shows exactly what you did not include. You can plug CSS in, and the tool outputs a cleaned-up version with a report of what was removed.
Targeting Client-Specific Quirks
Email clients routinely strip or modify your carefully written HTML and CSS. When a particular client misbehaves, a cheatsheet for targeting email clients can help. You pick the target client and attempt to address it directly. Success isn't guaranteed—clients change frequently—but it is worth a try.
Curated Resource Hubs
For a broader collection, Thebetter.email maintains a growing repository of email marketing resources. Curated by Jason Rodriguez, it covers people, learning sites, tools, email service providers, newsletters, code and interactive email resources—filtered content from a veteran of the industry.
If you need deeper guidance on HTML email best practices and marketing strategy, Campaign Monitor Guides and Mailchimp Guides both offer substantial libraries. Some material is product-specific, but much of it covers general topics like sending best practices, design, delivery and anti-spam requirements.
For ongoing trend analysis, Oracle’s Email Marketing Trends provides video content on deliverability, modular email architecture, accessibility and marketing practice.
Handling Dark Mode
Dark mode is commonplace in apps and websites, but email clients handle it inconsistently. Serving a single bright email to subscribers on dark-mode operating systems risks driving them away.
The Developer’s Guide to Dark Mode in Email offers practical guidance for building dark-mode-friendly campaigns—how to target the mode, work with images and navigate browser support, which is generally solid.
Rémi Parmentier digs into the specifics of fixing Gmail’s dark mode with CSS blend modes. Gmail forces light text colors to dark; Parmentier shows a creative use of mix-blend-mode (which Gmail supports) to preserve the light text. He also covers making emails react correctly to Outlook.com’s dark mode.
Dedicated Email IDEs
For heavy email work, a purpose-built editor may help. Parcel is a code editor designed specifically for email coding and design. It includes live previews, built-in accessibility checks and collaboration features, plus the ability to run email tests without leaving the tool.
Mail Studio is an alternative desktop IDE for Windows, macOS and Linux that merges visual and code editing. It ships with component libraries (headings, navbars, accordions), responsive templates, Google Fonts integration, Sass support, a command palette, collaboration tools, email previews and hooks for ESPs like Mailchimp, Campaign Monitor and SendGrid. Figma integration is expected later.
Quick Previews and Privacy Tools
Emailpreview.io generates a full-page visual preview of your email. Paste HTML or import an EML file, choose a device width, and get a rendered image. A handy utility for quick checks.
On the privacy side, MailTrackerBlocker functions like an ad-blocker for email. It identifies trackers and strips tracking pixels before they load, allowing you to view remote content while keeping your behavior private. It currently targets Apple Mail on macOS 10.11 through 11.x.
Improving Email Etiquette
Between overflowing inboxes, spammy backlink requests and Friday-afternoon follow-ups on Monday morning, email can be a source of frustration. Chris Coyier’s “Email is Good” tackles email productivity from the human side.
The site examines what makes emails annoying, offers tips for doing better and shares relatable anecdotes—a chance to reconsider how our own email habits affect recipients.
Further Reading
- CSS Auditing Tools
- CSS Generators
- SVG Generators
- An Introduction To Building And Sending HTML Email For Web Developers
- Subscribe to our newsletter to not miss the next ones.
