Broken emails quietly erode trust. A misaligned column, a blurry hero image, or an inverted logo in dark mode may seem minor, but these small rendering issues shape how a brand is perceived. Bulletproof templates are designed to reduce those risks across the many clients and devices emails are viewed on.
Many teams rely on custom-coded templates for full control over branding and a polished, consistent presence across campaigns—which means navigating HTML email’s fragmented and unpredictable landscape. Whether you’re sending from Pardot, HubSpot, Marketo, or similar platforms, the practices below focus on keeping those templates rendering consistently across all major clients.
Start with a Clean, Modern Boilerplate
A strong template begins before any content is added. Most boilerplates circulating online today include techniques from 2010—reset styles meant for Outlook 2007 or fixes for clients that barely exist anymore. While those resets won’t usually hurt anything, they add weight to the HTML. Extra weight pushes you closer to Gmail’s 102KB clipping threshold, which can cut off your message and hide your call-to-action.
A modern boilerplate doesn’t try to solve every problem ever discovered in HTML email. Instead, it handles the specific quirks that still matter today—high-DPI Outlook scaling, mobile text adjustments, table spacing resets, and link styling issues in iOS and Gmail.
A reliable boilerplate generally includes:
- Structural resets for tables, images, paragraphs, and spacing
- Link-style neutralizers to prevent iOS and Gmail from forcing unwanted colors
- A minimal Outlook MSO block to stabilize line-height, image scaling, and table spacing
- High-DPI (120dpi) Outlook fixes to prevent oversized text and images
- A lightweight media query for responsive styles
If you want a complete, copy-and-paste boilerplate to use as your starting point, we’ve put together a lean, modern version built specifically for today’s email clients.
Make the Structure Responsive (Outlook Included)
Responsive email doesn’t come from media queries alone—the core structure needs to be built so modern clients can scale fluidly while Outlook stays fixed. This is why bulletproof templates rely on ghost tables: a hybrid approach where modern clients use fluid tables and max-width, while Outlook uses a fixed-width table wrapped in a conditional comment.
A minimal responsive wrapper looks like this:
<div style="max-width:600px; margin:0 auto;">
<!--[if mso]>
<table role="presentation" width="600" align="center"><tr><td>
<![endif]-->
<table role="presentation" width="100%" style="max-width:600px; margin:0 auto;">
<tr>
<td>
<!-- content -->
</td>
</tr>
</table>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</div>Two-column layouts follow the same pattern using inline-block columns with max-width so they collapse cleanly on mobile.
View the full responsive structure →
Typography That Degrades Gracefully
Typography is one of the quickest ways an email can look either polished or sloppy. Because not all email clients support web fonts the same way, your type system needs to be built so it still looks intentional when things fall back.
Start with a System Font Stack as Your Baseline
Even if you never touch a custom web font, using a proper system stack almost always looks better than relying on a single default like Arial.
A system stack does two things. First, it picks from the best native UI fonts on each platform (Apple, Windows, Android, Ubuntu), which usually look more refined than plain Arial. Second, it gives you access to more weight options (like 300, 500, 600), so you can design a richer hierarchy than just “regular” and “bold.”
A solid, modern sans-serif system stack looks like this:
font-family: BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Ubuntu', Helvetica, Arial, sans-serif;Even if all you think you want is “Arial,” this stack will generally look more polished across devices—and it gives you more flexibility if you decide to introduce lighter or heavier weights later.
If You Use Custom Fonts, Your System Stack Matters Even More
Many email clients ignore custom web fonts entirely. When a weight like 300 or 500 isn’t supported, the client simply falls back to 400, flattening your hierarchy.
A proper system stack prevents that by ensuring the fallback font has its own light, medium, and semibold weights—so your typography still holds its structure even when the brand font doesn’t load.
To ensure your custom font degrades gracefully:
- Use the system stack above as your fallback—it includes multiple weight variations
- Make sure your brand font feels visually compatible with the stack
- Design knowing some clients will only show the fallback stack, not your custom font
- Treat the custom font as progressive enhancement: great when it loads, unnecessary when it doesn’t
You can’t control every email client, but you can control how your typography behaves when it falls back.
Prepare Images the Right Way from the Start
Images are one of the most common sources of email rendering problems. Blurry heroes, slow-loading layouts, broken mobile responsiveness—almost all of it comes down to how images are exported and coded, not how they look in the design file.
Export at 2× Display Size
High-resolution screens (iPhones, iPads, modern laptops) will make standard-resolution images look soft or slightly blurry.
If an image will render at 300px wide, export it at 600px. If it will render at 480px, export it at 960px. This keeps everything crisp across devices.
Never Upscale in the HTML
A hard rule:
Your HTML width should never exceed the actual pixel width of the image file.
If you upload a 400px image but set the HTML width to 600px, it will look blurry everywhere—retina or not. The HTML can scale down an image safely. It should never scale one up.
Keep File Sizes Tight
File weight creates two problems: slow load times and poor mobile experience, especially on weak connections.
Targets to aim for:
- Standard images: 50–150 KB
- Large hero banners: 150–300 KB
- Animated GIFs: under 500 KB (absolute max ~1MB, but avoid it if possible)
Tools like TinyPNG and ImageOptim can often cut size in half with no visible loss.
The Go-To Responsive Pattern
Most email images should use this reliable pattern. It keeps layouts predictable across devices, and you only need to deviate from it in very specific edge cases:
<img src="images/hero.png"
alt=""
width="380"
border="0"
style="display:block; width:100%; max-width:380px; height:auto;" />This works everywhere because:
width="380"tells Outlook the image’s natural sizedisplay:blockremoves the default inline gapwidth:100%makes it responsive on mobilemax-width:380pxprevents scaling larger than the actual file widthheight:autokeeps the aspect ratio intact
Test Key Images in Dark Mode
You don’t need a full dark-mode strategy to avoid disasters. At the very least, test your logo in dark mode clients, add a subtle white stroke around dark logos, ensure transparent PNGs don’t disappear against dark backgrounds, and test thoroughly in the Gmail app—it’s the biggest source of inversion issues.
With a third of all email opens happening in dark mode, even minimal awareness helps prevent embarrassing surprises.
Modularize Your Code
A modular system is one of the easiest ways to keep your emails both fast to build and hard to break. Instead of rebuilding layouts from scratch or copying old campaigns, you assemble emails from a small set of clean, reusable blocks.
A good module library gives you:
- Faster production — Most of the email is already done; you’re just dropping in modules and updating content
- Consistent layout and spacing — Each block follows the same rules, so every email looks like it came from the same system
- Less code drift — Teams stop copying old campaigns with hidden tweaks or outdated fixes
- Easier updates — Fix spacing or adjust mobile behavior once, and every future email benefits
What Makes a Module Reusable?
The best modules share common traits: predictable table structure, consistent spacing rules, the same responsive image pattern, no one-off “special case” code, and independent testing across key clients.
When your code is modular, everything gets simpler—quicker builds, fewer surprises, and a system that stays stable months (or years) after launch.
Understand How Your ESP Treats Your HTML
Every ESP has quirks that can transform or strip parts of your HTML. Platforms like Pardot, HubSpot, Marketo, and Salesforce Marketing Cloud all process and transform HTML differently before it ever reaches an inbox. Before finalizing a template, you need an exploratory phase that reveals how your platform behaves.
Questions worth testing:
- Does hitting “Enter” inside the WYSIWYG produce
<p>tags,<br>tags, or something else entirely? - When you upload an image through the editor, does the ESP remove responsive inline styling?
- Does your ESP wrap modules in additional
<div>s or table structures? - Does pasting formatted content strip or override your CSS?
Understanding these behaviors informs decisions like where to place spacing, when to use tables instead of divs, whether to inline key styles, and how to structure modules that will be repeatedly edited.
An email template isn’t finished until it’s tested inside the environment that will render it.
Final Thoughts
A bulletproof email isn’t created by piling on complexity. It’s created by choosing stable patterns, preparing assets correctly, and building a structure that survives real-world use.
With the right boilerplate, responsive layout, typography strategy, image prep, and module library in place, your templates will stay clean and reliable long after launch. When your emails work everywhere, your brand feels sharper everywhere.