0,0
рейтинг
4 сентября 2015 в 10:02

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


Картинка для привлечения внимания честно сперта у 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. Не сильно познавательный пост, но вполне себе интересный анонс. Как только у меня будет действительно осмысленный для туториала материал на руках, я обязательно его напишу. Стэй тюнд.
Артур Кох @dudeonthehorse
карма
72,7
рейтинг 0,0
Email developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (8)

  • +1
    Спасибо, бро!
    Я искренне верю и надеюсь, что вся эта затея в итоге превратится в первый нормальный компилятор писем из человеческой верстки в почтовую )
    • 0
      Спасибо, приятно слышать.
      • +1
        Не за что! Нет, правда, было бы замечательно иметь когда-то возможность сделать такой gulpfile.js:

        var email = require('gulp-email');
        var inline = require('gulp-inliner');

        gulp.task(
        'build',
        function() {
        gulp.src(['./src/*.htm'])
        .pipe(email())
        .pipe(inline())
        .pipe(gulp.dest('./build/'));
        }
        );
        • 0
          Я только за.
        • 0
          Если у кого нибудь есть время посодействовать в реализации, буду рад.
  • 0
    Печально, что в Zurb Ink вы нашли фатальный недостаток.
    Если бы ваш фреймворк был хотя бы форком Ink (а еще лучше форком github.com/faustgertz/sassy-ink), то порог вхождения и общая привлекательность была бы выше.
    • 0
      Не было цели делать революцию. Изначально это был написанный за выходные набросок под мои нужды для ускорения работы. И результат более, чем достигнут. Процесс разработки нового шаблона ускорен минимум вдвое. Поддержка упрощена в разы.
    • 0
      Дорабатывать зурб было нецелесообразным. В отличие от подхода Николь, который вызывает восхищение.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.