Как сделать письмо для рассылки на почту. Верстка писем MJML
IT маркетинг
09/07/2020

Как сделать письмо для рассылки на почту. Верстка писем MJML

Реклама

Автор: Камиль Г.
Как сделать письмо для рассылки на почту. Верстка писем MJML

Данная тема раскрывается в 2 статьях (эта вторая):

  1. Зачем нужна почтовая рассылка сейчас?
  2. Как сделать свою верстку писем?

Как сверстать письмо для почтовой рассылки?

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

Почему используется табличная верстка?

Дело в том, что нет общего стандарта для всех почтовых сервисов. Если вы создадите письмо на html5, то с вероятностью 100% +- eps ваше письмо не будет отображено пользователю корректно.

Когда как количество (движков) браузеров ограничено, почтовые сервисы плодятся как после дождя и их сотни, если не тысячи. Вот и получается, что, имея несколько движков, договориться о стандартизации не сложно, а имея тысячи email сервисов – задача почти невозможная.

Как сделать письмо для рассылки на почту. Верстка писем MJML

Как сделать красивую верстку писем для рассылки?

Не стоит переживать, что из-за табличной верстки письмо будет некрасивым. У нас все также остается в распоряжении html4 и css2. Конечно, технологии не новы, но и на них можно добиться потрясающего результата.

В данной статье будет рассмотрен framework (инструмент - библиотека) под названием MJML. Если вы когда-либо пробовали табличную верстку, думаю вы понимаете, что код разрастается в геометрической прогрессии, читабельность → 0, а исправить что-либо займет времени ± ∞.

А чтобы верстка была красивой, нужно не забывать про 3 пастулата дизайна:

  • Использовать не более 3-х цветов.
  • Должно сохраняться выравнивание элементов (внутренние, внешние отступы).
  • Любой интерфейс / текст всегда можно упростить в 2 раза.
Как сделать письмо для рассылки на почту. Верстка писем MJML

Как видно на скриншоте выше: потребовалось порядка 1000 строк кода табличной верстки для маленького макета.

Чтобы не мучить себя и не рвать на себе волосы воспользуемся framework – ом mjml, с очень хорошей документацией на официальном сайте.

Для чего нужен mjml?

Как сделать письмо для рассылки на почту. Верстка писем MJML

Простой ответ: чтобы из кода в 200 строк (слева на картинке выше) получить готовую табличную верстку в 1000 строк (справа на картинке выше).

Mjml поможет вам создать адаптивную верстку без лишних проблем, фреймворк имеет множество готовых компонентов для разметки.

Как работать с mjml?

Есть несколько способов начать работать с mjml:

  1. Воспользоваться онлайн редактором
  2. Скачать npm пакет для node.js. npm install mjml
  3. Скачать программу mjml и разрабатывать в ней
  4. Установить плагин mjml для вашего IDE (VS Code, Sublime, Atom)

Из всех перечисленных вариантов удобнее всего скачать плагин для VS Code (так как я всегда использую данный редактор). Также npm пакет найдет свое применение, если вы хотите автоматизировать создание писем и, например, засунуть создание рассылки в python или js скрипт.

Как установить плагин в VS Code?

Для других редакторов установка аналогичная.

  1. Заходим во вкладку «Plugins» в левом меню
  2. В поиске вбиваем mjml
  3. Кликаем «install»
  4. Готово
Как сделать письмо для рассылки на почту. Верстка писем MJML

Как начать верстать письмо на mjml?

Все просто.

  1. Создаете папку, где будет храниться весь код и медиа
  2. Открываете директорию (папку) в своем редакторе
  3. Создаете файл с расширением mjml, например, post.mjml
  4. Начинаете писать

Огромный плюс верстки писем на mjml – вам не нужны сборщики (webpack) и таскеры (gulp, grunt), все эти функции выполняет сам mjml. Внутри пакета есть 2 главных функционала:

  1. Open preview to the side – аналог browserSync. Позволяет в real-time отслеживать изменения внутри вашего редактора
  2. Export HTML – позволят скомпелировать ваш код в готовый html.
Как сделать письмо для рассылки на почту. Верстка писем MJML

Чтобы вызвать данные методы в VS Code необходимо нажать F1, вписать MJML, и выбрать необходимую инструкцию. (Картинка выше).

Какая структура у MJML кода?

Mjml – это такой же язык разметки, как и xml или html. Все четко и понятно. Многие теги совпадают с html, только добавляется префикс «mj-».

Верскта начинается / заканчивается тегами <mjml> … </mjml> соответственно. Есть аналог тега <head> - <mj-head>, <body> == <mj-body>, <button> == <mj-button>, <img> == <mj-image> и т.д.

Какие есть основные элементы верстки кода на mjml?

<mj-head>..</mj-head> - здесь вставляется title (<mj-title>) вашего письма, а также встраиваются стили. Причем есть возможность задать inline стили. Лучше использовать именно их, т.к. некоторые почтовые сервисы вырезают не inline стили из вашего письма.

<mj-body>..</mj-body> - сюда помещается весь ваш контент.

<mj-section>..</mj-section> - все элементы вашей верстки внутри body делятся на секции. Грубо говоря, одна секция – это одна строка.

<mj-column>..</mj-column> - это колонки ваших секций. Внутрь колонки вставляется все сотальное.

<mj-image>..</mj-image> - любые картинки.

<mj-button>..</mj-button> - кнопки и ссылки.

<mj-text>..</mj-text> - любые текстовые поля верстки. Аналог <p>..</p>.

<mj-navbar> <mj-navbar-link>…</mj-navbar-link> </mj-navbar> - разметка вашего меню, где <mj-navbar-link> - является пунктом меню.

И множество других тегов, которые вы найдете на странице документации.

Как сделать письмо для рассылки на почту. Верстка писем MJML

Что еще интересного о mjml?

Есть тег <span> из html, который можно использовать внутри mjml верстки.

Есть пример использования?

В скором времени выйдет отдельная статья с видеозаписью о том, как дизайнить и верстать на mjml.

Как сделать письмо для рассылки на почту. Верстка писем MJML
Вконтакте
Класснуть
Отправить
Вотсапнуть

Реклама