Розробка маркетингових 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
- Гарантія коректного відображення у всіх клієнтах
Замовте розробку шаблонів під ключ — отримайте стабільну конверсію без головного болю. Зв'яжіться з нами, щоб обговорити ваш проект. Отримайте консультацію щодо вашого макету прямо зараз.