JuliWolf 12 июл 2022 в 13:51

Вёрстка писем почти без боли

8 мин

20K

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

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

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

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

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

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

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

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

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

Ограничения	Решение	Примечание
margin: 12px 8px 24px; padding: 12px 8px 24px;	margin-top: 12px; margin-left: 8px; margin-right: 8px; margin-bottom: 24px;	Лучше использовать максимально описательный способ при использовании с `margin` и `padding`
z-index:10;	opacity: 0.999;	`z-index` имеет плохую поддержку, но фича с применением прозрачности работает когда 2 элемента лежат рядом и нужно один отобразить над вторым
position:absolute;	Решение сильно зависит от задачи. Например: - При верстке баннера решением было использовать `background-image` чтобы одна картинка накладывалась на другую - Блок-оповещение - синяя прямая полоса по краю блока - решение использовать `border-left`

border-radius	<!--[if mso]> <div class="class-for-outlook"> <![endif]--> <!--[if !mso]> <!--> <div class="class-for-other"> <!-- <![endif]-->	`border-radius` не поддерживается в некоторых сервисах outlook Мы совсем убирали границы для outlook и заменяли их разделителями, так как заостренные углы смотрятся хуже чем их отсутствие
background-image	<img src="some_url" />	`background-image` так же плохо поддерживается в outlook, поэтому лучше использовать полноценную картинку для таких случаев.
media	Первое, не все сервисы поддерживают медиа запросы Второе, некоторые просто вырезают контент письма, удаляя тег style, например Яндекс Использовать с умом. Учитывать что не везде верстка будет с медиа запросами.

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>

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

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

Данный сервис предоставляет возможность проверить свои имейлы во всех возможных почтовых сервисах: от старых версий 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

Теги:

Хабы:

Верстка писем