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

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

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

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

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

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 ^[4]) с дефолтным шаблоном. Команда 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>

<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 не любит большие письма и обрезает ^[5] часть письма, когда контента становится больше, чем 102 кБ (но по факту обрезать он начинает уже после 98 кБ)

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

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

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

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

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

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

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

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

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

<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. ^[8] Это пользовательские данные, которые могут быть добавлены на страницу, а после сгенерированы в ваш 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>

<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>

<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 ^[9] от Litmus ^[10]. Достаточно удобно, когда у вас есть возможность быстро протестировать часть письма или письмо целиком, просто вставляете HTML код и указываете свои реальные почтовые ящики. Обратите внимание, что при первом использовании вам придет письмо с подтверждением на каждый ящик, и только потом само письмо.
Также вы можете использовать плагин для Grunt ^[11]. Он по сути делает то же самое.

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

Демо ^[12] письма.

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

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

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

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

Будем рады видеть вас на индивидуальных занятиях курса «Английский для IT-специалистов».
Пройдите, бесплатный вводный урок ^[14] и получите комплексную обратную связь по своему уровню знаний, затем выбирайте преподавателя и программу обучения себе по душе!

Автор: EnglishDom

Источник ^[15]