Как адаптировать ваши письма под темный режим

19 апреля 2021
Анна Ефремова
Время чтения: 6 мин

Темный режим — тренд email-маркетинга, который вошел в жизни маркетологов в 2019 году. Мало кто знает, как использовать его в работе и делать так, чтобы все письма отлично выглядели в темной теме. Чтобы помочь вам, мы перевели гайд по темной теме от Litmus.

Apple, Twitter, Slack, Facebook и другие крупные бренды уже используют темный режим в своих приложениях. Это популярная тема у пользователей, поэтому важно разобраться, что именно привлекает их.

Limitus выделяет следующие моменты:

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

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

Мобильные приложения:

  • Почта iPhone и iPad.
  • Gmail на iOS и Android.
  • Outlook на iOS и Android.

Десктопные приложения:

  • Почта для МасOS.
  • Outlook 2019 на MacOS и Windows.

Веб-клиенты:

Все почтовые клиенты поддерживают темный режим, но это не означает, что письма по умолчанию адаптируются под темную тему. Например, письмо классно выглядит в Gmail, но в Outlook совершенно не так, как было задумано. Темная тема усложняет весь этот процесс.

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

Вариант 1: Без изменения цвета

Интерфейс в почтовом клиенте меняется, содержание письма нет. Например, так происходит на MacOS и iOS.

Вот как это выглядит: меняем режим в интерфейсе MacOS, но с письмом ничего не происходит.

Отображение email-писем на MacOS при смене режима.

Правда и здесь есть несколько исключений:

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

Второе — если в HTML-коде оставить в мета-тегах значение темного режима, то Apple автоматически заменит чистый белый цвет на темно-серый. Чтобы избежать этого, используйте пользовательские стили Dark Mode или другой формат белого цвета, например на fffffe.

Параметры темного режима : по умолчанию и пользовательский

Если ничего не менять в коде, то некоторые почтовые клиенты автоматически применяют темный режим к емейлам. Чтобы избежать этого разработайте «темный» вариант своей рассылки. Внизу можно увидеть сравнение светлой и пользовательской темной темы.

Светлая и темная версия одного emai
Развернуть

Вариант 2: Частичная замена цвета

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

Вот так выглядит частичная замена цвета на Outlook:

Частичная замена цвета на Outlook
Развернуть

Вариант 3: Полная замена цвета

С этим типом темного режима работать сложнее всего. К сожалению, такие популярные почтовые клиенты, как Outlook 2019 (Windows) и Gmail (iOS) используют эту тактику.

Полная замена цвета в email-рассылке
Развернуть

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

Как применять собственные стили для тех, у кого темная тема

Для тех, кто хочет применять свои стили для темной темы есть несколько вариантов:

@media (prefers-color-scheme: dark)

Этот метод работает точно так же, как и применение блока стилей внутри запроса @media для мобильной адаптации. Этот CSS-блок будет работать в любом пользовательском интерфейсе с включенной темной темой.

[data-ogsc]

Этот метод был разработан для Outlook. Чтобы применить собственный стиль темного режима в Outlook достаточно скопировать стили @media (prefers-color-scheme: dark), которые вы уже применили, и просто добавить соответствующие префиксы [data-ogsc] к каждому CSS-правилу.

Ниже можно увидеть список от Limitus, с вариантами поддержки темного режима разными почтовыми клиентами.

Список почтовых клиентов, которые поддерживают темную тему

Ситуация с Яндекс.Почтой и Mail.ru

С нашими российскими почтовыми клиентами дела обстоят не так радостно, как с их американскими «коллегами». Обо всем по порядку:

  • В Яндекс.Почта темную тему включить можно. В декстопной версии письмо не подстроится под интерфейс. А в мобильном приложении письмо адаптируется под темную тему.
  • Письма, которые лежат на почте mail.ru, подстраиваются под темный режим и на декстопе, и в мобильном приложении.

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

Когда начнете работать с темной темой не забудьте о нескольких важных деталях.

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

Для тех клиентов, что не поддерживают таргетинг темного режима, добавьте полупрозрачные контуры к PNG изображениям. Например, для приложений Gmail и Outlook 2019 на Windows. Это поможет избежать проблем с отображением в почтовых приложениях, которые используют частичную или полную замену цвета.

Оптимизация логотипов под темную тему в почтовом клиенте

Если изображения не прозрачны и имеют белый фон, то убедитесь, что вокруг картинки достаточно большая рамка, что позволит избежать «наезда» на другие элементы.

Как адаптируются письма под темную тему

Не забывайте менять изображения для светлой и темной темы с помощью описанных в данном руководстве методов @media (prefers-color-scheme: dark) и [data-ogsc].

2. Включите темный режим в письме для тех, у кого темный интерфейс

Добавляя эти метаданные в тег <head>, вы включаете темный режим в письме для пользователей с активной темной темой.

3. Добавьте стили темного режма для запроса @media (prefers-color-scheme: dark)

Добавьте этот медиазапрос в ваш встроенный раздел <style></style> для пользовательских стилей темного режима в iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS) и Outlook App (iOS).

Классы .dark-img и .light-img особенно полезны для отображения логотипа, характерного для темной темы, если вариант с рамками для логотипа не подходит для вас.

Пример CSS:

4. Дублируйте стили темного режима с префиксом [data-ogsc]

Чтобы приложение Outlook на Android отображало все корректно, добавьте этот стиль:

Пример CSS:

5. Примените стили темной темы к телу письма

Убедитесь что все ваши HTML-теги имеют подходящие классы Dark Mode. Вот пример dark-img and .light-img классов, и того как они выглядят в светлой и темной темах.

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

Почтовые клиенты постоянно меняются. Только с помощью тестирования вы сможете узнать, как пользователи видят ваши рассылки.

Давайте вспомним еще раз, на что стоит обратить внимание:

  • Темный режим относительно новый тренд. Важно следить за его обновлениями и разбираться в них.
  • Почтовые клиенты по-разному отображают письма в темном режиме.
  • Выделяют 3 метода адаптации писем: без изменения цвета, частичная и полная замена цвета.
  • Методы @media (prefers-color-scheme: dark) и [data-ogsc] помогут вам сохранить нужный вам стиль темной темы для большинства почтовых сервисов.
  • Оптимизируйте лого и другие изображения в письмах во всех стилях.
  • Тестируйте свои email-рассылки!

Если у вас остались вопросы по настройке темного режима, то можете обратиться к нашим экспертам, они с радостью помогут вам?

Другие наши статьи