Сделали 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. Получите консультацию по вашим шаблонам — это бесплатно.