Адаптивные email-письма без боли и страданий

  • Tutorial
Привет, Хабр! Все, кто хоть раз сталкивался с версткой email-писем, знают, что это нудно, утомительно и порой очень сильно раздражает. В большинстве случаев это обусловлено тем, что почтовые клиенты не умеют поддерживать очень многое из того, что мы используем при верстке самых простых веб-страниц. Поэтому дизайн письма делается простым или не делается вовсе, а львиная доля времени уходит на проверку и фиксы багов в многочисленных почтовиках.

В этой статье мы хотим поделиться с вами рецептами верстки красивого, на наш взгляд, и адаптивного письма, которое будет подстраиваться под экран вашего телефона даже в Gmail. А так же рассказать про нюансы, проблемы и тонкости, с которыми мы столкнулись в процессе его создания.

Верстка адаптивных писем с Foundation for Emails


При верстке email письма обычно используется табличная верстка и весьма ограниченный набор css свойств. Табличная верстка подразумевает достаточно большую вложенность, и редактирование уже готового шаблона может стать настоящей головной болью. После принятия решения о переходе на адаптивные письма возник вопрос, как делать эти самые письма. Наш выбор пал на довольно популярный фреймворк Foundation, вернее на его недооцененного младшего брата Foundation for Emails.

Foundation for Emails из коробки умеет многое из того, что вам может понадобиться в процессе верстки писем:

  • Gulp: автоматизации процесса разработки
  • Inky шаблонизатор: конвертирует собственную разметку в HTML код
  • Sass: CSS препроцессор
  • Handlebars: генерирует HTML из JSON данных (шаблонизатор JavaScript)
  • Paninin: компилятор файлов, поддерживающий шаблон прототипирования Inky.
  • Inliner: переводит из таблиц стилей в инлайн стили
  • BrowserSync: перезагрузка страницы после изменения исходных файлов
  • Image Compression: сжатие изображений в процессе компиляции

Установка достаточно проста и состоит всего из нескольких шагов:

1. Устанавливаем foundation-cli, возможно понадобится использовать sudo

npm install --global foundation-cli

2. Переходим в директорию проекта и выполняем команду

foundation new --framework emails

CLI спросит у вас имя будущего проекта, после чего будет загружен шаблон проекта и установлены необходимые зависимости. Весь процесс занимает не больше минуты. Для старта достаточно запустить команду npm start, после чего в вашем браузере откроется веб-адрес по умолчанию (обычно это http://localhost:3000) с дефолтным шаблоном. Команда npm run build запускает компиляцию, в процессе которой разметка Inky компилируется в HTML разметку, стили переводятся в инлайн стили, убираются все пробелы и оптимизируются изображения. На выходе вы получаете один HTML файл и оптимизированные изображения.

Foundation for Emails берет на себя большинство сложностей, с которыми вам приходится сталкиваться. Как и в Foundation for sites, там используется 12-ти колоночная сетка, на основе которой вы сможете строить адаптивные письма, в которых уже заранее предусмотрен медиа-запрос для мобильных устройств. Вы можете управлять количеством колонок с помощью классов .large-n и .small-n. По умолчанию, если не указывать ширину колонки в мобильном клиенте, она будет занимать 100% контейнера.

Для корректного отображения вашего письма вам приходится использовать таблицы с довольно большой вложенностью. Использование шаблонизатора Inky упрощает разметку email писем и делает код более простым, и читаемым.  

Пример кода с использованием Inky:

<container>
  <row>
    <columns>Put content in me!</columns>
  </row>
</container>

HTML на выходе:
<table align="center" class="container">
  <tbody>
    <tr>
      <td>
        <table class="row">
          <tbody>
            <tr>
              <th class="small-12 large-12 columns first last">
                <table>
                  <tr>
                    <th>Put content in me!</th>
                    <th class="expander"></th>
                  </tr>
                </table>
              </th>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>


Но не стоит увлекаться слишком большой вложенностью, т.к.  вы можете столкнуться с проблемой, которая у нас была в самом начале использования данного фреймворка. Gmail не любит большие письма и обрезает часть письма, когда контента становится больше, чем 102 кБ (но по факту обрезать он начинает уже после 98 кБ)



Думаю, все мы понимаем, какой процент пользователей нажмет «показать целиком».

Более подробно с документацией Foundation for Email можно ознакомиться тут.

Тонкости и трудности


Процесс верстки первых адаптивных писем у нас занял довольно продолжительное время, поэтому хотим поделиться с вами трудностями и тонкостями, с которыми нам пришлось столкнуться:

1. Реализация адаптивности в письмах — довольно сложное и утомительное занятие, поэтому мы рекомендуем вам переложить этот процесс на плечи вышеупомянутого Foundation for Emails. Он сделает основную работу, а вам останется только сказать ему, сколько колонок вы хотите видеть на мобильных устройствах и немного «поиграть» с размерами шрифтов. Конечно это небольшое преуменьшение, но он действительно здорово упростит вам работу.

Так выглядит наше письмо в десктопном и мобильном клиенте.



Foundation for Emails  в своем арсенале имеет только один брейкпоинт в 596 пикселей small=«x», но никто вам не мешает добавлять свои или переопределить глобальные, если у вас в этом есть действительно необходимость. В файле _settings.scss вы найдете все необходимое.

@media only screen and (max-width: #{$global-breakpoint})

2. Если вы планируете рассылку, в которой будет один шаблон, а меняться будет только контент, либо у вас везде одинаковый футер, а шапка и контентная область разные, рекомендуем вам использовать Partials.

Ваш шаблон будет выглядеть примерно так:

<html>
  <head>
    <title>Definitely STILL an Email!</title>
  </head>
  <body>
    {{> header}}
    {{> body}}
    {{> footer}}
  </body>
</html>

В целом Foundation for Emails дает возможность использовать достаточно большой набор функций на языке шаблонов Handlebars.

3. В первой версии письма мы обратили внимание на достаточно большой его размер. При более подробном рассмотрении оказалось, что все стили, находящиеся в head,
дублируются, помимо этого дублировались теги head и body, как открывающиеся, так и закрывающиеся. Полистав более подробно документацию, удалось выявить проблему. Она заключалась в том, что Foundation сам создает head и body со всем необходимым, а вам остается только сверстать само письмо.

4. Также для шаблонных рассылок рекомендуем вам использовать Custom Data. Это пользовательские данные, которые могут быть добавлены на страницу, а после сгенерированы в ваш HTML через Handlebars. Что позволит вам избавиться от необходимости править HTML.

---
title: Page Title
description: Lorem ipsum.
---

<h1>{{ title }}</h1>

5. Вместо вертикальных отступов используйте таблицу с ячейкой, у которой задан атрибут высоты, это гарантированно даст вам нужный отступ во всех почтовых клиентах. Тем более с Inky это делается одной строкой.

<p>Stuff on top</p>
<spacer size="100"></spacer>
<p>Stuff on bottom</p>

HTML на выходе:
<p>Stuff on top</p>
<table class="spacer">
  <tbody>
    <tr>
      <td height="100px"style="font-size:100px;line-height:100px;"> </td>
    </tr>
  </tbody>
</table>
<p>Stuff on bottom</p>


6. Если вы решили использовать spacer для задания высоты, но в мобильных клиентах он вам кажется слишком большим, вы всегда можете его скрыть, добавив в вашу разметку класс .show-for-large и дописав в ваш медиа-запрос отступ к нужному блоку средствами CSS, мобильные клиенты с этим справляются лучше. Также хотим обратить ваше внимание на класс .hide-for-large. Не рекомендуем использовать этот класс, т.к. он не поддерживается в Gmail и Yahoo.

7. Если делаете кнопку, делайте ее так же с помощью таблицы, иначе рискуете получить текст залитый цветом. В Inky есть готовый компонент button, главное не забудьте указать атрибут href, иначе придется гадать, почему у вас вместо кнопки простой текст.

<button href="#">Button</button>

HTML на выходе:
<table class="button">
  <tr>
    <td>
     <table>
        <tr>
          <td><a href="#">Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>


8. Не все почтовые клиенты поддерживают background-image, но так как наша основная шапка и тело письма как раз имели такой дизайн, мы выбрали подход graceful degradation, при котором в основных почтовиках используется фоновая картинка, а в почтовых клиентах, которые не имеют этой поддержки, используется заливка цветом. Таким образом мы не теряем читаемость текста.





9. Если вам нужно сделать элемент, основная цель которого «украшательство», используйте также подход graceful degradation.



В нашем примере уголок сделан с помощью псевдоэлемента :before. Он не поддерживается в Gmail и Outlook и не будет отображаться, но это не сильно ухудшит общий вид письма, а если делать его картинкой и располагать в таблице, то велика вероятность того, что он будет «жить» отдельно от своего блока, или вовсе сломает вам email.

Еще подобный пример


10. В процессе разработки нам необходимо проверять получившийся результат нашей верстки. Мы используем Putsmail от Litmus. Достаточно удобно, когда у вас есть возможность быстро протестировать часть письма или письмо целиком, просто вставляете HTML код и указываете свои реальные почтовые ящики. Обратите внимание, что при первом использовании вам придет письмо с подтверждением на каждый ящик, и только потом само письмо. Также вы можете использовать плагин для Grunt. Он по сути делает то же самое.

Надеемся, что знакомство с Foundation for Emails окажется для вас полезным и ваши следующие письма будут сделаны в компании этого весьма удобного фреймворка.

Демо письма
Исходники письма

Бонусы для читателей


Онлайн-курсы


Мы дарим бесплатный доступ на три месяца изучения английского с помощью наших онлайн-курсов. Для этого просто перейдите по ссылке до 31 декабря 2017 года.

Индивидуально по Skype


Будем рады видеть вас на индивидуальных занятиях курса «Английский для IT-специалистов».
Пройдите, бесплатный вводный урок и получите комплексную обратную связь по своему уровню знаний, затем выбирайте преподавателя и программу обучения себе по душе!
Онлайн школа EnglishDom 48,52
Лидер в онлайн образовании
Поделиться публикацией
Комментарии 13
  • 0
    В Gmail (и в браузере, и в Android-приложении), в Яндекс, в приложении Mail.ru смотриться просто отлично. А вот встроенная в Windows 10 почтовая программа на удивление подкачала.
    • 0
      К сожелению у Outlook Mail весьма ограниченая поддержка css свойств, как вариант можно воспользоваться условными комментариями для Outlook. У Litmus есть статья по этому поводу.
    • 0

      Слишком сложный подход, много лишних инструментов.
      Можно обойтись pug, sass, инлайнером стилей и browsersync.

      • 0
        В том то и дело, что у вас всего один инструмент, в котором есть все необходимое из коробки.
      • 0
        Зачем в 2017 году разработчиков заставлять вёрстать нелогичные e-mail? По-моему это невыгодно ни бизнесу, ни разработчику. Почему бы маркетологам и дизайнерам не клепать всевозможные промо e-mail рассылки в соответствущих gui инструментах за несколько часов? Например, topol.io или templates.campaignmonitor.com/canvas/design/13-the-blueprint-3#/firstrun
        Если что, сам не пользовался ими, просто интересно, может эти инструменты действительно не подходят?
        • 0
          Тут все как и с сайтами, зависит возможностей и потребностей бизнеса. В вебе уже давно есть довольно удобные инструменты для создания сайтов (тот же Wix, или Webflow), но верстку сайтов еще никто не отменял. Мы так же, как вы предложили, используем для маркетинга подобный инструмент, он многое умеет, удобный, так же делает адаптиные письма, но когда понадобилось сделать письмо с более менее сложным дизайном, он нагенерил такую кучу кода, что его вес перевалил за 170 Кб и Gmail естественно обрезал половину письма.
        • 0
          Пробдема фреймворков для писем в том, что любое нестандартное отклонение в дизайне невозможно из-за рамок этих фреймворков. Вторая более глобальная проблема (довелось столкнуться при использовании фреймворка mjml) — если в дальнейшем это письмо будет рассылаться через mailchimp — то mailchimp вырежет половину вашего письма и превратит в кашу. Лучше заранее узнавать у заказчика каким рассыльщиком он будет пользоваться. В ситуации с мейлчимп — под него нужно верстать только руками и бесконечно тестируя
          • 0
            С первым не согласен, т.к. незаметил никаких рамок и ограничений в использовании данного фреймворка, вам же никто не мешает комбинировать фреймворк с чистым html, там где вы считаете, что справитесь лучше, Foundation for Emails прекрасно понимает html. С mjml не приходилось сталкиваться, но вы уверены, что проблема именно с mailchimp? Мне с ним не довдилось работать, но знаю, что очень многие крупные компании его используют и врядли они мирились бы с подобным поведением. Добавите немного подробностей? Стало любопытно.
            • 0
              покажу вам пример с меилчимпом и mjml. вот одно из демо с их страницы mjml.io/try-it-live/Hy2vhatCb,
              вот как это письмо выглядит в mailchimp preview:
              screencast.com/t/uT7mDgcfani — вроде бы просто замечательно,
              а затем отправляем отсюда же письмо в gmail:
              screencast.com/t/7PB6K2fSFj7 от письма практически ничего не осталось — мейлчимп видимо «спотыкается» о какие-то спец хаки.
              И для наглядности вот как выглядит письмо, если отправить его через самый простой сайт для отправки и тестирования разметки htmlmail.pro — все идеально, ничего не вырезалось. screencast.com/t/CV6QRNKUBnR.
              Проблема внутри mailchimp'a.
              Возможно со многими другими инструментами рассылки тоже есть проблемы, пока мне не приходилось с ними сталкиваться в работе. Надеюсь эта информация кому-нибудь будет полезна. А как ваши письма от Foundation выглядят после mailchimp? Было бы прекрасно, если вы отпишитесь по этому вопросу.
              • 0
                я увидела ваши исходники и отправила их через mailchimp в gmail — вот результат screencast.com/t/Rki8RXhF09u
            • 0
              А где можно посмотреть код Inky вашего демо письма? Интересует реализация некоторых элементов.
              • 0
                добавил в конец статьи ссылку на искодники письма
                • 0
                  Спасибо большое!

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

              Самое читаемое