Создание html-верстки для электронных писем

Первое правило верстки писем в HTML — не пишите письма в HTML.

Волею судеб довелось мне столкнуться с версткой для электронных писем и честно скажу я вам это боль не самое приятное занятие. И сейчас я расскажу, почему это так и как упростить себе жизнь, создавая html-верстку для e-mail рассылок.

E-mail is not a platform for design (с) Jeffrey Zeldman .

Основная проблема в обилии почтовый клиентов, каждый из которых по своему находится где-то далеко от передовой развития css, а ориентируемся мы по традиции на самые хиленькие и слабенькие умом (потому что поддержка). Не хочу быть голословным и подкину для просмотра ссылку на сайт, на котором представлена большая таблица поддержки CSS для топ-10 самых популярных мобильных, веб и настольных почтовых клиентов на планете. Обратите внимание на один из самых популярных почтовиков - Google Gmail. Он не может responsive, не понимает тег style, link и в разделе selectors у него практически пустота. Банальный hover (наведение курсора) имеет поддержку 4 из 10.

Из вышесказанного вытекает проблема адаптировать письма под разные разрешения. Если выразиться кратко, то ситуация такая: за - можно верстать адаптивные письма, против - это не будет работать. Подробнее в статье - Использование media queries в вёрстке email-писем. В итоговой таблице слетели картинки check-green и check-X для обозначения поддержки, однако, для простых читателей, которые не лезут в код страницы, подскажу, что из 19 почтовых клиентов отмечены разрешительной галочкой всего лишь 9, меньше половины. Полагаю, вы обратили внимание что большинство html-писем, которые приходят к вам на почту, даже от очень крутых и именитых компаний, например таких как Blizzard Entertainment, а их письма ну очень красочные (подстать их играм), приходят шириной в 600 пикселей, даже если у вас огромнейший экран.

Понимая весь этот ворох проблем, мы мысленно и буквально возвращаемся в то время когда верстали таблицами, да-да именно так (как бы это ужасно не звучало). Но это еще не самое плохое, хуже то что надо писать инлайновые стили т.е к тегу добавляем атрибут style и в него прописываем все необходимые свойства. <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#000000; line-height: 14px;">Текст</span>
И так всякий раз на любой текст в нашем html-письме... Звучит удручающе, не так ли?

Благо мы не первые, кто столкнулся с этой темой, нам на помощь приходят опыт других людей и современные инструменты. Очень рекомендую ссылку на кучу полезных ресурсов, руководств и исследований. Чтобы не утомлять себя и не писать вручную таблицы я обратил внимание на Email Framework – фреймворк для создания HTML-писем. Также я использовал сборщик проектов TARS, основанный на gulp, что помогло мне упростить работу при верстке 33 писем т.к часть блоков все же там повторялась и я мог подключать модули - {{> header/header}}. При необходимости, подключая модуль можно еще передавать переменные {{> dormis-support/dormis-support dormis-support.color-gray}} (блок support с серым фоном), а в самом шаблоне указать переменные для фона, ширины и тд - <table width="{{vars.width.val}}" cellpadding="0" cellspacing="0" border="0" class="dormis-support-bg" bgcolor="{{val}}">. В data.js в этом модуле указываем варианты цветов для этого блока.

email-html

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

email-html

Далее в шаблоне просто указываем style="{{vars.img-style.val}}", либо можем комбинировать несколько стилей style="{{vars.title.val}} {{vars.font-family.val}}", либо на месте сразу же и часть стилей переопределять style="{{vars.font-family.val}} {{vars.link-style.val}} line-height: 20px;".

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

Email clients

P.S. Любители заверстать все в один gif смотрят на этот пост с недоумением :-)