Как адаптировать дизайн рассылки под тёмную тему

Придумать хороший дизайн под тёмную тему сложно: мало просто инвертировать цвета. Надо тщательно подбирать оттенки, следить за читаемостью текста и контрастом картинок.

Поговорим о тёмной теме в разрезе email-маркетинга:

• нужны ли такие письма в ваших рассылках;
• как узнать, у кого из подписчиков тёмная тема;
• как создать «тёмное» письмо.

Для удобства рассказываю в формате вопросов-ответов.

В дизайнерской тусовке только и говорят, что о тёмной теме оформления. Из-за чего шум?

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

Сначала тёмную тему оформления получили предустановленные приложения Windows и MacOS. Со временем даркмод появился и в других программах: браузерах, софте для разработчиков и дизайнеров.

При чём тут письма?

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

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

Как адаптировать письма под пользователей с тёмным режимом?

Однозначного ответа пока нет. Определить, какой режим использует пользователь и прислать ему подходящее письмо мы не можем — в операционных системах нет такой функции.

Я знаю несколько альтернативных способов, которые помогут решить проблему:

1    Вставить в начале письма чекбокс, который включает тёмный режим. Это не лучший вариант, но у клиента хотя бы появится возможность переключиться в удобный режим. С чекбоксами экспериментировали Litmus — у них даже есть пример такого письма и HTML-кода (сайт недоступен для российских IP).

2    Использовать медиа-запросы. Apple только экспериментируют с медиа-запросом, который будет переключать приложения в тёмный режим. В Microsoft его уже ввели, он выглядит так:

@media (-ms-high-contrast)

Медиа-запросы поддерживают не все приложения. Посмотреть, какие почтовые клиенты их отображают, можно в таблице CampaignMonitor (сайт недоступен для российских IP).

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

Допустим, я сегментировал подписчиков. Что дальше?

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

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

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

А есть компании, которые уже внедрили такую практику? Можете показать примеры писем в тёмном режиме?

Да, таких компаний много. Делюсь своими любимыми рассылками.

Framer X

Не все рассылки этой компании выполнены в темных тонах, но в половине писем тёмный фон есть.

Apple Music

Infinity Nation

Slides

Complements

Что в итоге: адаптировать или нет?

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

Адаптация рассылок под тёмный режим поможет поднять открытия и переходы с рассылки:

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

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