Despite being a UI/UX designer, my passion has always leaned toward development. So when the Getpaid team started working on the notifications part of the platform, I immediately asked the tech lead if I could take on the email templates work.
I remember thinking, “Hey, it’s just HTML — I know HTML, I’ve got this.” Little did I know how much of a challenge it would become. Building HTML email templates is very different from regular web pages. But after pushing through research, trial and error, and lots of testing, I learned a ton — and this is what I want to share with you.
Things to Consider While Building Email Templates
Creating reliable email templates isn’t just about HTML and CSS — it’s about understanding the quirks of the medium and designing with limitations in mind.
1. Compatibility Across Major Email Clients
One of the first challenges I faced was compatibility. Unlike browsers where standards are mostly consistent, email clients vary wildly in how they render HTML and CSS. Desktop clients like Outlook, web clients like Gmail, and mobile clients like Apple Mail all have different levels of support for HTML tags and CSS rules. Some even strip out entire <style> blocks or ignore modern CSS altogether.
This is why tools like Caniemail and support guides like the one from Campaign Monitor are essential — they help you check whether a specific tag or CSS rule will work in the email clients you care about.
2. Responsiveness
Responsiveness means your email adapts to different screen sizes — from desktops to tablets to phones. A responsive email will resize and reflow so it’s readable on every device.
Most email templates achieve responsiveness using:
- Nested HTML tables with percentage–based widths.
- CSS media queries (e.g., styles that apply only when screen size is below a certain width).
- Inline styles directly inside HTML tags.
Because many clients don’t support external or even <style> CSS, inline styles and table layout are the most reliable approaches.
3. Dark/Light Mode Support
Dark mode has become mainstream — recent surveys show that most users prefer dark mode on their devices. Even if you don’t include explicit dark mode support, email clients may invert colors automatically, which can break your design if you’re not careful.
That’s why it’s important to plan for both light and dark appearances. This isn’t just aesthetic — it’s functional. For example, if your logo only works on a white background and your user’s device is in dark mode, the logo could become unreadable.
Implementation Tips for Email Templates
When it comes to building actual email templates, your HTML and CSS toolbox is surprisingly limited. Here’s what worked for me:
Use Tables and Inline CSS
In most email clients:
- Tables are far more supported than
<div>-based layouts. - Inline CSS (styles inside HTML tags) is much more reliable than styles in the
<head>section.
This old-school approach — reminiscent of web design from the 1990s — exists because many email clients don’t support modern layout tools or external CSS.
Test Everywhere
After writing your HTML template:
- Send test emails to Gmail (web & mobile), Outlook (Windows & Mac), Apple Mail, and Yahoo.
- Use services like Litmus or Email on Acid to preview how your template renders across dozens of clients.
Testing is the only way to find quirks and fix them before sending to real users.
Dark Mode CSS Snippet for Email Templates
Here’s an example snippet that helps apply dark mode styles when supported. Not all clients will honor this, but it works in many modern ones:
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #121212 !important;
color: #f1f1f1 !important;
}
.header, .footer {
background-color: #1e1e1e !important;
}
a {
color: #4eaaff !important;
}
}
</style
Keep in mind: not all email clients support media queries or prefers-color-scheme, so always test your dark mode styles.
Background Images and Logo Handling
We ran into trouble with CSS background-image — some email clients that should support it still didn’t render the image correctly. As a workaround, we placed our logo using a standard <img> tag instead of as a background. This ensured the logo showed up reliably in both light and dark modes.
Best Practices Checklist
Here are practical lessons learned while building email templates:
- Stick to supported HTML elements and avoid advanced CSS that many clients ignore.
- Inline your CSS whenever possible.
- Use tables for structure — they’re the most consistent across clients.
- Avoid relying on background images for critical content.
- Set a maximum width (typically ~600px) for optimal viewing across devices.
- *Use media queries carefully *— they help with responsiveness, but not all clients honor them.
Final Thoughts
Building HTML email templates is unlike building typical web pages. It’s full of quirks, old layout techniques, and inconsistent support across clients — but once you understand these limitations, you can work with them instead of against them.
At first, I was overwhelmed. But after testing, refining, and learning the rules of email HTML, my confidence grew — and the results improved.
Top comments (1)
This is a really solid write-up. You explain the pain points clearly and in a way that feels honest, especially the shift from “I know HTML” to realizing email HTML is a different beast. The practical tips around tables, inline CSS, testing, and dark mode are spot on and genuinely useful for anyone new to email templates. Nice balance between experience, lessons learned, and actionable advice.