Каждый раз, когда в спринте появляется задача на верстку писем, один из фронтендеров подумывает об увольнении...
Верстка писем всегда являлась проблемной задачей, ведь каждая компания хочет чего-то эдакого, а фронтам приходится отбиваться от очередной интересной идеи, объясняя почему ту или иную затею реализовать не получится.
В этой статье хочу поделиться несколькими лайфхаками по верстке писем. Расскажу что стоит учитывать при верстке писем и как обходить ограничения при создании адаптивного письма.
1. Плохая поддержка CSS3 и HTML5
Когда речь заходит о письмах, наверное, почти каждый фронтендер слышал о том, что письма нужно верстать с помощью таблиц. И он прав. Во многих email-сервисах до сих пор или не поддерживаются новые фичи css и html, или поддерживаются частично.
Например, если ты не знаешь что такое flex
, то, поздравляю, эти знания тебе и не понадобятся)
Существует достаточно много сайтов, которые наглядно показывают что поддерживается в том или ином почтовом сервисе.
Вот один из них: https://www.campaignmonitor.com/css/
Самые популярные ограничения, на которые я натыкалась во время верстки:
Ограничения | Решение | Примечание |
margin: 12px 8px 24px; | margin-top: 12px; | Лучше использовать максимально описательный способ при использовании с |
z-index:10; | opacity: 0.999; |
|
position:absolute; | Решение сильно зависит от задачи. - Блок-оповещение - синяя прямая полоса по краю блока - решение использовать |
![position: absolute position: absolute](https://habrastorage.org/getpro/habr/upload_files/c56/2ae/de3/c562aede363a07eecfad843b53ecc69e.png)
![border-left border-left](https://habrastorage.org/getpro/habr/upload_files/b08/3d8/e35/b083d8e356ea5650727d125b9b20498f.png)
border-radius | <!--[if mso]> |
|
background-image | <img src="some_url" /> |
|
media | Первое, не все сервисы поддерживают медиа запросы |
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&proxy=yes&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. Темная тема
Не так давно столкнулась с тем, что некоторые элементы письма в темной теме смотрятся плохо. Особенно страшно то, что логотипа компании не было видно из-за того, что картинка черная.
Как работает темная тема в почтовых сервисах?
Почтовые сервисы используют инверсию цветов.
Варианты инверсии:
Полная инверсия - смена белого цвета на черный и наоборот.
Частичная инверсия - некоторые цвета меняются (итоговые результат зависит от конкретной реализации почтового сервиса)
Существует много статей на тему адаптации писем под темные темы. Вот одна из тех, что мне были полезны, когда я искала решение проблемы. Ссылка тут
Скажу честно мне не помогло применение специальных тегов в стилях, чтобы адаптировать письма под темную тему. Поэтому я сосредоточилась на основных проблемах, которые у меня возникли.
Исчезающий логотип
Измененные цвета ярких элементов
Логотип
С логотипом решили достаточно просто - добавили белый шум (тень) вокруг черных букв, чтобы в темной теме логотип выделялся.
![](https://habrastorage.org/getpro/habr/upload_files/6a0/33f/0b1/6a033f0b1cc94166a143f7fac167ffbb.png)
Измененные цвета ярких элементов
Основные проблемы у меня были с кнопками, яркие желтые кнопки становились цвета детской неожиданности в темной теме. Не приятно. Я заменила кнопки на картинки.
Когда нужно обновить какие-то маленькие элементы - замена их на картинки наверное самый простой способ. В случае с более сложными кейсами советую воспользоваться решениями из статей, и поиграться со стилями для темной темы.
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