MJML: как собирать письма быстрее, не ломая mobile-first и dark-mode

MJML: как собирать письма быстрее, не ломая mobile-first и dark-mode

MJML удобен не потому, что «красиво генерит HTML», а потому что режет время на верстку и снижает число багов в шаблоне. Для CPA-писем это важно: чем меньше ручной правки, тем стабильнее ширина, отступы и кнопки в разных клиентах.

Что держать в голове:
— Сначала строй каркас: mj-section, mj-column, mj-text, mj-button. Если накидывать «всё сразу», потом сложнее искать, где съехал блок.
— Всегда проверяй width контейнера и padding внутри колонок: именно там чаще всего ломается мобильная сетка.
— Для CTA используй отдельный mj-button, а не текст-ссылку в абзаце: кликабельность и визуальный акцент обычно выше.
— Если нужен нестандартный блок, лучше вынести его в mj-raw точечно, чем переписывать половину шаблона вручную.

По dark-mode MJML не спасает сам по себе: после компиляции всё равно смотри, как ведут себя фон, текст и картинки в Gmail, Apple Mail и Outlook. Особенно осторожно с логотипами на прозрачном фоне и с иконками в SVG — на выходе они часто требуют запасной вариант.

Хороший рабочий процесс такой: верстка в MJML, потом прогон в ESP-редакторе, затем тест на мобильном и отдельная проверка кнопок, отступов и контраста. Если шаблон уже «плывёт» на этапе компиляции, не лечи это правками в письме — проще поправить структуру в исходнике.