Темная тема (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>
Важно: что делать с Gmail на Android? Этот почтовик часто игнорирует любые медиа-запросы и применяет агрессивную инверсию. Если вам критически важно сохранить фирменные цвета в конкретном блоке (например, в ярком баннере с текстом), верстайте его цельной картинкой. Картинки Gmail не инвертирует, и ваше сообщение дойдет до пользователя в первозданном виде.
Как проверить письмо в тёмной теме в Letteros
Собрать письмо правильно — половина дела. Важно убедиться, что оно выглядит корректно до отправки. В Letteros это занимает несколько секунд.
Шаг 1. Откройте письмо в редакторе Letteros.
Шаг 2. В нижней панели редактора найдите иконку с символом «◑» — второй значок слева в нижней строке. Нажмите на неё.
Шаг 3. Письмо переключится в режим тёмной темы прямо в редакторе. Вы сразу увидите, как оно выглядит в Dark Mode.
Шаг 4. После правок снова нажмите «◑» — убедитесь, что проблемы устранены.
Влияние Dark Mode на бизнес-метрики
Адаптация под Dark Mode — это не только забота о дизайне, но и прямое влияние на результаты:
- Снижение отписок (Churn Rate): Удобное для чтения письмо не вызывает раздражения и желания закрыть его.
- Восприятие бренда: Качественная верстка в любом режиме формирует доверие и ассоциируется с профессионализмом.
- Улучшение конверсии: В темной теме яркие CTA-элементы (кнопки) лучше привлекают внимание.
Чек-лист: Подготовка рассылки в Letteros
- Логотип и критические иконки видны на темном фоне.
- Изображения в формате PNG с прозрачным фоном.
- Текст имеет достаточный контраст (не чистый белый на чистом черном).
- Используются темно-серые оттенки, а не чистый черный #000000.
- Кнопки сохраняют читаемость текста при инверсии.
Игнорирование Dark Mode — это риск потерять внимание аудитории. Адаптация не настолько сложная, как кажется: нужна лишь грамотная графика и правильный инструмент для верстки. Убедитесь, что ваше письмо выглядит безупречно в любом режиме.