Красивые письма и Email-рассылки на 1С-Битрикс: верстка почтовых шаблонов

• Почему мы занимаемся темой красивых рассылок?
• Покажи мне как выглядят письма с твоего сайта и я скажу насколько ты крут
• Типы писем
• Как сделать письма сайта красивыми
• Создание верстки почтового шаблона
  • С помощью конструктора
  • С помощью специальной библиотеки
• Дополнительная подготовка почтового шаблона
• Как использовать шаблон почтовой рассылки в сайте на 1С-Битрикс
  • Красивые уведомления с сайта
  • Красивая рассылка по базе подписчиков
• А что дальше?

Почему мы занимаемся темой красивых рассылок?

Мы не просто "веб-разработчики на Битриксе". Наша ключевая компетенция – умение интегрировать различные веб-системы и программные продукты между собой.

ИНТЕРВОЛГА – компетентный веб-интегратор. Мы можем решить все задачи интеграции собственными силами. Мы приносим пользу бизнесу клиента за счет осмысленного применения веб-технологий.

Яркий пример "интеграционной" задачи – красивые стилизованные письма, которые решают бизнес-задачи вне зависимости от того, как именно читает письма ваш клиент и на каком устройстве.

Мы решили эту задачу для себя и можем помочь вам.

Итак, в предыдущих статьях про Email-рассылки мой коллега Александр Давыдов рассказал о том, зачем рассылки нужны и как их сделать “на скорую руку”.

Я перехвачу у него эстафету и расскажу что можно сделать круче и какой крови это будет стоить. Описанные Александром способы Email-рассылок (через модуль "Рассылки", через MailChimp), как я уже говорил, работают, но не лишены недостатков. Например, к модулю рассылок 1С-Битрикс вы не сможете автоматически применять красивое оформление. А MailChimp бесплатен только если у вас менее 2000 подписчиков (потом начинает стоить немалых денег).

Кроме того, в MailChimp приходится постоянно вручную добавлять новые адреса (например тех, кто заполнил форму обратной связи или оформил заказ на сайте). Для решения конкретно этой проблемы мы даже сделали свой модуль для Marketplace, но опыт показал что он пользуется низкой популярностью и поэтому мы решили не тратить силы на его поддержку и продажи.

Покажи мне как выглядят письма с твоего сайта и я скажу насколько ты крут

Письма они как люди: бывают фотомодели, а бывают серые мышки. Уверен, вы тоже это замечали. Вот так в моем личном почтовом ящике выглядят первые:

А вот так вторые:

Откуда берутся такие “серые” письма? Я уверен что серьезная причина только одна: сделать по-настоящему красивые письма сложно. Причем сложно с 2-х позиций: творческой и технической.

Типы писем

Все письма, отправляемые по электронной почте (в том числе отправляемые сайтом) можно поделить следующим образом:

• В текстовом формате Это самый простой тип - обычные письма не содержащие никакого форматирования. Только текст и ничего более. Именно в этом формате сайты на 1С-Битрикс по умолчанию рассылают пользователям уведомления (о регистрации, смене пароля и т.д.);
• В HTML-формате;
• С минимальным использованием HTML Эти письма используют простейшие способы форматирование: цвет и размер текста, картинки. Для этого используются html-теги - те же самые что и в визуальном редакторе на сайте. Именно такие (и только такие, на момент написания статьи) письма умеют рассылать модули “Рассылки” и “Email-маркетинг”в 1С-Битрикс;
• Специально сверстанные Это самый сложный из типов писем - для него необходима специально подготовленная верстка. Именно про этот тип писем моя статья.

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

Красивые письма получаются если для них подготовлена специальная верстка. В отличие от писем с минимальным использованием HTML, в данном типе проектируется модульная сетка (структура письма). Выделяются специальные места под логотип, название сайта, контент. Подбираются цвета и размеры.
Сделать такую верстку можно одним из 2-х способов:

• Использовать профессиональный сервис-конструктор;
• Сверстать самостоятельно. С нуля или используя специально “заточенную” под это библиотеку.

Создание верстки почтового шаблона

Какие варианты возможны

С помощью конструктора

Для этого способа рекомендую использовать сервис MailChimp. Его полезной особенностью является бесплатный и весьма удобный редактор шаблонов писем. Он работает по принципу Drag&Drop. Вы просто накидываете блоки, редактируете текст и картинки.

Самое главное — не нужно изучать HTML, а значит не нужно привлекать верстальщика/программиста. После того как вы сконструировали свой шаблон письма — сохраните его.
Далее перейдите в список шаблонов и получите HTML-код. Этот код и есть наша цель.

С помощью специальной библиотеки

Оставь надежду, всяк сюда входящий

Данте Алигьери, «Божественная комедия»

Этот эпиграф я выбрал не просто так. Ручная верстка почтовых шаблонов это непростой процесс. Он требует знания многих нюансов (уже не браузеров, а почтовых программ). Чтобы создать такую верстку потребуется квалифицированный верстальщик.

Можно провести параллель с версткой сайта. На что тратится много времени? Конечно же на поддержку разных браузеров (чаще всего старых).

При верстке шаблонов почтовых рассылок огромное время будет потрачено на то же самое. Только теперь вместо IE, Firefox, Chrome и Opera у нас есть куча Email-клиентов: Gmail, Яндекс.Почта, Apple Mail и Outlook всех версий. Вынужден констатировать, что последние отстают в развитии лет на десять.

Этот способ следует выбирать если:

• возможностей конструктора не хватило (какой-то блок нужно подвинуть, а он не двигается);
• необходимо сделать не один шаблон письма, а много: для служебных сообщений с сайта, для рассылок разного типа и с разными оформлением контента.

Рекомендуем создавать верстку не с чистого листа, а используя одну из библиотек:

• http://zurb.com/ (мы сами выбрали именно ее);
• https://github.com/mailchimp/Email-Blueprints

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

Дополнительная подготовка почтового шаблона

К этому моменту мы имеем HTML-верстку. Но она еще не готова к отправке.

Дело в том, что все стили оформления которые вы вносили (через редактор MailChimp-а или при самостоятельной верстке) сохранены в теге <style> внутри шаблона. Почтовые клиенты при получении письма и отображении его пользователю удалят такие стили. Сделано ли это из соображений безопасности или по другим причинам — не ясно.

Факт остается — все стили перед отображением будут удалены. А Microsoft Outlook еще и своих стилей добавит. В результате ваше письмо будет выглядеть безобразно. Вот пример сверстанной рассылки:
А вот так она отобразится в Outlook если отправить ее без дополнительной обработки: Решение этой проблемы существует и называется оно “Инлайнер” (inliner). Это инструмент который специальным образом преобразовывает ваш HTML-шаблон. Для каждого элемента вашего шаблона он вычисляет перечень стилей, которые к нему (элементу) должны быть применены, и записывает их в атрибут style соответствующего HTML-тега. Такие стили уже не вырезаются и не перебиваются почтовиками.

Воспользоваться можно например вот этими инлайнерами:

• http://zurb.com/ink/inliner.php$
• http://templates.mailchimp.com/resources/inline-css/

В результате вы получаете HTML-код, который можно отправлять через сайт. Этот код должен отображаться во всех почтовиках одинаково. Само собой, это нужно проверять.

Как использовать шаблон почтовой рассылки в сайте на 1С-Битрикс

Возможны следующие сценарии:

• Сделать все исходящие уведомления сайта красивыми$
• Сделать красивую рассылку по базе подписчиков

Красивые уведомления с сайта

Если на вашем сайте пользователи регистрируются, заполняют формы обратной связи или оформляют заказы — сайт частенько отправляет им письма. “Взрослые” (в смысле “сложившиеся”) компании обычно хотят, чтобы даже такие уведомления были красивыми и придерживались брендбука.

Реализовать этот сценарий можно используя новый функционал 1С-Битрикс — “Темы оформления”. Темы оформления позволяют добавлять “шапки” и “подвалы” к шаблонам исходящих писем.

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

Контентную часть нужно поместить в шаблон почтового уведомления. И вот тут возникает сложность: “проинлайненный” шаблон письма настолько громоздок, что применение этой верстки даже к одному уведомлению требует много времени (от десятков минут до нескольких часов) и нервов.

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

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

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

Красивая рассылка по базе подписчиков

Будем честны с собой: модуль “Рассылки” в 1С-Битрикс мертв. В нем реализован очень ограниченный набор действий, а серьезных обновлений не было много лет и более не будет. Модуль “Email-маркетинг” уже сейчас умеет намного больше, хотя темы оформления (шапки и подвалы) не поддерживает. Несмотря на это, я предлагаю использовать именно второй.

Все относительно просто, если ваша рассылка разовая и вы не собираетесь ее редактировать. При создании рассылки нужно выбрать “Пустой шаблон” и вставить туда полученный ранее (после инлайнера) шаблон почтовой рассылки. На этом все, если рассылка у вас единичная.

Если же ваш шаблон это только шаблон, а содержание вы хотите редактировать - возникает проблема. “В лоб” она решается только большим количеством ручного труда (на подготовку сниппетов). Однако мы придумали и умное решение.

А что дальше?

Если вы дочитали до этого момента - поздравляю вас с просветлением. Теперь вы знаете как непросто сделать красивую рассылку и какие проблемы ожидают на этом пути. Когда мы (ИНТЕРВОЛГА) начинали делать такие рассылки/шаблоны для наших клиентов мы набили много шишек на каждой из описанных проблем.

В результате мы решили автоматизировать часть этого процесса и собрать решения для описанных проблем в одном месте. Это место называется модуль “Почтовые инструменты” для 1С-Битрикс. Его ядром является тот самый инлайнер.

На этом интригующем моменте я хочу завершить статью. Читайте продолжение:

• Подробное описание модуля "Почтовые инструменты";
• Подробная инструкция как создать красивые уведомления и рассылки на 1С-Битрикс.