Темная тема в email: как подготовить рассылку к Dark Mode и не потерять читателей
Темная тема (Dark Mode) — это стандарт доступности и уважения к пользователю. От 35% до 80% пользователей (в зависимости от платформы) предпочитают темный интерфейс. Например, аналитика Litmus показывает 41% пользователей, а опрос Android Authority показывает, что среди 2500 владельцев Android — 81,9% используют Dark Mode.
Игнорирование этого факта означает, что значительная часть вашей аудитории получит некачественное письмо. В этом гайде мы объясним, как почтовые клиенты искажают дизайн, почему исчезают логотипы и как подготовить идеальное письмо, используя редактор Letteros.
Анатомия Dark Mode: Почему дизайн искажается?
Многие ошибочно считают, что телефон “сам всё красиво перекрасит”. Это не так. Почтовые клиенты используют разные, часто агрессивные, алгоритмы отображения темной темы. Выделяют три основных типа:
1. No Changes (Без изменений)
Почтовик не меняет фон письма. Интерфейс приложения темный, но само письмо остается ярким.
- Где встречается: Некоторые старые версии клиентов.
- Итог: Дизайн сохранен, но письмо слепит глаза.
2. Partial Color Invert (Частичная инверсия)
Алгоритм меняет светлый фон на темный, а темный текст на светлый. Картинки и цветные блоки остаются, как правило, нетронутыми.
- Где встречается: Outlook.com, Outlook 2019, Apple Mail (в некоторых сценариях).
- Итог: Дизайн сохраняется при условии грамотной подготовки графики.
3. Full Color Invert (Полная инверсия)
Самый сложный случай. Почтовик инвертирует все цвета. Фирменный синий может стать желтым, а пастельно‑розовый — грязно‑зеленым.
- Где встречается: Gmail на Android.
Итог: Дизайн может быть разрушен полностью.
Дизайн‑хаки: Как спасти визуал (без кода)
Прежде чем вносить правки в код, решите проблемы на уровне графики. Эти три приема исправляют большинство ошибок.
1. Проблема: “Исчезающий логотип”
Черный логотип с прозрачным фоном на белом фоне письма виден идеально. При переходе в Dark Mode фон становится черным (или темно‑серым), и логотип исчезает (черное на черном).
Решение:
Обводка: Добавьте к логотипу белую обводку толщиной 1–2 пикселя. На светлом фоне она незаметна, на темном — проявляет объект.
Универсальный цвет: Используйте светло‑серый оттенок для логотипа, который будет читаться на обоих фонах.
2. Проблема: “Белые заплатки”
Иконки соцсетей или фото товаров сохранены в формате JPG с белым фоном. В Dark Mode фон письма темнеет, а белые квадраты вокруг картинок остаются.
Решение: Всегда используйте прозрачные PNG. Обрезайте изображения строго по контуру.
3. Проблема: Чрезмерный контраст
Избегайте чистого черного цвета #000000 для фона и кипенно‑белого для текста. На OLED-экранах высокий контраст быстро утомляет глаза и может вызывать эффект “гало” (яркого свечения).
Решение: Используйте темно‑серые оттенки, например #121212 или #1E1E1E.
Кодинг: Media Queries для контроля дизайна
Для полного контроля, особенно в Apple Mail и iOS, необходимы CSS-правки. В редакторе Letteros стили можно добавить через блок HTML или настройки шаблона.
Шаг 1. Объявление поддержки в <head>
Сообщите почтовому клиенту о поддержке темной темы:
HTML
<meta name=»color-scheme» content=»light dark»>
<meta name=»supported-color-schemes» content=»light dark»>
Шаг 2. Задание стилей через CSS
Используйте медиа‑запрос @media (prefers-color-scheme: dark). Все стили внутри него активируются только в темной теме.
CSS
<style>
@media (prefers-color-scheme: dark) {
/* Фон письма */
.body-bg { background-color: #1e1e1e !important; }
/* Текст */
.dark-text { color: #f5f5f5 !important; }
/* Кнопки */
.button-style { background-color: #ff5722 !important; color: #ffffff !important; }
/* Адаптация логотипа (показ версии для Dark Mode) */
.light-img { display: none !important; }
.dark-img {
display: block !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: visible !important;
}
}
</style>
Важно: Используйте !important, чтобы гарантированно перебить стандартные стили.
Главная проблема: Gmail на Android
Gmail на Android часто игнорирует ваши медиа‑запросы. Он применяет агрессивную инверсию цветов.
Как минимизировать ущерб:
- Дизайн: Создавайте макет, который сохраняет читаемость даже при инверсии. Не полагайтесь на точные фирменные оттенки.
- Критические блоки: Для баннеров или блоков, требующих точной цветопередачи, используйте картинки вместо текста и фоновых цветов. Картинки Gmail не инвертирует.
Влияние Dark Mode на бизнес‑метрики
Адаптация под Dark Mode — это не только забота о дизайне, но и прямое влияние на результаты:
- Снижение отписок (Churn Rate): Удобное для чтения письмо не вызывает раздражения и желания закрыть его.
- Восприятие бренда: Качественная верстка в любом режиме формирует доверие и ассоциируется с профессионализмом.
- Улучшение конверсии: В темной теме яркие CTA-элементы (кнопки) лучше привлекают внимание.
Чек‑лист: Подготовка рассылки в Letteros
В конструкторе Letteros процесс упрощен. Следуйте плану:
- Аудит графики: Проверьте логотипы и иконки. При необходимости добавьте белую обводку или создайте версию для темной темы.
- Сборка: Соберите письмо в блочном редакторе.
- Превью: Используйте тумблер «Предпросмотр» – «◑» в Letteros, чтобы сразу увидеть результат инверсии.
Финальный Чек‑лист:
- Логотип и критические иконки видны на темном фоне.
- Изображения в формате PNG с прозрачным фоном.
- Текст имеет достаточный контраст (не чистый белый на чистом черном).
- Используются темно‑серые оттенки, а не чистый черный #000000.
- Кнопки сохраняют читаемость текста при инверсии.
Игнорирование Dark Mode — это риск потерять внимание аудитории. Адаптация не настолько сложная, как кажется: нужна лишь грамотная графика и правильный инструмент для верстки. Убедитесь, что ваше письмо выглядит безупречно в любом режиме.