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

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

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

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

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

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

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

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

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

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

position: absoluteborder-left

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

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

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

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

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:

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

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

      {{#eq block "footer"}}
        {{> "footer" }}
      {{/eq}}
      
      {{#if user.comment }}
        

          Комментарий
          {{ user.comment }}
        
      {{/if}}
    
  

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.

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

Письма в 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

© Habrahabr.ru