Данная тема раскрывается в 2 статьях (эта вторая):
- Зачем нужна почтовая рассылка сейчас?
- Как сделать свою верстку писем?
Как сверстать письмо для почтовой рассылки?
Для начала нужно понять, что есть обычная верстка веб страниц и есть верстка писем. Это не одно и то же. Для того, чтобы у пользователя ваше письмо отображалось корректно, нужно использовать специфичную верстку – табличную. Да-да, как в далеких 2005х годах, все элементы верстки должны представлять из себя компоненты таблицы: tr
– строки и td
– ячейки.
Почему используется табличная верстка?
Дело в том, что нет общего стандарта для всех почтовых сервисов. Если вы создадите письмо на html5, то с вероятностью 100% +- eps ваше письмо не будет отображено пользователю корректно.
Когда как количество (движков) браузеров ограничено, почтовые сервисы плодятся как после дождя и их сотни, если не тысячи. Вот и получается, что, имея несколько движков, договориться о стандартизации не сложно, а имея тысячи email сервисов – задача почти невозможная.
Как сделать красивую верстку писем для рассылки?
Не стоит переживать, что из-за табличной верстки письмо будет некрасивым. У нас все также остается в распоряжении html4 и css2. Конечно, технологии не новы, но и на них можно добиться потрясающего результата.
В данной статье будет рассмотрен framework (инструмент или библиотека) под названием MJML. Если вы когда-либо пробовали табличную верстку, думаю вы понимаете, что код разрастается в геометрической прогрессии, читабельность → 0, а исправить что-либо займет времени ± ∞.
А чтобы верстка была красивой, нужно не забывать про 3 пастулата дизайна:
- Использовать не более 3-х цветов.
- Должно сохраняться выравнивание элементов (внутренние, внешние отступы).
- Любой интерфейс / текст всегда можно упростить в 2 раза.
Как видно на скриншоте выше: потребовалось порядка 1000 строк кода табличной верстки для маленького макета.
Чтобы не мучить себя и не рвать на себе волосы воспользуемся framework – ом mjml, с очень хорошей документацией на официальном сайте.
Для чего нужен mjml?
Простой ответ: чтобы из кода в 200 строк (слева на картинке выше) получить готовую табличную верстку в 1000 строк (справа на картинке выше).
Mjml поможет вам создать адаптивную верстку без лишних проблем, фреймворк имеет множество готовых компонентов для разметки.
Как работать с mjml?
Есть несколько способов начать работать с mjml:
- Воспользоваться онлайн редактором
- Скачать npm пакет для node.js.
npm install mjml
- Скачать программу mjml и разрабатывать в ней
- Установить плагин mjml для вашего IDE (VS Code, Sublime, Atom)
Из всех перечисленных вариантов удобнее всего скачать плагин для VS Code (так как я всегда использую данный редактор). Также npm пакет найдет свое применение, если вы хотите автоматизировать создание писем и, например, засунуть создание рассылки в python или js скрипт.
Как установить плагин в VS Code?
Для других редакторов установка аналогичная.
- Заходим во вкладку «Plugins» в левом меню
- В поиске вбиваем mjml
- Кликаем «install»
- Готово
Как начать верстать письмо на mjml?
Все просто.
- Создаете папку, где будет храниться весь код и медиа
- Открываете директорию (папку) в своем редакторе
- Создаете файл с расширением mjml, например, post.mjml
- Начинаете писать
Огромный плюс верстки писем на mjml – вам не нужны сборщики (webpack) и таскеры (gulp, grunt), все эти функции выполняет сам mjml. Внутри пакета есть 2 главных функционала:
- Open preview to the side – аналог browserSync. Позволяет в real-time отслеживать изменения внутри вашего редактора
- Export HTML – позволят скомпелировать ваш код в готовый html.
Чтобы вызвать данные методы в 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?
Есть тег <span>
из html
, который можно использовать внутри mjml верстки.
Есть пример использования?
В скором времени выйдет отдельная статья с видеозаписью о том, как дизайнить и верстать на mjml.