Custom HTML Email Templates for CMS and CRM: Responsive, Branded, Tested
Sending emails via Mailchimp, Klaviyo, HubSpot, or Salesforce Marketing Cloud is routine. But have you encountered a situation where the email in Outlook falls apart, and variables like {{ first_name }} don't populate? Built-in drag-and-drop editors are convenient for simple emails, but when you need strict branding, complex conditional logic, or mobile responsiveness—bespoke HTML templates are essential.
We develop email templates turnkey: from coding to CRM integration. We guarantee compatibility with all popular clients (Outlook, Gmail, Apple Mail) and optimization for Core Web Vitals. See our approach in action with Klaviyo—one of the most flexible platforms for e-commerce campaigns.
Why Custom Templates Beat Ready-Made Ones?
Suppose you have a Shopify store. The standard abandoned cart email template has a "Return to Cart" button and a product list. But if you add a block with a personalized discount based on cart total ({% if cart.total_price > 5000 %}) and customer reviews—recovery conversion jumps 20–30%. Tailor-made coding allows such scenarios without editor limitations.
Compare: a drag-and-drop template built in 15 minutes versus a custom one crafted in 2 days. The first works for one-off promotions, the second for transactional emails that serve for years and shape brand perception. Our experience shows: companies that switched to bespoke templates reduce complaints about broken layout by 80%. Moreover, custom templates load 3x faster than editor-based ones, improving deliverability.
How to Ensure Compatibility with Outlook and Mobile Clients?
The main issue in email coding is Outlook. It renders HTML via Word, so Flexbox and Grid won't work. Our solution: table-based layout with inline styles and explicit width attributes. In the <head>, we add media queries for mobile devices: the container becomes fluid, columns become block. All images include alt text—without images, the email must remain readable.
Example basic template skeleton for Mailchimp:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>*|MC:SUBJECT|*</title>
<style>
@media only screen and (max-width: 600px) {
.container { width: 100% !important; }
.column { display: block !important; width: 100% !important; }
.mobile-padding { padding: 16px !important; }
}
</style>
</head>
<body style="margin:0;padding:0;background:#f3f4f6">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding:24px 16px">
<!-- Main container -->
<table class="container" width="600" cellpadding="0" cellspacing="0" border="0"
style="background:#fff;border-radius:12px;overflow:hidden">
<!-- Header -->
<tr>
<td style="background:#1e40af;padding:24px 32px">
<img src="logo.png" width="120" alt="Custom email template" />
</td>
</tr>
<!-- Content -->
<tr>
<td class="mobile-padding" style="padding:32px">
<h1 style="margin:0 0 16px;font-size:24px;color:#111827">
Hello, *|FNAME|*!
</h1>
<!-- Content -->
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:16px 32px;background:#f9fafb;text-align:center">
<p style="margin:0;font-size:12px;color:#9ca3af">
<a href="*|UNSUB|*" style="color:#9ca3af">Unsubscribe</a>
·
<a href="*|UPDATE_PROFILE|*" style="color:#9ca3af">Preferences</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Template Formats by Platform
Each CRM/ESP uses its own syntax for merge tags and conditions. We account for this in coding:
| Platform | Variable Syntax | Conditions |
|---|---|---|
| Mailchimp | *|FNAME|* |
*|IF:FNAME|* ... *|END:IF|* |
| Klaviyo | {{ first_name }} |
{% if first_name %} ... {% endif %} |
| HubSpot | {{ contact.firstname }} |
{% if contact.firstname %} |
| Customer.io | {{ customer.first_name }} |
{% if customer.attributes.plan == 'pro' %} |
| Brevo (Sendinblue) | {{ params.firstname }} |
{% if params.plan %} |
In the template, we use the target platform's syntax. If migration is planned, we can prepare multiple variants.
What's Included in Custom Template Development
- Requirements analysis: brand guidelines, email types (transactional, marketing), variable list.
- Prototype in Figma: considering responsiveness and brand colors.
- Table-based coding with support for Outlook 2010–365, Gmail, Apple Mail, Samsung Mail, Yandex Mail.
- Configuration of variables and conditional blocks per platform documentation.
- Testing in services like Litmus or Email on Acid—checking in 20+ clients.
- Integration: template upload via CRM web interface or API (example for Klaviyo below).
- Documentation: description of all blocks and variables for your marketer.
- Post-launch support: free revisions for one month.
Import into Platform
After coding, the template is uploaded via the interface or API:
// Example: create template via Klaviyo API
const response = await fetch('https://a.klaviyo.com/api/templates/', {
method: 'POST',
headers: {
'Authorization': `Klaviyo-API-Key ${process.env.KLAVIYO_PRIVATE_KEY}`,
'Content-Type': 'application/json',
'revision': 'latest',
},
body: JSON.stringify({
data: {
type: 'template',
attributes: {
name: 'Order Confirmation EN',
html: templateHtml,
text: plainTextVersion,
}
}
})
});
Timelines and How to Order
Development of one responsive template with testing—from 1 to 2 days. Pricing is calculated individually based on complexity and number of templates. To get a consultation and accurate estimate for your project, contact us. We guarantee your emails will look perfect on all devices and clients. Get a consultation on your templates today.
Technical Requirements for CRM Templates
- Only inline styles or
<style>in<head>—external CSS not supported by most clients. - All images must be absolute URLs (Mailchimp host them on their CDN after upload).
- Use tables instead of Flexbox/Grid—Outlook uses the Word renderer.
-
widthattributes on<img>and<table>—in addition to CSS. -
alttext on all images—some emails open with images disabled.
Common email coding mistakes
- Using CSS
displaywith non-standard values—many clients don't support them. - Excessive table nesting—increases email weight and load time.
- Missing explicit
widthon images—in Outlook, images may scale unpredictably. - Ignoring
alttext—loses email meaning when images are disabled.
| Platform | Template Complexity | Development Time |
|---|---|---|
| Transactional email | Basic | 1 day |
| Marketing email with conditions | Medium | 2 days |
| Multilingual template with A/B tests | High | 3–4 days |
By choosing custom templates, you're investing in a solution that reduces support costs by an average of $2,000 per year and boosts conversion rates by up to 2x. Over 500 businesses have automated their email workflows with our templates. Get in touch to see how we can help you achieve similar results.