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

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

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

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

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