Как привести все письма к брендбуку: система вместо ручной подгонки цветов

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

Почему нельзя просто взять правила с сайта

Почтовый клиент — не браузер. Он ограничивает набор поддерживаемых свойств, подменяет шрифты, а в тёмной теме может самостоятельно инвертировать цвета. Правило брендбука вроде «заголовки набираются фирменным шрифтом с межбуквенным расстоянием минус два процента» в письме превращается в пожелание: у половины получателей шрифт будет системным.

• нестандартные шрифты загружаются не везде и подменяются системными
• тонкие начертания хуже читаются на мобильных экранах
• светло-серый текст на белом может стать нечитаемым после инверсии в тёмной теме
• фирменные скругления не отображаются в классическом Outlook без отдельного кода
• фоновые изображения поддерживаются не всеми клиентами

Что переносится напрямую

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

Что придётся адаптировать

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

Первое — шрифтовая пара. Фирменный шрифт указывается первым, следом обязательно идёт системный запасной вариант близкого начертания. Если брендбук построен на узкой гротеске, запасным лучше взять не Arial, а что-то ближе по пропорциям, иначе письмо у части получателей будет выглядеть чужим.

Второе — контраст. Фирменные светлые оттенки, которые нормально смотрятся на сайте, в почте рискуют потеряться: часть клиентов инвертирует цвета в тёмной теме. Для текста стоит заранее задать вариант с достаточным контрастом и проверить его в тёмном оформлении.

Третье — поведение на узком экране. По данным Litmus большинство открытий приходится на Apple Mail и Gmail, а это преимущественно телефоны. Размеры заголовков, отступы и высота кнопок для мобильного экрана стоит зафиксировать отдельно, а не полагаться на пропорциональное уменьшение.

Как собрать дизайн-систему рассылок

Смысл в том, чтобы один раз описать набор значений и дальше собирать письма из них, а не подбирать цвета пипеткой в каждом новом макете. Минимальный набор выглядит так:

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

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

Отдельно: тёмная тема

Тёмная тема — то место, где чаще всего ломается фирменный стиль. Почтовые клиенты обрабатывают её по-разному: одни инвертируют цвета сами, другие уважают ваши настройки. Логотип в тёмном варианте, достаточный контраст текста и прозрачный фон у изображений с логотипом решают большую часть проблем.

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

Я видел, как мои стили внезапно исчезают из разметки, и обнаруживал их переписанными инлайново.

Как это устроено в Mailvex

Брендбук в сервисе — не документ, а набор значений, который применяется ко всем блокам письма автоматически. Его можно загрузить готовым PDF: цвета, шрифты, логотип и отступы извлекаются из файла, либо заполнить через короткий опросник, либо задать вручную.

Дальше любой шаблон из библиотеки перекрашивается под ваш стиль одним действием. Для команд и агентств брендбуки можно держать общими: несколько клиентов, у каждого свой набор значений, переключение между ними без пересборки писем.

Частые вопросы

Что делать, если брендбука вообще нет?

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

Можно ли использовать фирменный шрифт в письме?

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

Как быть агентству с несколькими клиентами?

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