Техническое руководство для разработчиков по верстке email-писем в темной теме (Dark Mode)

Мы все уже знаем, что темная тема (Dark Mode) пришла всерьез и надолго: более 35% подписчиков открывают письма именно в этом режиме. У темной темы много преимуществ: она снижает нагрузку на глаза, экономит заряд аккумулятора устройств и помогает лучше сосредоточиться за счет менее отвлекающего интерфейса. Но, несмотря на растущую популярность, многие до сих пор не учитывают ее при проектировании или верстке, что может негативно сказаться на эффективности email-кампаний.

Когда мы спросили наших любимых email-гиков, почему это так, самым частым ответом было то, что верстать письма для темной темы — это просто *сложно*.

Но это вовсе не обязательно так! В этом руководстве мы поделимся секретами работы с темной темой и разберем главные трудности, с которыми можно столкнуться.

## Крупнейшие проблемы темной темы для разработчиков сегодня

Давайте погрузимся в самые каверзные препятствия при работе с темной темой и узнаем, как с ними справиться.

### Проблема №1: единой «темной темы» не существует

Первое правило темной темы — не существует какой-то одной её версии. Есть три стандартных способа, которыми она может отображаться:

1. **Без изменений цвета.** Дизайн письма остается прежним, независимо от того, установлен ли в интерфейсе светлый или темный режим.

2. **Частичная инверсия цвета.** Инвертируются только обнаруженные светлые фоны.

3. **Полная инверсия цвета.** Инвертируются области с обнаруженными светлыми фонами, а также затрагиваются темные фоны.

Это… быстро усложняет задачу и может привести к несогласованности в ваших email-кампаниях. Это не универсальная настройка или ползунок, который можно быстро включить или выключить.

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

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

«Отлично», — подумаете вы. — «Очень полезный совет». Не бойтесь! Это еще не все.

Вот как стоит работать с этими сложными параметрами.

### Проблема №2: вы не можете контролировать *все* темные темы

Второе правило темной темы: **вы не можете контролировать то, как подписчики видят ваши письма.**

Эти два принципа станут основой вашей работы:

— Используйте прогрессивное улучшение (progressive enhancement).

— Поддерживайте последовательность в тестировании и контроле качества (QA).

#### Совет: используйте прогрессивное улучшение

При работе с темной темой — да и вообще с письмами — нам нравится использовать принцип прогрессивного улучшения.

Что это значит? **Прогрессивное улучшение** означает начало работы с того, что вы можете контролировать, и дальнейшее расширение возможностей. По сути, это верстка и проектирование с ориентацией на «наименьший общий знаменатель», чтобы ваши письма оставались функциональными и приятными даже в старых почтовых клиентах, на десктопах и в браузерах.

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

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

*Когда в Litmus Builder включена темная тема, браузерный превью применяет стили, определенные через CSS медиа-запрос @media (prefers-color-scheme: dark).*

**🔥LitTip: Просматривайте и оптимизируйте письма в темной теме по мере верстки.** Опыт разработки в Litmus Builder анализирует код письма на наличие элемента CSS color-scheme. Если он найден, вы увидите браузерный предпросмотр того, как письмо выглядит в темном режиме.

#### Будьте последовательны в тестировании и QA

Последовательность — это ключ! Это касается и вашего рабочего процесса. Тестирование и QA — одни из самых важных шагов, гарантирующих, что каждое сообщение выглядит и работает в папке «Входящие» именно так, как задумано.

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

## 6 шагов к созданию и внедрению темной темы в письма

1. Оптимизируйте логотипы и изображения для всех вариаций темной темы.

2. Включите темную тему в настройках пользовательских агентов почтовых клиентов.

3. Добавьте стили для клиентов Apple и iOS, используя CSS-медиазапрос `@media (prefers-color-scheme: dark)`.

4. Дублируйте стили для приложения Outlook, используя префиксы `[data-ogsc]` или `[data-ogsb]`.

5. Добавьте свои CSS-классы для темной темы в HTML-тег body, чтобы разрешить переключение изображений/стилей.

6. Тестируйте, тестируйте и еще раз тестируйте!