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

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

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

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

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

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

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

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

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

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

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

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

Типы писем

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

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

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

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

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

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

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

Самое главное — не нужно изучать HTML, а значит не нужно привлекать верстальщика/программиста. Шаблоны рассылок от модуля ИНТЕРВОЛГИ После того как вы сконструировали свой шаблон письма — сохраните его.
Правки заголовков Далее перейдите в список шаблонов и получите HTML-код. Редактирование текста Этот код и есть наша цель.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А что дальше?

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

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

На этом интригующем моменте я хочу завершить статью. Читайте продолжение:
Оцените статью
12.07.2015
Понравилась статья?
Поделитесь ссылкой с друзьями и коллегами!

Статьи по теме

Автоматизация и оптимизация бизнес-процессов — лонгрид, чтобы не запутаться Статья будет полезна всем, кто хочет улучшить эффективность своего бизнеса или узнать больше о возможностях автоматизации бизнес-процессов для повышения ко...
10 обязательных задач поддержки сайта на БитриксСтатья посвящена организации поддержки сайтов на Битрикс. Здесь не только про решение технических проблем и устранение багов. Здесь про развитие живых проектов...
B2B-SaaS или B2B-система (платформа+CRM) на вашем сервере: плюс и минусы, что выбрать? Введение Эта статья для коммерческих директоров, руководителей отделов продаж производственных и оптово-торговых компаний, которые ищут инструменты для ро...
Обзор международных исследований о тенденциях развития B2B-сегмента Важность темы — рост B2B-продаж в онлайне В современном бизнесе наблюдается стремительный переход в online оптовых продаж. Это стало одной из ключевых тен...
Несколько способов сделать оптовый заказ на портале — Обновление B2B-платформы (v2.0) Коллеги, спешим поделиться важной новостью! Мы обновили один из наших флагманских продуктов — готовую платформу оптовых продаж. B2B-платформа v2.0 сочетает...
Как аптеке получать больше заказов? Разбираем кейсы Мегамаркета (Сбер) и МегаптекиОбобщили для вас наш опыт разработки API в фармацевтике. Рассказываем как наши клиенты стали получать больше заказов от интеграции с агрегаторами/маркетплейсами...
Мы работаем по одному из двух форматов:
  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).
ИНТЕРВОЛГА предоставляет:
  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.
Ключевые услуги:
  • нагруженный интернет-магазин;
  • личный кабинет;
  • оптовые продажи — B2B-платформа;
  • маркетплейс;
  • технический аудит сайта;
  • Битрикс24 — корпоративные HR-порталы;
  • Битрикс24 — построение CRM-системы;
  • Битрикс24 — личные кабинеты сотрудников;
  • Битрикс24 — аудит портала;
  • 1С — интеграция с другими системами;
  • 1С — доработка системы;
  • маркетинг — комплексное интернет-продвижение;
  • маркетинг — продвижение для B2B.
Хотите получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишитесь на рассылку — спамить не будем