Инвертирование цветов в рассылке

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

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

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

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

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

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

Примеры писем после инвертирования

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

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

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

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

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

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

При инверсии кнопка тоже изменила оттенок на более тёмный

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

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

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

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

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

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

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

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

Серый цвет фона в рассылке «Сбера» одинаково удачно смотрится в тёмной и светлой теме

Серый цвет фона в рассылке «Сбера» одинаково удачно смотрится в тёмной и светлой теме

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

Пример рассылки без фона

Пример рассылки без фона

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

Непрозрачный фон логотипа контрастирует с чёрным цветом фона ночного режима

Непрозрачный фон логотипа контрастирует с чёрным цветом фона ночного режима

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

Пример, когда кнопки сливаются с фоном письма после инвертирования

Пример, когда кнопки сливаются с фоном письма после инвертирования

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

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

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

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

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

Обозначьте в HTML, что теперь ваши email должны меняться в ночном режиме. через теги: supported-color-schemes и color-scheme. 

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

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

Настройка цветов

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

Замена изображений при переключении в темный режим 

P.S. Приглашаем подписаться на нашу рассылку, чтобы получить полную версию гайда.

Резюме

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

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

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

Подписывайтесь на наш телеграм-канал. Там вы найдёте актуальные новости в области digital-маркетинга, полезные статьи и интересные исследования. Будьте в теме вместе с нами :)