Картинка для привлечения внимания честно сперта у invisionapp (кстати, у них божественная рассылка)

С момента публикации последнего поста прошло ни много ни мало, полтора месяца, но на то были причины. Уйма работы и бредовые мысли задрота-верстальщика. Сначала я собирался просто перенять приемы Николь Мерлин для верстки писем себе, но потом хипстерская голова подумала: А почему бы не зафигачить целый фреймворк? Громкое слово для моей поделки, но мне приятно его так называть. Начнем с простого.

Демо здесь

Зачем?

Зачем нам еще один велосипед? Все просто. Самым классным инструментом для верстки писем на сегодняшний день является Zurb ink, насколько мне известно. Но у него есть один фатальный недостаток. Он не поддерживает адаптивность для почтовых клиентов, которые не поддерживают медиазапросы. Поэтому было решено писать инструмент на основе моих и Николь наработок. Кстати Николь была приятно удивлена переводу ее статьи на хабре и просила передать благодарность Elusive_Dream, что я и сделал лично.

Для кого

Инструмент предназначен для верстальщиков с хорошими знаниями как современного, так и ископаемого HTML и CSS. Код достаточно чист и приятен для работы. Рядовой маркетолог, пожалуй, не сможет на основе моего кода собрать вменяемое письмо. Я поделился своим кодом с русской email-тусовкой на фейсбуке и идею приняли тепло, но мигом предложили сделать из фреймворка drag'n'drop редактор. Я категорически против этого, ибо все эти редакторы крайне ограничены и кастрированы в своих возможностях. В текущем же виде мы получаем безграничный простор для работы, а главное — очень быстрый процесс создания писем и очень удобную поддержку кода.

Поддержка почтовых клиентов

— MS Outlook 2003-2007
— MS Outlook 2010-2013
— Outlook.com (web, iOS, android, windows phone)
— Thunderbird (windows)
— AOL (iOS)
— Yahoo! (web, iOS)
— Google Inbox (iOS, android)
— Gmail (web, iOS, android)
— Mail.ru (web, iOS)
— Rambler.ru (web)
— Yandex mail (web, iOS, android)
— myMail (iOS, android)
— Sparrow (OSX, iOS) к сожалению ныне выпилен из Apple Store
— Airmail (OSX)
— Apple Mail (OSX, iOS)
— Mailbox (OSX, iOS, android)
— Spark (iOS)

Что нам понадобится

Далее приведен мой извращенный вариант. Вы можете упростить его на свое усмотрение.

— Любой текстовый редактор. В моем случае это Atom на маке.
— Проплаченный Litmus аккаунт, который я использую только для тестирования всех версий аутлука, что позволяет мне не использовать windows для тестирования писем.
— iPhone. Хотя я довольствуюсь Айподом шестого поколения, на котором установлены 11 почтовых клиентов, и мне этого хватает.
— Nokia Lumia для тестирования писем в виндовом аутлуке.
— Nokia X2 для тестирования Android Mail, Yandex и Outlook клиентов. Этого в принципе достаточно для тестирования андроида, но периодически я поглядываю на результат работы в клиентах на android 4.2. Lollipop смартфон я пока еще не приобрел.
— Инлайнер для переноса стилей из head в инлайн перед выкатом верстки на продакшен
— Бесплатный аккаунт mailchimp для быстрого тестирования писем на живых устройствах

Обкатка

За последний месяц я обкатал свой код более, чем на сотне различных писем и в целом доволен результатом. Фреймворк подвергся множественным экзекуциям в виде рефакторинга в пользу улучшения читабельности кода и его работоспособности в письмах. Для тех, кому затея c развитием этой штуки покажется интересной, добро пожаловать в issues на гитхаб. Также могу предложить найти меня на фейсбуке с одноименным на хабре никнеймом. Там моя лента засоряется преимущественно тематикой писем. Любые вопросы относительно разработки писем вы можете задать мне здесь в комментариях, на фейсбуке или по почте, которая указана в профиле на хабре.

Что в планах

— Рефакторинг, рефакторинг, рефакторинг
— Добавление сборщика, который будет автоматически собирать наши письма из разных файлов и автоматом инлайнить CSS
— Написание документации. Присматриваюсь к SourceJS.
— Добавление всевозможных сниппетов и шаблонов. Например выкладка товаров интернет-магазинов и другие распространенные в работе элементы.

Что есть из приятностей

— Минималистичный PSD шаблон интерфейса Gmail для удобной отрисовки макетов писем
— Набор социальных иконок от socicon
— Шаблоны ремаркетинговых текстов для розничных интернет-магазинов

Все это можно найти в репозитории на Гитхабе.

Из последних побед

— Подружил работоспособность аутлука с поддержкой ретина дисплеев
— Сделал полностью кликабельные кнопки(а не только текст) без использования картинок
— Добился адекватного поведения многоколоночных элементов на мобильниках

P.S. Не сильно познавательный пост, но вполне себе интересный анонс. Как только у меня будет действительно осмысленный для туториала материал на руках, я обязательно его напишу. Стэй тюнд.