Фреймворк TJML: как в 2025 году верстать письма быстро и просто

За несколько десятилетий электронная почта прошла значительный путь от простых текстовых сообщений к визуально насыщенным рассылкам с графикой, анимацией и интерактивом. Но чем разнообразнее становился контент, тем больше требований предъявлялось к вёрстке.

Чтобы создание писем оставалось комфортным в современных реалиях, мы разработали специальный фреймворк — TJML. В статье рассмотрим его детально и расскажем, как он помогает верстать рассылки легко и управляемо.

Стоит ли сегодня полагаться на ручную вёрстку

Когда-то ручная HTML-вёрстка считалась эталоном. Только она позволяла добиться наилучшего результата и контроля над письмом. Однако со временем технологии стали сложнее, а с ними эволюционировали и почтовые клиенты, каждый из которых имеет свои особенности.

Нужно держать в голове множество деталей: как ведут себя внешние стили, работают ли медиазапросы, что происходит с таблицами и отступами в разных клиентах. К тому же сегодня многие люди проверяют почту со смартфонов. Это значит, что каждое письмо необходимо адаптировать в том числе под вертикальный экран и мобильные системы.

Фактически одно письмо теперь включает три разных версии:

• для современных десктопных и веб-клиентов;
  
  
• для мобильных устройств;
  
  
• для Outlook на Windows, где поддержка CSS всё ещё сильно ограничена.

Отдельно стоит упомянуть AMP-технологию. Она открыла путь к интерактивным письмам с «каруселями», формами и другими динамическими элементами. Но технически это значит, что нужно предусматривать как AMP-вариант для совместимых клиентов, так и обычную HTML-версию для всех остальных.

Где помогают визуальные конструкторы

В условиях современного маркетинга полагаться только на ручную вёрстку невозможно. Альтернативой стали конструкторы писем — современный и удобный способ работы над рассылками. Они не требуют знания кода и позволяют создавать шаблоны писем за несколько минут.

Например, визуальный редактор писем Pixcraft позволяет собирать рассылки по принципу drag-and-drop: просто перетаскивайте нужные элементы на холст и меняйте их. Управление компонентами, включая AMP, доступно прямо в интерфейсе, а готовые шаблоны совместимы со множеством email-клиентов и легко адаптируются под мобильные устройства. Ещё одной альтернативой является экспорт готового email-кода с помощью плагина Pixcraft для Figma: он позволяет преобразовать готовый макет в адаптивное HTML-письмо.

Но так или иначе в основе каждого письма лежит код, и порой взаимодействия с ним не избежать. Можно ли сделать работу с кодом такой же комфортной и современной? Ответ — да. Именно здесь и пригодится TJML.

Что такое TJML

Это email-фреймворк, созданный командой Pixcraft для разработки HTML- и AMP-писем. Он объединяет простоту блочного подхода с гибкостью ручной вёрстки, сохраняя при этом привычный синтаксис.

Базовый каркас письма в TJML может выглядеть так:

1
2
3
4
5
6
7
<tjml>
  <m-body>
    <m-wrap width="600">
      <!-- контент письма -->
    </m-wrap>
  </m-body>
</tjml>

Здесь роли компонентов распределяются следующим образом:

• <tjml> — корневой контейнер, обрамляющий весь код;
  
  
• <m-body> — основное тело письма, которое содержит весь его контент;
  
  
• <m-wrap> — обёртка, отвечающая за ширину, отступы, фон, выравнивание и другие параметры.

Для построения многоколоночной структуры в письме могут использоваться два типа композиции контента. Они определяют, как именно блоки будут вести себя на мобильных устройствах:

• Неперестраиваемые (резиновые) блоки. Здесь элементы остаются в одной строке. За это отвечает компонент <m-row>: он обрамляет блоки <m-column>, которые масштабируются в мобильных клиентах.
  
  
• Перестраиваемые блоки. Это компоненты <m-box>, которые обрамляются с помощью <m-boxes>. В мобильной версии письма они автоматически выстраиваются друг под другом, если не помещаются в одну строку.

Внутрь структур добавляются контентные блоки, в том числе текст (<m-text>), изображения (<m-img>), кнопки (<m-button>) и другие. Больше деталей о компонентах TJML можно узнать в документации.

Ниже — упрощённый пример того, как может выглядеть письмо, свёрстанное в TJML:

1
2
3
4
5
6
7
8
9
10
<m-body bgcolor="#ffffff" font-family="Arial, sans-serif">
  <m-wrap width="600" padding="20px" bgcolor="#f9f9f9">
    <m-text font-size="20px" color="#333333" align="center">
      Привет! Это письмо собрано на TJML.
    </m-text>
    <m-button href="https://docs.pixcraft.io" bgcolor="#6a66d3" color="#ffffff" border-radius="6px" width="200">
      Узнать больше
    </m-button>
  </m-wrap>
</m-body>

Что делает TJML особенным

Работа с кодом в браузере

Чтобы начать работу с TJML, достаточно открыть онлайн-редактор Playground. Прямо здесь можно верстать и визуально проверять письмо, переключаться между десктопным и мобильным отображением, тестировать тёмную тему и просматривать готовый HTML-код.

При этом с TJML можно работать в любом IDE. Для ещё большего комфорта мы:

• разработали плагин для VS Code, добавляющий автокомплит и подсказки по доступным компонентам и атрибутам;
  
  
• подготовили web-types для продуктов JetBrains (WebStorm/PhpStorm).

HTML и AMP в одном коде

В классическом подходе AMP- и HTML-версии письма — это две независимые разметки, которые верстаются по отдельности. Однако TJML значительно упрощает этот процесс: в рамках разметки фреймворк формирует сразу две версии кода.

Если нужно, чтобы определённый блок отображался только в одной из версий, можно использовать условный рендеринг:

<m-wrap m-if="isAmp"> <!-- контент для AMP --> </m-wrap>

<m-wrap m-if="!isAmp"> <!-- контент для HTML --> </m-wrap>

При этом TJML сам подключает необходимые AMP-компоненты, если они задействованы в коде (например, amp-carousel, amp-form или amp-list).

Отображение в почтовых клиентах

Одним из основных преимуществ TJML является продуманный подход к совместимости с различными почтовыми клиентами, включая Outlook и Яндекс Почту:

• Десктопная версия Outlook использует движок рендеринга, где современные CSS-свойства не работают. TJML автоматически добавляет VML-блоки и условные комментарии, чтобы фоны, выравнивание и отступы корректно отображались даже в старых версиях клиента.
  
  
• Яндекс Почта, в свою очередь, не поддерживает медиа-запросы. TJML формирует структуру так, чтобы сохранить адаптивность даже без них.

Проще говоря, TJML убирает из процесса рутину, связанную с кросс-клиентной адаптацией. Вопросы совместимости и корректного отображения решаются на уровне фреймворка.

Контроль веса и оптимизация кода

В email-маркетинге вес писем не менее значим, чем их наполнение. К примеру, Gmail автоматически обрезает письма, если их размер превышает 102 КБ, что может повлиять на вёрстку и работоспособность трекинговых пикселей.

TJML предупредит, если текущий размер кода превышает рекомендуемое значение. При необходимости можно запустить встроенную оптимизацию, чтобы удалить лишние пробелы, переносы и неиспользуемые стили. В результате вы получите компактный и стабильный код рассылки, который корректно отображается и не обрезается в почтовых клиентах.

Проверка ошибок и типографика

В процессе работы TJML проверяет структуру письма и корректность вложенности m-элементов. Если обнаружатся нарушения, фреймворк предупредит пользователя о них.

Дополнительно в TJML предусмотрен автоматический типограф: он расставляет неразрывные пробелы, чтобы убрать висячие союзы и предлоги. Благодаря этому письмо выглядит аккуратно не только технически, но и визуально.

Вёрстка пиксель в пиксель

Чтобы между дизайн-макетом и вёрсткой не было визуальных расхождений, в TJML предусмотрен инструмент Pixel Perfect. Работает он так: для проверки письма необходимо загрузить макет в графическом формате (например, PNG или JPG). Затем нужно прописать тег и атрибут с указанием адреса:

<tjml pixel-perfect="img/maket.png">

После этого необходимо совместить макет с вашей вёрсткой, указав относительное смещение, и выбрать режим наложения (прозрачность или вычитание).

Как автоматизировать вёрстку с ChatGPT

Чтобы верстать письма на TJML было ещё проще, мы обучили специальную версию ChatGPT работе с фреймворком. Она помогает создавать письма буквально по запросу. Достаточно сформулировать описание, и уже через несколько секунд вы получите TJML-код, который сразу можно добавлять в редактор и адаптировать под задачу.

Но функционал специальной версии ChatGPT не ограничивается только этим. Помимо генерации она:

• умеет вносить правки в существующий код на основе текстового описания;
  
  
• помогает учиться работе с TJML: объяснять назначение тегов и подсказывать, какие атрибуты стоит использовать в разных сценариях.

Результаты и эффективность

Фреймворк уже прошёл проверку в реальных условиях и может использоваться в рабочих проектах.

В частности, мы помогали внедрять TJML в ежедневную работу одного из крупных российских маркетинговых агентств. Здесь на начальных этапах фреймворк дал заметный рост производительности. Даже при создании сложных писем средняя скорость вёрстки увеличилась более чем на 50%, а при создании AMP-писем — в среднем в 1,5 раза без потери качества.

Следующий показатель — чистота и компактность разметки. В сравнительных тестах при использовании TJML код весил 13,5 КБ, тогда как аналог на MJML — более 22 КБ. Меньший вес обеспечивает более быструю загрузку и снижает риск обрезки письма в Gmail.

Ещё одно преимущество TJML — низкий порог входа. Фреймворк позволяет сосредоточиться на структуре и дизайне письма, не углубляясь в тонкости адаптации под множество почтовых клиентов. Наконец, одним из главных аргументов в пользу TJML остаётся уже упомянутая стабильность отображения, в том числе в наиболее требовательных к вёрстке email-клиентах.

Заключение

С TJML процесс создания рассылок становится не только быстрым, но также стабильным и надёжным. Контроль качества обеспечивается на каждом этапе, начиная от творческой задумки и заканчивая запуском рассылки. Для маркетинговых специалистов это означает меньше времени на отладку и больше — на контент и креатив.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш Telegram-канал. Там мы делимся полезными материалами, лайфхаками и идеями для работы.