Email Preheader Generator
Create hidden preview text for marketing emails and generate an email-safe preheader block.
Templates & Tools
Practical tools, reusable email snippets and production-ready resources I use to design, develop, test and maintain HTML email campaigns.
HTML Email Button Generator
Generate an inline-styled CTA button and preview it before adding it to an email campaign.
UTM Link Builder
Build campaign URLs with source, medium, campaign, content and term parameters.
Responsive Email Starter
Copy a clean starting structure for a responsive table-based HTML email.
Outlook VML Button
A reusable Outlook-compatible CTA pattern with a VML fallback structure.
Dark Mode Email CSS
A starting point for dark-mode overrides and email color handling.
Responsive Two-Column Email
A reusable two-column table pattern designed to stack on smaller screens.
Email Campaign QA Checklist
Run through a practical pre-production checklist covering content, links, assets, rendering, accessibility and tracking.
HTML Email Developer Toolkit
Download the complete toolkit covering responsive development, QA, accessibility, dark mode and production.
Email Preheader Generator
Enter your preheader text and generate an email-safe hidden preheader block.
HTML Email Button Generator
Generate a simple email-safe CTA button with inline CSS.
UTM Link Builder
Build a campaign URL with standard UTM parameters.
Production Email Code Snippets
Quick-copy patterns for common HTML email development tasks. Always test snippets against your supported client matrix before production use.
Responsive Email Starter
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td align="center">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;">
<tr><td style="padding:24px;">
Your content
</td></tr>
</table>
</td></tr>
</table>
Outlook VML Button
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
href="https://example.com"
style="height:48px;v-text-anchor:middle;width:180px;"
arcsize="10%" fillcolor="#111111" strokecolor="#111111">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">
SHOP NOW
</center>
</v:roundrect>
<![endif]-->
Dark Mode Email CSS
<style>
@media (prefers-color-scheme: dark) {
.email-bg { background-color:#111111 !important; }
.email-text { color:#ffffff !important; }
.email-muted { color:#cccccc !important; }
}
[data-ogsc] .email-bg { background-color:#111111 !important; }
[data-ogsc] .email-text { color:#ffffff !important; }
</style>
Responsive Two-Column Email
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="stack-column" width="50%" valign="top" style="width:50%;">
Left column
</td>
<td class="stack-column" width="50%" valign="top" style="width:50%;">
Right column
</td>
</tr>
</table>
<style>
@media screen and (max-width:600px) {
.stack-column { display:block !important;width:100% !important;max-width:100% !important; }
}
</style>
Interactive Email Campaign QA Checklist
Use this checklist for your pre-production email review. Your progress is calculated automatically in the browser.
0 / 24 checks completed
Important: These tools are practical development helpers, not replacements for full email-client testing. Always validate generated HTML against your supported client matrix, campaign requirements and production environment before sending.
Need a Custom Email Template?
I can help with responsive HTML email development, Figma-to-email conversion, reusable email components, Outlook compatibility, accessibility, dark mode and campaign QA.
DISCUSS YOUR PROJECT