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

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

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

1. Плохая поддержка CSS3 и HTML5

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

Например, если ты не знаешь что такое flex, то, поздравляю, эти знания тебе и не понадобятся)

Существует достаточно много сайтов, которые наглядно показывают что поддерживается в том или ином почтовом сервисе.

Вот один из них: https://www.campaignmonitor.com/css/

Самые популярные ограничения, на которые я натыкалась во время верстки:

2. Табличная верстка

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

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

<table class="d2022afd1198452des-wrapper" cellpadding="0" cellspacing="0" width="100%" style="background-color:#f4f6f9;background-position:left top;background-repeat:repeat-y;border-collapse:collapse;border-spacing:0px;height:100%;margin:0;padding:0;width:100%">
  <tbody>
    <tr style="border-collapse:collapse">
      <td class="fa7fd19932b8285dst-br" valign="top" style="margin:0;padding:0">
        <table class="ee59559b2d98cd99es-header 2aefba2eb2eab76bes-mobile-hidden" align="center" cellpadding="0" cellspacing="0" style="background-color:transparent;background-position:center top;background-repeat:repeat;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%">
          <tbody>
            <tr style="border-collapse:collapse">
              <td align="center" bgcolor="#F4F6F9" style="background-color:#f4f6f9;margin:0;padding:0">
               <table class="7e1d4d0ef0636f32es-header-body" align="center" bgcolor="#F4F6F9" cellpadding="0" cellspacing="0" style="background-color:#f4f6f9;border-collapse:collapse;border-spacing:0px;width:700px">
                 <tbody>
                   <tr style="border-collapse:collapse">
                     <td class="3139ef439f41c6d2es-m-p0" align="left" style="border-radius:20px 20px 0 0;margin:0;padding:0">
                       <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px">
                         <tbody>
                           <tr style="border-collapse:collapse">
                             <td align="left" style="margin:0;padding:0;width:700px">
                               <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px">
                                 <tbody>
                                   <tr style="border-collapse:collapse">
                                     <td align="center" style="border-radius:0px;font-size:0px;margin:0;padding:0">
                                       <img class="732c890f5da80419adapt-img" alt="Заботимся о себе и друг о друге." src="https://resize.yandex.net/mailservice?url=https%3A%2F%2Fcdnimage.sendsay.ru%2Fimage%2Fsbrf%2Freestr%2F20220701CRM_EMAIL_MSG3945852_5%2Fesg_final%2Fmaind_O7O.png&amp;proxy=yes&amp;key=96b42a4c55b536e28be6b85b6bf8a933" title="Заботимся о себе и друг о друге." width="700" style="border:0;display:block;text-decoration:none"></a>
                                     </td>
                                   </tr>
                                 </tbody>
                             		</table>
                     					</td>
                   					</tr>
                   				</tbody>
                       	</table>
                			</td>
              			</tr>
            			</tbody>
        				</table>
      				</td>
    				</tr>
    			</tbody>
  			</table>
      </td>
    </tr>
  </tbody>
</table>

Чтобы не писать всю эту "красоту" вручную стоит прибегнуть к помощи библоиотек, например:

• Сerberusemail

• Email Framework

• Foundation emails

Foundation emails, например, предлагает ряд готовых компонентов:

• Button - кнопка с помощью таблиц

• Container - центрирует элементы по центру страницы

• Spacer - добавляет отступы между блоками

• Wrapper - создает блок, которому можно добавить фон и отступы

• Row - разметка строка

• Column - разметка колонка

Больше примеров можно посмотреть на сайте

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

3. Инлайновые стили

Как я упоминала выше, не все сервисы поддерживаю тег style в письмах, поэтому необходимо прибегать к инлайновым стилям.

Прописывать все стили в тегах это не удобно. Мы привыкли использовать препроцессоры и писать стили в отдельных файликах.

Для сборки проекта с инлайновыми стилями можно воспользоваться пакетом inline-css.

Пример использования

На вход принимает html файл и возвращает строку с обновленными html с инлайновыми стилями.

inlineCSS(html, {
  url: env._host,
  applyStyleTags: true,
  removeStyleTags: true,
  preserveMediaQueries: true,
  removeLinkTags: true
})

Использование такого инструмента в совокупности с препроцессором sass дает возможность поддерживать чистый читаемый код.

4. Шаблонизаторы

Так как письма это не только картинки со статическим текстом, нужна возможность обрабатывать получаемые данные и отдавать готовый html с разными данными.
Для реализации писем с наполнением нужен шаблонизатор. В своем проекте я использую handlebar.

Handlebar предоставляет множество удобных фич:

• Темплейты для вставки строк из json

• Условные конструкции

• Циклы

• Хелперы (эквиваленты javascript операторам &&, ||, >, < etc.)

• Partials (возможность разделения html на компоненты)

Больше информации тут

Пример использования в совокупе с Foundation emails:

  <container>
    <wrapper class="order-info">
      {{#eq block "head"}}
        {{> "head" }}
      {{/eq}}

      {{#eq block "body"}}
        {{> "body" }}
      {{/eq}}

      {{#eq block "footer"}}
        {{> "footer" }}
      {{/eq}}
      
      {{#if user.comment }}
        <p class="user__text">
          <span>Комментарий</span>
          {{ user.comment }}
        </p>
      {{/if}}
    </wrapper>
  </container>

5. Темная тема

Не так давно столкнулась с тем, что некоторые элементы письма в темной теме смотрятся плохо. Особенно страшно то, что логотипа компании не было видно из-за того, что картинка черная.

Как работает темная тема в почтовых сервисах?
Почтовые сервисы используют инверсию цветов.

Варианты инверсии:

• Полная инверсия - смена белого цвета на черный и наоборот.

• Частичная инверсия - некоторые цвета меняются (итоговые результат зависит от конкретной реализации почтового сервиса)

Существует много статей на тему адаптации писем под темные темы. Вот одна из тех, что мне были полезны, когда я искала решение проблемы. Ссылка тут

Скажу честно мне не помогло применение специальных тегов в стилях, чтобы адаптировать письма под темную тему. Поэтому я сосредоточилась на основных проблемах, которые у меня возникли.

• Исчезающий логотип

• Измененные цвета ярких элементов

Логотип

С логотипом решили достаточно просто - добавили белый шум (тень) вокруг черных букв, чтобы в темной теме логотип выделялся.

Измененные цвета ярких элементов

Основные проблемы у меня были с кнопками, яркие желтые кнопки становились цвета детской неожиданности в темной теме. Не приятно. Я заменила кнопки на картинки.

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

6. Тестирование

Тестировать письма это больно. Сверстай, собери, скопируй в сервис и проверь все возможные варианты. И так по кругу, пока не решишь, что письма сделаны идеально (PS: такое скорее всего не случится)

Что можно использовать для тестирования:

• Email on Acid

• Campaign Monitor

Расскажу об опыте работы с Email on Acid

Данный сервис предоставляет возможность проверить свои имейлы во всех возможных почтовых сервисах: от старых версий outlook до самых современных, а также проверить на мобильных версиях. Помогло выявить ряд проблем в имейлах, в особенности с outlook.

В Email on Acid есть настройка вариантов отображения:
- С картиками и без
- В темной и светлой темах
Кроме того можно сохранить свою выборку сервисов, которые необходимо проверить и всегда прогонять html через заранее заготовленный пакет настроек.

Больше полезных инструментов для верстки писем тут.

7. Outlook

Я решила выделить тему outlook, так как он особенный. В Outlook дольше всего принимаются нововведения css и html, поэтому для поддержки писем для него необходимо учитывать следующие факторы:

• Не поддерживаются background-image

• Не поддерживается border-radius

• Не поддерживается float

Чтобы поддерживать Outlook необходимо прибегнуть к специальной условной конструкции . Внутри следующей конструкции можно добавить блоки, которые будут работать только для outlook.

  <!--[if mso]>
    <hr class="divider">
  <![endif]-->

Конструкция, для всего кроме outlook

<!--[if !mso]> <!-->
  <div class="section_round-borders">
<!-- <![endif]-->

Письма в outlook не будут выглядеть так хорошо как того хотелось бы, но привести письма к более менее качественному виду можно. Необходимо использовать более простые стили, больше текста и картинок. Рекомендую убирать border совсем, так как смотрятся они плохо. Лучше использовать блоки-разделители, для зонирования информации.

8. Дизайн

Пару заметок по дизайну, чтобы еще при обсуждении макетов можно было рассказать дизайнеру как сделать не получится, а как получится.

• Придерживаться принципа двух колонок - это как Bootstrap сетки в 12 колонок, но только всего в 2 колонки, принцип тот же.

• Размеры отступов, высоты блоков не должны отличаться на декстопе и мобилки (повторюсь, медиа запросы и теги style поддерживаются не везде).

• Все блоки, которые отображаются на десктопной версии должны быть и на мобильной, скрыть блоки в адаптиве получится не для всех сервисов (проблема медиа запросов и тега style).

• Расположение элементов на десктопной и на мобильной версиях должны быть одинаковые, порядок элементов меняться не может.

• Баннера можно сделать с помощью background-image + img поверх
  для outlook баннер будет одной картинкой.

• Для темной темы все черный картинки или обрамлять белой тенью или стараться не использовать картинки с черным или белыми текстами.

В заключении

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

Для писем я использую проект, собранный с помощью:

- nodejs + Express
- express-handlebars
- handlebars-helpers
- inline-css
- foundation emails
- scss

По итогу получается 2 роута:

• GET запрос для просмотра локальной сборки (использую моковые данные)

• POST запрос для интеграции через бек - бек делает запрос, где в теле передают json с данным и в результате получают html