Pull to refresh

Почтовые рассылки на базе DIVной верстки: это возможно!

Reading time 4 min
Views 4.2K
Тема почтовых рассылок на хабре поднималась буквально недавно, но там не освещался один важдый момент: как обеспечить редактируемость контента этой рассылки после красивой и аккуратной верстки.

Ведь если сверстано на таблицах, с пустыми gif'ами для отступов — результат «монолитный», но не дай бог такое редактировать контент-менеджеру. Моментально всё поедет, да и не умеют нормально визивиги работать с таким ужасом.

Так можно ли подготовить нормальную, дивную верстку, которая легко поддерживается, удобно собирается в рассылках из частей, может редактироваться из визивига, и при этом будет хорошо смотреться в почте?


Не буду повторяться, вкратце, требования к HTML файлу, отсылаемому клиенту:
  1. Никаких внешних стилей, никаких тегов <style>. Всё, что требуется должно быть в аттрибуте style. А, и никакого яваскрипта.
  2. Никаких отрицательных значений. Вообще. Отрицательные маржины, отрицательные паддинги — они просто выкидываются. Как неправильные.
  3. Никаких пробелов в значениях. Вообще. Да-да. Прощай background-position.
  4. Проблемы с фоновыми изображениями. Аттрибут background="" у <table> — работает, background-image — как правило не работает. Да-да, background-position прощай второй раз.
  5. 100% текстовый вид. Графические элементы не факт что покажутся вообще, и не факт, что пользователь ткнёт «загрузить» их.

Есть еще несколько «тонких» моментов — например, height могут некоторые «слишком умные» веб-почты (не будем тыкать пальцами) заменяют на min-height, что может выдать интересные эффекты. Такие моменты решаются тривиально — добавлением пары height + max-height.

Итак, задача: есть на входе HTML с правильной дивной версткой, есть CSS к нему (прописана в нем, или задается отдельно — не суть). Надо сформировать HTML, который можно отсылать пользователю. Вариант ручной обработки даже не рассматриваем — всё, что может быть автоматизировано, должно быть автоматизировано.

Для решения задачи №1 нагуглился Emogrifier. Что он делает? Получает на вход HTML содержимое тега <body> и общий CSS файл, на выходе заменяет все class/id аттрибуты на аттрибут style="" содержащий требуемые стили. Профит!

Решение задачи №2 — чуть более сложная дивная вёрстка, и макет, изначально без необходимости наезда элементов друг на друга.

Решение задачи №3 просто — все составные параметры разбиваются на независимые. То есть вместо margin добавляем margin-top, margin-bottom, margin-left, margin-right. Аналогично с padding, background, font. Дуэт паяльница и такой-то матери легко скрафтили патч к эмогриферу, релизующие данный твик.

Решение задачи №4 более сложное. Итак, вот у нас есть <h2>Некий заголовок</h2> который мы хотим чтобы выводился на розовом переливчатом фоне (или со скруглёнными уголками справа). Верстка выглядит банально:
#content h2{
    background: url(../images/h2-bg.png) no-repeat left top #ef5580;
    width: 627px;
    height: 25px;
    margin: 24px 0 13px 0px;
    padding: 6px 31px 0 31px;
    font-size: 17px;
    font-family: Georgia, Tahoma, Verdana, Arial, FreeSans, sans-serif;
    color: white;
    font-weight: normal;
}

Но это почти нигде не сработает! Почему? Пробелы в значениях, картинка через background-url. Решение? Надо перепаковать в нечто, похожее на:
<table background="images/h2-bg.png" bgcolor="#ef5580" border=0 style="border-collapse:collapse;margin:24px 0 13px"><tr><td><h2 style="padding:6px 31px 0;font:...;color:white;">Некий заголовок</h2></td></tr></table>


Для реализации этого решения был взят напильник по-толще и такая-то матерь по-старше, с помощью которых был обработан эмогрифер дальше, в результате чего в стилях появилось новое свойство tablify. Возможные значения: wrap, replace, embed.
  • tablify:wrap означает, что данный элемент надлежит обернуть в таблицу, перенеся фон и маржины на таблицу.
  • tablify:replace означает, что данный элемент надо _заменить_ на таблицу. Причем если изначально элемент пустой — останется только <table>. Если не пустой — исходное содержимое будет размещено в единственной ячейке новой таблицы
  • tablify:embed означает, что всё содержимое текущего элемента должно быть обёрнуто в таблицу.

Поиграйтесь с ними для вашей верстки. Думаю, точить верстку придётся не много.

Решение задачи №5 опишу в следующей статье. Там я расскажу о методиках, применямых для реализации текстовой подложки под картинкой, содержащей текст, доступный в случае недоступности изображений.

Результат этих страданий и разочарований представлен в микроскопическом архивчике emogrifier-dcb-1.0.tar.bz2 (6k).

Как пощупать? Распакуйте. Создайте внутри папочки html и html/styles/. Положите туда index.html, и в styles — screen.css. (Ну либо поправьте пути в sender.php. Затем в mailer.conf.php пропишите параметры вашего SMTP для отправки писем, и в sender.php поправьте $remote на указание фактического внешнего адреса через который доступны файлы, в массиве $headers — пропишите правильные From и To (через запятую несколько можно указать). Запустите sender.php и бегом проверять-любоваться ящиками.

В ПМ или в комментариях можете задавать вопросы по адаптации существующей верстки к почтовым рассылкам, но основной материал пойдёт следующим постом, если это кому-нибудь окажется нужным.

p.s.: данный пост-процессор используется вполне себе в продакшене на Астро7. Желающие полюбоваться результатом, могут подписаться на свой гороскоп с разных ящиков :)
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+42
Comments 16
Comments Comments 16

Articles