Зробили email-розсилку для інтернет-магазину. Верстка на таблицях, тестували в Gmail — все ок. Але в Outlook 2016 лист розвалився: кнопка з'їхала, шрифти пропали, а картинка не завантажилась. Знайома ситуація — її виправляє MJML.
Проблема в тому, що Outlook використовує Word для рендерингу HTML, а не Edge або WebKit. MJML вирішує цю біль: ви пишете компоненти на декларативній мові, а на виході отримуєте валідний табличний HTML, перевірений у 90+ поштових клієнтах. Ми використовуємо MJML у зв'язці з Handlebars та Node.js, щоб шаблони були не лише красивими, але й легко інтегрувалися з будь-яким бекендом.
Чому MJML рятує від Outlook-головного болю?
- Outlook-сумісність. За статистикою Litmus, близько 9% користувачів відкривають листи в Outlook. Якщо ваш шаблон не адаптований під Word HTML, лист може відобразитися некоректно: роз'їдуться колонки, пропадуть background-image, не спрацюють border-radius. MJML генерує табличну верстку з VML-кодом, яка коректно рендериться в Outlook. Ми додатково тестуємо кожен шаблон на 5 версіях Outlook через Litmus.
- Адаптивність для мобільних. Понад 50% листів відкривають на телефонах. MJML сам створює медіа-запити та fluid-таблиці, щоб лист виглядав однаково добре на iPhone 15, Samsung Galaxy та десктопі.
- Швидкість розробки. Типовий шаблон на таблицях вручну — 3-4 години. На MJML — 30–40 хвилин. Плюс знижується ймовірність помилок: не потрібно пам'ятати quirks-режими кожного клієнта.
Як ми це робимо?
Розберемо реальний кейс — інтернет-магазин електроніки. Клієнт хотів 4 трансакційні листи: підтвердження замовлення, сповіщення про відвантаження, скидання пароля та вітання.
Стек: MJML 4.15, Handlebars 2.0, Node.js 20 з TypeScript, компілятор mjml CLI, тестування в Litmus.
Ми почали зі створення загальної бази — mj-attributes для шрифтів, кольорів та кнопок. Це забезпечило єдиний стиль у всіх листах. Потім для кожного листа написали MJML-компонент, розбивши інтерфейс на секції: header, content, cta, footer. У місця вставки динамічних даних (ім'я, номер замовлення, товари) додали Handlebars-змінні.
Приклад — лист підтвердження замовлення з таблицею товарів. Використали <mj-table> для рядків, щоб вони коректно відображалися в Outlook. Кнопку "Відстежувати замовлення" зробили через <mj-button> — він генерує VML для Outlook.
Після компіляції отримали HTML-файли розміром ~15 КБ кожен. Інтеграція з бекендом — через Node.js-функцію, яка приймає JSON з даними замовлення, підставляє їх через Handlebars і повертає готовий HTML для відправки.
Процес роботи
- Аналітика — визначаємо типи листів, узгоджуємо макети та тексти.
- Проектування — створюємо прототипи в MJML, показуємо клієнту в тестовому середовищі.
- Реалізація — верстаємо шаблони, додаємо Handlebars-змінні.
- Тестування — прогоняємо через Litmus, фіксимо баги в Outlook та мобільних клієнтах.
- Деплой — передаємо HTML-файли або код рендерингу на Node.js, пишемо документацію з інтеграції.
Терміни орієнтовно
Набір з 3-5 трансакційних шаблонів (order, reset password, welcome) — 4-6 робочих днів. Складні шаблони з кастомною анімацією або AMP для email — до 8 днів.
Що входить в роботу
- Вихідники MJML (компоненти)
- Скомпільовані HTML-файли
- Handlebars-шаблони для вашого бекенду
- Інструкція з інтеграції з SendGrid, Amazon SES або будь-яким SMTP
- Звіт тестування в Litmus зі скріншотами
- Гарантія коректного відображення в Outlook, Gmail, Apple Mail
- Підтримка протягом 14 днів після здачі
Чому MJML краще табличної верстки?
| Критерій | Таблична верстка вручну | MJML |
|---|---|---|
| Час на шаблон | 3-4 години | 30-40 хвилин |
| Підтримка Outlook | Потрібне ручне правлення VML | Автоматична генерація |
| Адаптивність | Потрібні медіа-запити руками | Вбудовані fluid-колонки |
| Помилки | Висока ймовірність | Мінімальна (валідація на етапі компіляції) |
Як тестувати шаблони у всіх поштових клієнтах?
Використовуємо сервіси Litmus або Email on Acid — вони роблять скріншоти в реальних клієнтах. Для швидкої перевірки локально — плагін MJML Preview для VS Code або команда mjml -w для авто-перескладання. Для функціонального тестування — відправка в тестовий inbox через Mailtrap.
Тестовані клієнти
| Клієнт | Версія |
|---|---|
| Outlook | 2013, 2016, 2019, 2021 |
| Gmail | Web, iOS, Android |
| Apple Mail | iOS, macOS |
| Yahoo Mail | Web, iOS, Android |
| Outlook.com | Web, iOS, Android |
Зв'яжіться з нами для оцінки вашого проєкту. Ми підготуємо пропозицію за 1 день — з підбором стеку та термінами. Замовте розробку під ключ і отримайте адаптивні шаблони, які гарантовано працюють в Outlook. Отримайте консультацію по ваших шаблонах — це безкоштовно.