Независимая исследовательская компания EarthWeb опубликовала отчёт, согласно которому 82% пользователей предпочитают тёмную тему на смартфоне и 83% переходят на тёмную тему на компьютере. Это говорит о том, что брендам следует сделать свои email рассылки совместимыми с Dark Mode режимом для удобства своих клиентов.

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

В этой статье рассказываем о роли цветовых инверсий в электронных письмах и о том, как правильно настроить тему в тёмном режиме.

Как выглядит Dark Mode в электронных письмах

В программном обеспечении для электронной почты (в почтовых клиентах) есть функция под названием «Тёмный режим», которая автоматически меняет цвет письма, когда пользователь переключает экран. Светлый фон электронного письма преобразуется в более тёмный оттенок, а текст и другой контент — в более светлый.

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

Какие почтовые клиенты поддерживают Dark Mode:

Какие бывают варианты инвертирования цветов в электронной почте

Службы отправки email могут использовать собственные правила для инвертирования цветов или ничего не менять при переключении в тёмный режим. Проясните этот момент относительно того почтового сервера, которым вы пользуетесь.

Какие варианты встречаются:

• Нет перехода на тёмный режим. Это означает, что электронное письмо останется таким, каким было задумано.

• Неполная инверсия цветов. Почтовая служба автоматически обнаружит электронные письма со светлым фоном и изменит его на тёмный цвет. Элементы, которые изначально были тёмного цвета, например, чёрного или тёмно-серого, не будут изменены.

• Полный разворот цвета, включая все части сообщения. Корректируются как светлые, так и тёмные элементы. В ночном режиме текст полностью преобразуется, а потому читается более комфортно.

Зачем поддерживать тёмный режим

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

Преимущества адаптации рассылок для тёмного режима

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

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

Как адаптировать информационные рассылки под Dark Mode без использования кода

Вот несколько удачных дизайнерских приёмов для адаптации ваших электронных писем к тёмной теме:

• Выберите общий дизайн и цвет текста, который подходит как для дневного, так и для ночного режима.

• Используйте прозрачный фон, тогда не возникнет никаких проблем при переходе на тёмную тему.

• Лого и другие атрибуты бренда в формате PNG лучше делать также без фона, иначе изображение может сливаться с фоном в тёмном режиме.

• Для элементов, выполненных в тёмных цветах, предусмотрите свечение или обводку по границам, чтобы они терялись на тёмном фоне в режиме Dark Mode. То же самое правило применимо и к кнопкам.

• Если позволяет имидж бренда, верстайте электронные письма сразу в тёмном цвете.

Не забывайте проверять каждое письмо в обоих режимах.

Как инвертировать цвета в email при помощи медиа-запросов и мета-тегов

Кодирование используется, когда требуется проконтролировать инвертирование цвета в электронных письмах. Чтобы процесс шёл предсказуемо, в область <head> в коде письма прописываются медиа-теги и медиа-запросы. Они управляют внешним видом электронного письма в светлом режиме и в Dark Mode.

В настоящее время не все сервисы рассылок поддерживают медиа-запросы. Этот момент можно уточнить в таблице или обратиться к технической документации платформы. 

Пошаговый алгоритм настройки инвертации цветов

Пропишите в HTML, что электронные письма из вашей рассылки должны инвертироваться в ночном режиме. Это делается с помощью тегов: supported-color-schemes и color-scheme. 

В почтовике без поддержки медиа-запросов:

<meta name="color-scheme" content="light dark"> 

<meta name="supported-color-schemes" content="light dark">

С медиа-запросами: 

<meta name=”color‑scheme” content=”light dark”>
<meta name=”supported‑color‑schemes” content=”light dark”>
<style>
/* Normal styles */
@media (prefers‑color‑scheme: dark) {
/* Dark mode styles */
}
</style>

Как настроить цвет

Через prefers-color-scheme указываются элементы, которые подлежат изменению в Dark Mode, а какие нет. В блок <style> нужно добавить значения для медиа-запросов dark и light, чтобы переключать стили на нужную тему: 

@media (prefers-color-scheme: light) — светлую; 

@media (prefers-color-scheme: dark) — тёмную.

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

<style>
.normal {
background-color: white;
color: blue;
}
.themed {
color: blue;
}
@media (prefers-color-scheme: dark) {
.themed {
background-color: white;
}
}
@media (prefers-color-scheme: light) {
.themed {
background-color: black;
}
}
</style>

Как осуществить замену изображений при переходе в ночной режим

Медиа-запросы добавляются в блок <style>. Обозначьте версию картинки в светлой теме через class="lightimage", а также добавьте lightimage { display: none !important; } стиль в CSS. Меняем встроенный стиль display: block; через добавление !important

<style>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
@media (prefers-color-scheme: dark) {
.lightimage {
display: none !important;
}
.darkimageWrapper,
.darkimage {
display: block !important;
}
}
</style>

Настраиваем .darkimage и .darkimagewrapper через display:block!important в CSS.

Дальше используем <td> внутри <table><tr>. Устанавливаем здесь параметры <img>: ширину и высоту и добавляем class="lightimage", чтобы скрыть изображение в Dark Mode.

Заключаем в HTML-разметке темную картинку в блок <div>. Потом к <div> добавляем class="darkimagewrapper" для отображения в тёмном режиме и через mso-hide: all убираем автоматический стиль (используется в устаревших версиях Outlook) и добавляем display:none. Затем настраиваем изображение через class="darkimage" и style="display:none;"

<td>
<img src="lightimage.png" width="600" height="auto" style="display: block; height: auto;" class="lightimage">
<div class="darkimageWrapper" style="mso-hide: all; display: none">
<img src="darkimage.png" width="600" class="darkimage" style="display: none;">
</div>
</td>

Заключение

Многие пользователи настраивают на своих устройствах переход на тёмную тему в вечернее и ночное время. Чтобы электронное письмо не теряло своей привлекательности в режиме Dark Mode, его необходимо адаптировать. 

При адаптации следует учитывать алгоритмы, которым следует почтовик. Бывает, что почтовый сервер не изменяет светлые и тёмные элементы письма, или производит частичную замену, или полную.

В письме мы рассмотрели варианты адаптации email без использования кода, а также пошаговый алгоритм с использованием кодирования.