Marketing Email Template Development

Adaptive marketing emails are a headache for any layout designer. Outlook trims CSS, Gmail merges rows, and Apple Mail supports dark mode. Promotions, digests, reactivation — every email must look perfect in 90+ clients. Otherwise, conversion drops and profits are lost. Even a small typo in styles can break the email in a popular client, and subscribers will see a broken layout, leading to loss of trust.

We solve this problem: layout with MJML, dynamic content via Handlebars, testing in Litmus. Over 7 years of experience ensures your template won't break for any subscriber. Imagine: email opens in Outlook — everything in place, buttons clickable, links working. In Gmail — the same. This is reality, not fantasy. According to Litmus, Outlook and Gmail account for over 60% of the market, so cross-client compatibility is critical. We spend up to 30% of development time on testing to ensure no subscriber sees a broken template.

How to ensure Outlook compatibility?

Outlook uses Word to render HTML. It does not support block layout, media queries, or many CSS properties. The solution is table-based structure with explicit widths. MJML generates such tables automatically. Additionally, we use conditional comments for margins/padding. A typical promotion email structure in MJML:

<mjml>
  <mj-head>
    <mj-preview>30% off until Friday — don't miss out</mj-preview>
    <mj-attributes>
      <mj-all font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" />
      <mj-text font-size="16px" line-height="1.6" color="#374151" />
    </mj-attributes>
  </mj-head>

  <mj-body background-color="#f3f4f6">

    <!-- Hero banner -->
    <mj-section background-color="#1e40af" padding="48px 32px">
      <mj-column>
        <mj-image src="{{ logoUrl }}" width="140px" align="left" />
        <mj-text font-size="36px" font-weight="800" color="#ffffff" padding-top="24px">
          Final Sale
        </mj-text>
        <mj-text font-size="18px" color="#bfdbfe">
          Up to 50% off on the entire range — only until {{endDate}}
        </mj-text>
        <mj-button href="{{ saleUrl }}" background-color="#f59e0b"
          color="#111827" font-weight="700" border-radius="8px">
          Shop Now
        </mj-button>
      </mj-column>
    </mj-section>

    <!-- Three products in a row -->
    <mj-section background-color="#ffffff" padding="32px">
      {{#each products}}
      <mj-column width="33%">
        <mj-image src="{{ this.imageUrl }}" border-radius="8px" />
        <mj-text font-weight="600" color="#111827">{{ this.name }}</mj-text>
        <mj-text>
          <s style="color:#9ca3af">{{ this.oldPrice }}</s>&nbsp;
          <span style="color:#dc2626;font-weight:700">{{ this.newPrice }}</span>
        </mj-text>
        <mj-button href="{{ this.url }}" background-color="#3b82f6" border-radius="6px">
          Buy
        </mj-button>
      </mj-column>
      {{/each}}
    </mj-section>

    <!-- Footer -->
    <mj-section padding="16px 32px">
      <mj-column>
        <mj-text font-size="12px" color="#9ca3af" align="center">
          You received this email because you subscribed to our newsletter.<br/>
          <a href="{{ unsubscribeUrl }}" style="color:#9ca3af">Unsubscribe</a>
          &nbsp;·&nbsp;
          <a href="{{ preferencesUrl }}" style="color:#9ca3af">Preferences</a>
        </mj-text>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

Why MJML is better than manual table layout?

Manual table layout takes up to 3 days per template and often contains errors. MJML reduces time to 1 day by automating media queries, image compression, and preview generation. Additionally, MJML reduces testing load — we spend 70% less time finding bugs. Savings on testing can reach $500 per month when using Litmus instead of manual checks.

Rendering and sending

import mjml2html from 'mjml';
import Handlebars from 'handlebars';
import { readFileSync } from 'fs';

function renderMarketingEmail(
  templateName: string,
  data: Record<string, unknown>
): string {
  const template = readFileSync(`./email-templates/${templateName}.mjml`, 'utf-8');
  const compiled = Handlebars.compile(template)(data);
  const { html, errors } = mjml2html(compiled, { minify: true });
  if (errors.length) throw new Error(errors[0].formattedMessage);
  return html;
}

How to personalize emails with Handlebars?

Personalization increases click-through rates by 30%. Handlebars inserts variables:

• {{firstName}} with fallback "Dear Subscriber"
• {{#each products}} for cart items
• {{#if location}} for geo-offers
• {{unsubscribeUrl}} and {{preferencesUrl}} for GDPR compliance

Data is loaded via REST API or SQL queries to your CRM. All links are automatically tagged with UTM parameters ?utm_source=email&utm_campaign=spring_sale. For example, integration with Bitrix24 allows fetching current prices and stock via REST request to /crm/product.list and rendering them with Handlebars. This provides dynamic display without manual updates.

Process

1. Analysis — study the layout (Figma, PSD), identify variables and dynamic blocks.
2. Design — create MJML structure, configure Handlebars.
3. Implementation — layout adapted for 90+ clients, insert conditional comments.
4. Testing — check in Litmus and Mailtrap, spam test, adjust.
5. Deployment — integrate with ESP, configure DKIM/SPF/DMARC, final QA.

How do we test email templates?

We use Litmus: upload the template, view screenshots in Outlook, Gmail Web/iOS/Android, Apple Mail, Yahoo, AOL. SpamAssassin score must not exceed 2.0 — we check for spam triggers.

Comparison of layout methods

Timelines and pricing

One promo template with banner and product block — 1–2 days. A set of 5 templates (promo, digest, reactivation, notification, holiday) — 5–7 days. Pricing is calculated individually — we will analyze your layout and provide a final quote. Contact us for a consultation to get an accurate estimate. On average, savings due to MJML automation are 30–50% of the budget compared to manual layout.

What's included in the work

• Layout based on your design (Figma, PSD)
• Integration with ESP (Mailchimp, SendPulse, UniSender, SendGrid)
• CRM integration via API (AmoCRM, Bitrix24)
• UTM setup, DKIM/SPF/DMARC
• Testing in Litmus, Mailtrap
• Guaranteed correct rendering in all clients

Order turnkey template development — get stable conversion without headaches. Contact us to discuss your project. Get a consultation on your layout right now.

Email Campaign Integration: Why Does It Often Break?

We’ve observed that a trigger email sent 10 minutes after registration converts 4–5 times better than the same email sent after 24 hours. This isn’t a marketing myth—it’s mechanics: while the user is still warm, while they remember the context. But most integrations with email services are built like this: form submits → synchronous HTTP request to API → if the API is slow, the user waits 3 seconds → the email either goes out or doesn’t, nobody knows. In one project, we saw a 30% drop in conversion simply because the email service responded with 504 and Laravel’s queue driver wasn’t configured. Lost emails often hit customers silently – no log, no alert, just a missing order confirmation.

If you’re facing lost emails or spam folder issues, order an audit of your current integration – we’ll find bottlenecks within 2 days.

Providers and Their APIs

Unisender — a Russian provider popular in the SMB segment. REST API, simple. Adding a contact: importContacts, sending a transactional email: sendEmail. Important: for transactional emails (order confirmations, password resets), Unisender Go is a separate service with a different API and separate pricing. Mixing bulk and transactional mailings in one stream is bad for domain reputation. Unisender Go handles up to 1000 requests per second.

SendPulse — provides email, SMS, web push, Viber, and Telegram bots through a unified API. Convenient for projects requiring an omnichannel approach. Automation 360 is a visual chain builder; you can trigger automation via API events. The PHP SDK (sendpulse/rest-api-php-sdk) is maintained but updated irregularly – better to use Guzzle directly.

Mailchimp — a choice for international audiences and marketing teams accustomed to the Mailchimp ecosystem. Transactional email via Mandrill (a subsidiary service). Marketing API v3 for list, tag, and campaign management. Webhooks for opens, clicks, unsubscribes, bounces.

SMS. For Russia: SMSCenter, MTS Exolve, Devino Telecom, SMS Aero. Their APIs are similar: a send method with phone, message, sender parameters (sender name must be registered separately with the operator). One nuance: the sender name must be registered through the aggregator with a contract – otherwise SMS won’t be sent on MTS/MegaFon/Beeline networks.

How to Build an Integration That Doesn’t Lose Emails?

Separate Transactional and Marketing Streams

Transactional emails (order confirmations, password resets, delivery status) go through a dedicated sender domain or subdomain tx.example.com. Marketing campaigns go through mail.example.com or news.example.com. If a marketing campaign receives many spam complaints, it should not affect the reputation of the transactional stream. According to SendGrid documentation, transactional messages should be sent through a dedicated IP pool to prevent cross-contamination.

Queue and Retry

Any call to the email API goes through a queue (Laravel Queue, Bull, Celery). If Unisender returns a 503, the job retries after 5 minutes, then 15, then 60. After 5 failed attempts, it goes to a dead letter queue with an alert. The user already received their 200 OK and knows nothing about the issue. This approach reduces bounce rate on projects to 0.5%.

Example Laravel job:

public function handle(): void
{
    try {
        $response = Http::post(config('services.unisender.email_url'), $this->params);
        if ($response->failed()) {
            $this->release(300); // retry after 5 min
        }
    } catch (\Throwable $e) {
        $this->release(300);
    }
}

Templates

We store templates in code (Blade, Twig, React Email), not in the provider’s interface. Reasons: versioning via Git, browser preview without sending, testability. For complex templates with dynamic content — react-email with export to HTML via @react-email/render.

Validation and Consent

Before adding a contact to a list — double opt-in (confirmation email). Store the confirmation timestamp in your own database. Upon unsubscription — synchronously unsubscribe both at the provider and in your database. Ignoring webhook unsubscriptions is a direct path to account suspension at the provider. All processes comply with Федеральный закон № 152-ФЗ «О персональных данных».

Deliverability Monitoring and DKIM Setup

Connect provider webhooks for events: bounce (hard and soft), spam_complaint, unsubscribe. Hard bounce — immediately mark the email as invalid in your database, stop sending. Soft bounce 3 times in a row — same. Metrics: open rate, click rate, bounce rate, unsubscribe rate — review at least once a week. Our certified engineers configure alerts in Grafana/Prometheus.

DKIM configuration steps:

1. Generate a key pair (e.g., openssl genrsa -out private.key 2048).
2. Publish the public key in DNS as a TXT record for the selector (e.g., mail._domainkey.tx.example.com).
3. Provide the selector to the provider (SendGrid, Mailgun, Unisender).
4. Verify with dig TXT mail._domainkey.tx.example.com.

SPF, DKIM, DMARC must be configured separately for each stream. We use subdomains with different DNS records.

Why Is It Important to Separate Streams?

If you send a marketing campaign from the same domain as transactional emails and receive spam complaints, you risk getting the domain blocked — and users will stop receiving even order confirmations. SPF, DKIM, DMARC (Sender Policy Framework, DomainKeys Identified Mail, Domain‑based Message Authentication, Reporting and Conformance) must be configured separately for each stream. In one project, a marketing blast with 12% spam complaints blocked the transactional domain for 48 hours — we had to re‑authenticate with Google and Yandex.

What Does the Integration Scope Include?

• Audit of current communication streams and domain reputation (SPF, DKIM, DMARC)
• Provider and schema selection: transactional vs marketing traffic
• Configuration of SPF, DKIM, DMARC DNS records
• Development of email templates (HTML + dynamic content)
• Backend integration via queues and API
• Webhook setup for deliverability and complaints
• Operations documentation and team training
• Deliverability guarantee and post‑launch support

We deliver production‑ready documentation, access to monitoring dashboards, and a handover session with your engineers. Our certified engineers provide a 30‑day post‑launch health check guarantee.

Timelines and Cost

Cost is calculated individually after audit. We provide turnkey service: from analysis to production monitoring. Contact us for a free engineer consultation — we’ll evaluate your project and give accurate timelines. Over 7 years of experience in email service integration, 50+ projects implemented. Order a free audit of your current integration and receive a report with recommendations and estimated savings.