Вёрстка писем через email-фреймворки: полное руководство

Привет, маркетологи и немаркетологи! На связи Лилит из enKod’а 👩🏽‍💻

В этой статье рассмотрим, как использовать email-фреймворки для упрощения процесса верстки и создания качественных писем. Полезно будет тем, кто предпочитает верстать письма кодом =)

1. Что такое email-фреймворки и зачем их использовать?

Email-фреймворк — это набор готовых HTML и CSS шаблонов и компонентов, которые помогают быстро и качественно создавать письма для email-рассылок. Они содержат проверенные шаблоны, которые адаптированы под разные почтовые клиенты и устройства.

Использование email-фреймворков экономит время, упрощает создание адаптивных писем и помогает избежать распространенных проблем с совместимостью. Почтовые клиенты, такие как Outlook, Gmail, Yahoo, по-разному интерпретируют HTML и CSS-код. Иногда это вызывает сложности с отображением писем, а фреймворки гарантируют корректное отображение контента.

2. В чём феномен email-фреймворков?

Email-фреймворки позволяют:

• Упростить создание писем благодаря готовым модулям и адаптивным шаблонам.
• Гарантировать совместимость с разными почтовыми клиентами и устройствами.
• Создавать адаптивный дизайн, который корректно отображается на мобильных устройствах и десктопах.

3. Популярные email-фреймворки

Среди множества инструментов для верстки писем можно выделить три самых популярных:

MJML

Email-фреймворк от Mailjet. Позволяет создавать адаптивные шаблоны с упрощенным синтаксисом. MJML преобразует упрощенный код в готовый HTML, поддерживаемый большинством почтовых клиентов. Он поддерживает динамические и интерактивные элементы, которые делают email более привлекательным.

Пример базовой структуры письма на MJML:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px">Добро пожаловать!</mj-text>
        <mj-button href="https://example.com">Перейти на сайт</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Foundation for Emails

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

Наверняка, вы слышали про ещё один фреймворк – TJML, о нём поговорим отдельно.

TJML: новый модульный подход к верстке email-писем

TJML (Template JSON Markup Language) — это новый формат, который позволяет управлять шаблонами через JSON.
В TJML шаблон письма описывается с помощью JSON, который затем компилируется в HTML и CSS для отправки пользователю. Такой подход облегчает поддержку и управление шаблонами, поскольку JSON-файлы легко обновлять и настраивать.

Пример JSON-шаблона на TJML:

{
  "header": {
    "logo": "https://example.com/logo.png",
    "background": "#ffffff",
    "height": "80px"
  },
  "body": [
    {
      "type": "text",
      "content": "Добро пожаловать!",
      "font-size": "18px",
      "color": "#333333"
    },
    {
      "type": "button",
      "text": "Перейти на сайт",
      "url": "https://example.com",
      "background": "#4CAF50",
      "color": "#ffffff"
    }
  ],
  "footer": {
    "content": "Спасибо за внимание!",
    "background": "#eeeeee"
  }
}

+ Преимущества использования TJML:

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

— Недостатки TJML:

• Требует компиляции: для отправки необходимо преобразовать JSON в HTML и CSS.

Но благо есть онлайн-сервисы, которые позволяют делать это за секунды:

Конвертация JSON в HTML через https://app.pixcraft.io/playground/

• Ограничения по стилям: несмотря на адаптивность, сложные стили и анимации в TJML могут быть ограничены.

4. Основные элементы письма и их верстка с помощью фреймворков

Рассмотрим на примере MJML:

Заголовок
Заголовок письма — первое, что видит пользователь. Он должен быть кратким и цепляющим. Важный аспект — размер и шрифт текста.

<mj-text font-size="24px" font-weight="bold" color="#333333">Ваш эксклюзивный доступ к скидкам!</mj-text>

Текстовые блоки
Для текста используйте mj-text в MJML или row/columns в Foundation, чтобы задавать стиль и адаптивность.

Кнопки
Кнопка — ключевой элемент, ведущий к конверсии. Она должна быть яркой и заметной.

<mj-button background-color="#f45e43" color="white"
href="https://example.com">Подробнее</mj-button>

Изображения
Подбирайте изображения под разные экраны. MJML и Foundation позволяют задавать размеры, подходящие для мобильных устройств.

<mj-image width="300px" src="https://example.com/image.jpg"></mj-image>

5. Какой фреймворк выбрать?

Выбор фреймворка зависит от задач:

• MJML — для адаптивных писем, с поддержкой сложных стилей.
• Foundation for Emails — для масштабных проектов и команд, которым важна интеграция с внутренними системами.
• TJML — для автоматизации и централизованного управления шаблонами.

Лучшая практика: использование комбинаций фреймворков

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

Полезные советы по вёрстке писем

• Не используйте CSS Flexbox или Grid — многие почтовые клиенты не поддерживают эти современные технологии.
• Избегайте JavaScript — большинство почтовых клиентов блокируют его.
• Табличная верстка — для писем в email по-прежнему используют таблицы, так как они более совместимы с разными почтовыми клиентами.
• Минимализм в дизайне — избегайте перегруженности. Четкий и лаконичный дизайн выглядит профессионально и повышает читаемость.
• Inline-стили — поскольку email-клиенты часто блокируют внешние стили, лучше использовать встроенные стили для каждого элемента.
• Протестируйте письмо перед отправкой, чтобы убедиться, что оно отображается правильно.

Для этого:

1. Проверьте, как письмо выглядит в популярных почтовых клиентах (Outlook, Gmail, Yahoo).
2. Используйте инструменты для тестирования адаптивности (например, Chrome DevTools).
3. Применяйте сервисы проверки кроссплатформенности писем, такие как Litmus или Email on Acid.

После тестирования можете экспортировать HTML-код из фреймворка и загрузить его в платформу enKod.

Добавление HTML-кода из фреймворка в enKod

Даём полезные советы по автоматизации маркетинга в нашей рассылке – подпишитесь! =)