Инвертирование цветов в рассылке: почему это важно

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

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

В статье расскажем, как работает инверсия цвета в email и как настроить переход в Dark Mode правильно.

Что такое тёмная тема в email рассылках

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

Ошибочно думать, что инвертация цветов — это полное их изменение на другие. На самом деле это просто смена оттенков. Изначальный цвет становится более контрастным, чтобы быть хорошо читаемым в тёмной версии. То есть синий не превратится в жёлтый и наоборот.

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

Какой бывает инверсия цвета в письмах

Сервисы рассылок инвертируют цвета по своим правилам или ничего не меняют при переключении на Dark Mode.

Какие есть варианты:

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

Зачем нужно адаптировать письма под Dark Mode

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

Преимущества адаптации писем под Dark Mode

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

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

Адаптация рассылок для Dark Mode без кода

Несколько лайфхаков в дизайне для адаптации имейл для тёмной темы.

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

2. Сделайте письмо с прозрачным фоном, тогда контраста при переключении на Dark Mode не будет.

3. Оформите лого и другие атрибуты бренда как картинки также без фона в формате PNG. Иначе при инверсии может случиться так:

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

5. Верстайте email сразу в тёмных цветах, если такой стиль подходит вашему бренду.

Всегда проверяйте письма в обеих темах.

Инвертирование в письмах через медиа-запросы и мета-теги

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

Не каждый сервис рассылок работает с медиа-запросами. Проверьте поддержку по таблице или уточните в технической документации почтовика.

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

Обозначьте в HTML, что теперь ваши email должны меняться в ночном режиме. через теги: 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 адаптируются без кода через прозрачный фон текста, изображений, подсвечивание лого и других элементов письма. Также подбором цветов, которые одинаково хорошо выглядят на светлом и темном фоне. Другой вариант настройки инвертирования — использование медиа-запросов и мета-тегов в коде письма.

У нас появился Telegram-канал. Там вы найдёте самые интересные тренды и новости в сфере маркетинга и технологий. Подписывайтесь и будьте в теме вместе с нами!