Разработка маркетинговых email-шаблонов
Адаптивные маркетинговые письма — головная боль для любого верстальщика. Outlook режет CSS, Gmail склеивает строки, а Apple Mail поддерживает тёмную тему. Промо-акции, дайджесты, реактивация — каждое письмо должно выглядеть идеально в 90+ клиентах. Иначе конверсия падает, а прибыль теряется. Даже небольшая опечатка в стилях может сломать письмо в популярном клиенте, и подписчики увидят битый макет, что ведёт к потере доверия.
Мы решаем эту проблему: вёрстка на MJML, динамический контент через Handlebars, тестирование в Litmus. Опыт более 7 лет гарантирует, что ваш шаблон не сломается ни у одного подписчика. Представьте: письмо открывается в Outlook — всё на месте, кнопки кликабельны, ссылки работают. В Gmail — то же самое. Это реальность, а не фантастика. По данным Litmus, Outlook и Gmail занимают более 60% рынка, поэтому кросс-клиентская совместимость — критичный фактор. Мы тратим на тестирование до 30% времени разработки, чтобы ни один подписчик не увидел битый шаблон.
Как обеспечить совместимость с Outlook?
Outlook использует Word для рендеринга HTML. Он не поддерживает блочную вёрстку, медиа-запросы, многие CSS-свойства. Выход — табличная структура с явными ширинами. MJML генерирует такие таблицы автоматически. Дополнительно ставим conditional comments для margin/padding. Типичная структура промо-письма на MJML:
<mjml>
<mj-head>
<mj-preview>Скидка 30% только до пятницы — не пропустите</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-баннер -->
<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">
Финальная распродажа
</mj-text>
<mj-text font-size="18px" color="#bfdbfe">
Скидки до 50% на весь ассортимент — только до {{endDate}}
</mj-text>
<mj-button href="{{ saleUrl }}" background-color="#f59e0b"
color="#111827" font-weight="700" border-radius="8px">
Смотреть товары
</mj-button>
</mj-column>
</mj-section>
<!-- Три товара в ряд -->
<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>
<span style="color:#dc2626;font-weight:700">{{ this.newPrice }}</span>
</mj-text>
<mj-button href="{{ this.url }}" background-color="#3b82f6" border-radius="6px">
Купить
</mj-button>
</mj-column>
{{/each}}
</mj-section>
<!-- Футер -->
<mj-section padding="16px 32px">
<mj-column>
<mj-text font-size="12px" color="#9ca3af" align="center">
Вы получили это письмо, потому что подписались на рассылку.<br/>
<a href="{{ unsubscribeUrl }}" style="color:#9ca3af">Отписаться</a>
·
<a href="{{ preferencesUrl }}" style="color:#9ca3af">Настройки рассылки</a>
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Почему MJML лучше табличной вёрстки?
Ручная табличная вёрстка требует до 3 дней на один шаблон и часто содержит ошибки. MJML сокращает время до 1 дня, автоматизируя медиа-запросы, сжатие изображений и генерацию preview. Дополнительно MJML снижает нагрузку на тестирование — мы тратим на 70% меньше времени на поиск багов. Экономия на тестировании может достигать $500 в месяц при использовании Litmus вместо ручной проверки.
Рендеринг и отправка
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;
}
Как персонализировать письма с помощью Handlebars?
Персонализация повышает кликабельность на 30%. Handlebars вставляет переменные:
-
{{firstName}}с fallback «Дорогой подписчик» -
{{#each products}}для товаров из корзины -
{{#if location}}для geo-предложений -
{{unsubscribeUrl}}и{{preferencesUrl}}для соблюдения GDPR
Данные подгружаются через REST API или SQL-запросы к вашей CRM. Все ссылки автоматически обрастают UTM-метками ?utm_source=email&utm_campaign=spring_sale. Например, интеграция с Bitrix24 позволяет получать актуальные цены и остатки через REST-запрос к /crm.product.list и рендерить их с помощью Handlebars. Это обеспечивает динамическое отображение без ручного обновления.
Пример интеграции с CRM через API
Данные для персонализации подгружаются в шаблон через REST-запрос к вашей CRM. Например, при использовании Bitrix24 мы получаем список товаров через метод crm.product.list, передаём в Handlebars и рендерим. Это позволяет автоматически обновлять цены и остатки без ручного вмешательства.
Процесс работы
- Аналитика — изучаем макет (Figma, PSD), выделяем переменные и динамические блоки.
- Проектирование — создаём структуру MJML, настраиваем Handlebars.
- Реализация — вёрстка с адаптацией под 90+ клиентов, вставка conditional comments.
- Тестирование — проверка в Litmus и Mailtrap, спам-тест, корректировка.
- Деплой — интеграция с ESP, настройка DKIM/SPF/DMARC, финальный QA.
Как мы тестируем email-шаблоны?
| Инструмент | Проверяет | Стоимость (месяц) |
|---|---|---|
| Litmus | 90+ клиентов, спам-тест | ~$99 |
| Email on Acid | 80+ клиентов | ~$149 |
| Mailtrap | Тестовая отправка | бесплатно до 500 писем |
Мы используем Litmus: загружаем шаблон, смотрим скриншоты в Outlook, Gmail Web/iOS/Android, Apple Mail, Yahoo, AOL. SpamAssassin score не должен превышать 2.0 — проверяем на спам-триггеры.
Сравнение методов вёрстки
| Характеристика | Ручная табличная вёрстка | MJML |
|---|---|---|
| Время разработки шаблона | 2–3 дня | 1–2 дня |
| Поддержка клиентов | ~30–40 | 90+ |
| Риск ошибок | Высокий | Низкий |
| Сложность поддержки | Высокая | Низкая |
Сроки и стоимость
Один промо-шаблон с баннером и блоком товаров — 1–2 дня. Комплект из 5 шаблонов (промо, дайджест, реактивация, уведомление, праздничный) — 5–7 дней. Стоимость рассчитывается индивидуально — мы проанализируем макет и дадим финальную цену. Обратитесь к нам за консультацией, чтобы получить точную смету. В среднем экономия за счёт автоматизации MJML составляет 30–50% бюджета по сравнению с ручной вёрсткой.
Что входит в работу
- Вёрстка по вашему макету (Figma, PSD)
- Подключение к ESP (Mailchimp, SendPulse, UniSender, SendGrid)
- Интеграция с CRM через API (AmoCRM, Bitrix24)
- Настройка UTM, DKIM/SPF/DMARC
- Тестирование в Litmus, Mailtrap
- Гарантия корректного отображения во всех клиентах
Закажите разработку шаблонов под ключ — получите стабильную конверсию без головной боли. Свяжитесь с нами, чтобы обсудить ваш проект. Получите консультацию по вашему макету прямо сейчас.