Перейти к контенту →

По-настоящему адаптивные письма. Часть вторая. Фреймворк

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

Демо здесь

Зачем?

Зачем нам еще один велосипед? Все просто. Самым классным инструментом для верстки писем на сегодняшний день является 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
  • Шаблоны ремаркетинговых текстов для розничных интернет-магазинов

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

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

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

Источник: habrahabr.ru

Published in полезно

Comments

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

3 × 3 =