[Upd 05.03.15] Особенности верстки HTML-писем или Как сверстать почтовую рассылку и никого при этом не убить

Любой, кто хоть когда либо сталкивался с версткой HTML-email помнит этот кошмар.

Я тоже сталкивался, правда всего пару раз за всю практику пока что. Но даже эти пару раз оставили после себя неизгладимые впечатления. Как же тяжело было приучать себя писать inline стили, это нечто.

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

Об автоматизации.

Первое автоматизированное решение

Представьте, что у вас сверстан шаблон некой страницы вашего сайта. Сверстан с помощью html и css. И вы обнаруживаете, что необходимо ту же верстку применить для писем. Использовать ту же разметку вы может быть и могли бы, хотя бы процентов на 50% (что тоже неплохо), но вот беда даже при таком раскладе, все равно надо заново прописывать стили в атрибут style.

Как-то в очередной раз перенося атрибуты одного элемента из css в атрибут style, я подумал что это дело было бы неплохо автоматизировать. И я сказал себе, что если придется хоть раз верстать письма, я обязательно сделаю какой нибудь скрипт для этого.

Но я так и не собрался. А вот Dave Cranwell собрался и сделал. Написал на питоне и выложил на гитхаб. Сам конвертор css стилей в атрибуты style находится по этому адресу: http://inlinestyler.torchboxapps.com/

Второе

Совершенно случайно я наткнулся на генератор кнопок для писем — http://buttons.cm/

И третье

Что я хотел отметить. Как оказалось, на данный момент существует даже HTML Email Boilerplate — http://htmlemailboilerplate.com/

[UPD 02.05.14]: Четвертое

Сегодня я узнал о еще одном наборе готовых email-шаблонов: http://responsiveemailpatterns.com/ — обещают responsive, но это требует использования style тега и Media Queries.

Я его еще не испытывал, но вероятно может быть полезно.

[UPD 12.09.14] Пятое и возможно самое важное.

Я однажды по работе сталкивался с сервисом тестирования email рассылок. Но он как-то выпал у меня из головы, а тут вот нашелся Называется он litmus.com. Сервис — платный и удовольствие это не дешевое (минимальный — $79 сейчас). Но он того стоит. Принцип их работы простой — вы загружаете html код письма, а они его рендерят под все актуальные email-клиенты (Outlook, Thunderbird, даже кажется The Bat был), включая мобильные (самый проблемный помню был на Blackberry), а также включая популярные веб сервисы (GMail, Outlook, Yahoo. Яндекса тогда по-моему не было у них). Если вы до этого никогда не видели ваших email-писем в Outlook, то вы узнаете много новых нецензурных слов про этот email-клиент.

[UPD 12.09.14] Шестое

Я слышал и даже работал с фреймворком Foundation от Zurb. Но никогда не мог подумать, что у Zurb есть еще крутые штуки. И одна из них называется Ink. Сразу спешу вас расстроить — творить магию за вас оно не будет. Придется все равно делать все самому. Но кое-какая помощь найдется, а именно:

  • email boilerplate — он на самом деле выглядит пустенько
  • набор шаблонов — здесь
  • инструмент для конвертирования обычных стилей в inline-стили — Inky Inliner
  • и насколько я понял — их responsive сетка для верстки

[UPD 05.03.15] Седьмое

Недавно в верстке простых автоматических писем для одного из проектов (приветственное письмо, смена пароля, уведомления) я использовал редактор писем от MailChimp. Получилось дешево и сердито, но выглядело намного лучше, чем plain text. Сначала я создал шаблон в редакторе, экспортировал его в html и экспортированный html провел через их же (MailChimp) инлайнер — http://templates.mailchimp.com/resources/inline-css/ и уже этот шаблон потом использовал на проекте.

Сами статьи в помощь по email-верстке

Aralot

10 рекомендаций по html-верстке электронных писем [25 мая 2009] — http://habrahabr.ru/post/60420/

latrekc

Грабли при верстке HTML писем [18 октября 2010] — http://habrahabr.ru/post/106387/

dudeonthehorse

Верстка почтовых рассылок [19 января 2011] — http://habrahabr.ru/post/112163/

С версткой почтовых рассылок все не так уж плохо [21 января 2011] — http://habrahabr.ru/post/112307/

Выбираем сервис массовых почтовых рассылок [26 января 2011] — http://habrahabr.ru/post/112531/

Юзабилити почтовых рассылок [14 февраля 2011] — http://habrahabr.ru/post/113709/

Верстка почтовых рассылок: взгляд изнутри [20 февраля 2011] — http://habrahabr.ru/post/114119/

Верстка почтовых рассылок: разбор полетов [21 февраля 2011] — http://habrahabr.ru/post/114234/

zevvssibirix

Верстка e-mail рассылок — «подводные камни». Часть первая. Картинки [25 февраля 2011] — http://habrahabr.ru/company/sibirix/blog/114472/

artyom_256

Особенности обработки HTML-писем [24 июня 2012] — http://habrahabr.ru/post/146414/

grokru

Адаптивные email’ы [21 августа 2013] — http://habrahabr.ru/post/190814/

Оставлю это все здесь, возможно когда-нибудь пригодиться.

Полезно(28)Бесполезно(0)

5 Responses to “ [Upd 05.03.15] Особенности верстки HTML-писем или Как сверстать почтовую рассылку и никого при этом не убить ”

  1. О, очень полезная статья для меня! Спасибо!

    Полезно(1)Бесполезно(1)
  2. Вот отличная инструкция с кодом http://advert.subscribe.ru/specifications#html . Просто вставить свои картинки и текст. И разослать через сервис http://pro.subscribe.ru/ Там же в визуальном html редакторе можно поправить.

    Полезно(3)Бесполезно(0)
  3. Hallo!
    Слушай я прочитала и понимаю, что это все очень полезно, но никак не могу связать всю эту полезную инфу вместе.
    Ты не мог бы со мной связаться и по-ступенчато мне помочь с созданием своей рассылки
    Хочется сделать по-умному и красиво

    Если у тебя есть время и не западло помочь

    Полезно(3)Бесполезно(3)
    • Городецкий

      Городецкий

      Добрый день, к сожалению времени не густо.

      Полезно(1)Бесполезно(0)
  4. Алекс

    Отличная статья про верстку письма. А кто делает дизайн письма, нашел отличную статью для них http://css-html.ru/stati/tak-sozdaetsya-dizajn-htlm-pisma/

    Полезно(0)Бесполезно(0)
Комментарии закрыты.