Тёмная тема в письмах: три разных поведения клиентов и что с этим делать

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

Насколько это распространено

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

Но важнее другая цифра, которую почти не приводят. Открытия в тёмной теме заметно чаще оказываются мгновенными: письмо открыли и сразу закрыли. Разница слишком велика, чтобы быть случайной, и объясняется она просто — сломанное при инверсии письмо нечитаемо, и его закрывают.

Ещё один показательный факт из того же исследования: только 11% маркетологов всегда учитывают тёмную тему при вёрстке, хотя тестируют её значительно чаще. То есть проблему видят, но не решают — потому что решение неочевидно.

Три модели поведения клиентов

Причина неочевидности в том, что единого поведения не существует. Клиенты делятся на три группы, и одно и то же письмо в них выглядит по-разному.

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

Самая коварная — полная инверсия. Если вы заранее сделали письмо в тёмном оформлении, такой клиент вывернет его в светлое, и получится ровно наоборот задуманного.

Код, который берёт управление на себя

Первое и главное — два мета-тега в шапке письма. Они сообщают клиенту, что вы продумали оба варианта, и это само по себе останавливает принудительную инверсию в части клиентов.

Дальше идёт медиазапрос с собственными цветами для тёмной темы. Его понимают Apple Mail, почта на iOS, Outlook 2019 и новее, Thunderbird и Samsung Mail — то есть значительная часть аудитории.

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

Что ломается чаще всего

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

Логотип: главная головная боль

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

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

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

Проверять надо не в одном месте. Минимальный набор — Apple Mail на телефоне, приложение Gmail на телефоне и Outlook на компьютере: они представляют все три модели поведения.

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

Как это устроено в Mailvex

Конструктор Mailvex поддерживает тёмную тему на уровне письма: цвета фона, текста и блоков задаются отдельно для светлого и тёмного оформления, а мета-теги добавляются в шапку автоматически при компиляции.

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

Частые вопросы

Нужно ли делать отдельное письмо для тёмной темы?

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

Почему письмо выглядит нормально в одной почте и сломано в другой?

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

Достаточно ли одних мета-тегов?

Они закрывают главную проблему — принудительную полную инверсию в части клиентов. Но чтобы задать конкретные цвета тёмной версии, нужен медиазапрос. Мета-теги без него дают предсказуемость, но не контроль.