<b>MJML для арбитражных писем: 7 правил, чтобы шаблон не ломался в ESP и на мобиле</b>
MJML хорош не “красотой”, а тем, что убирает ручную боль вёрстки. Но если писать в нём как в обычном HTML, на выходе получите лишние обёртки, кривые отступы и просадку по CTR из-за плохого mobile-read.
• Держите структуру плоской: меньше вложенности — меньше сюрпризов в Gmail и Outlook.
• Не раздувайте секции: лишние <code>mj-wrapper</code> и <code>mj-group</code> часто добавляют ненужный width.
• Все ключевые CTA задавайте отдельным блоком, а не внутри сложной сетки — кнопка должна читаться с первого экрана.
• Для текста и кнопок проверяйте line-height и padding: на мобиле именно они чаще всего ломают визуальный ритм.
• Изображения делайте с запасом по ширине и всегда задавайте <code>alt</code> — иначе шаблон теряет смысл при блокировке картинок.
• Не полагайтесь на автоматическую адаптацию: после сборки обязательно прогоняйте HTML через тест в iPhone Mail и Gmail.
Главная идея: MJML экономит время только тогда, когда вы используете его как каркас, а не как повод навалить лишние блоки. Чем проще сетка, тем стабильнее рендер и тем выше шанс, что письмо дойдёт до клика, а не до поломанного экрана.
Email Design Desk
@email_design_desk
<b>MJML для арбитражных писем: 7 правил, чтобы шаблон не ломался в ESP и на мобиле</b>
Этот пост опубликован в Telegram-канале Email Design Desk. Подписаться можно по ссылке: @email_design_desk.