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

Здравствуйте. На связи Людмила — маркетолог компании Altcraft. Сегодня разберём, как работает инверсия цвета в email и как настроить переход в Dark Mode правильно.

Рада вам сообщить, что у нас появился Telegram-канал. Там вы найдёте самые интересные тренды и новости в сфере маркетинга и технологий. Подписывайтесь и будьте в теме :)

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

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

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

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

Почтовые клиенты, которые поддерживают 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.

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

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

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

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

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

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

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

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

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