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


    Картинка для привлечения внимания честно сперта у 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. Не сильно познавательный пост, но вполне себе интересный анонс. Как только у меня будет действительно осмысленный для туториала материал на руках, я обязательно его напишу. Стэй тюнд.
    • +19
    • 19,9k
    • 8
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 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
              Дорабатывать зурб было нецелесообразным. В отличие от подхода Николь, который вызывает восхищение.

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