Logo

Трудности перевода: Dark Mode в письмах

Екатерина Назаренко

Email-маркетолог и специалист по автоматизации MacPaw

Тезисы вебинара:

  1. Портрет темной темы.
  2. Стоит ли игра свеч? Когда нужно заморочиться.
  3. Как сделать кастомную темную тему.
  4. Идем простым путем. Рекомендации.

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

Первые компьютеры были как раз на темной теме:

  • 1970-1990 – Dark mode
  • 1990-2018 – Light mode

В 90-х годах и вплоть до лета 2018 у нас царствовала светлая тема. Летом 2018 года с анонсом бета-версии очередной macOS Mojave Apple вернул темную тему в нашу реальность, порадовав таким образом не только своих пользователей, но и сделав интереснее жизнь разработчиков и маркетологов.

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

Почему Dark Mode настолько популярен

Темная тема набирает все большую и большую популярность, и этому есть несколько причин.

Эргономичность и доступность

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

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

Я провела опрос среди своих коллег, кому больше подходит темная/светлая тема и почему. Мнения разделились приблизительно 50 на 50.

Энергоэффективность

Экономия заряда батареи за счет снижения яркости экрана. Чем ниже уровень яркости – тем дольше работает батарея. Каждый цвет потребляет разное количество энергии: самым энергозатратным является белый. Следовательно в темной теме срок работы батареи гораздо дольше.

Внешний вид

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

Какие почтовые клиенты поддерживают Dark Mode

На данный момент темную тему поддерживают: macOS 10.14-10.16, iOS 13&14, Android 10, Windows 10.

На мобильных устройствах:

  • iPhone Mail,
  • iPad Mail,
  • Gmail App (Android),
  • Gmail App (iOS),
  • Outlook App (Android),
  • Outlook App (iOS).

На десктопе:

  • Apple Mail,
  • Outlook 2019 (MacOS),
  • Outlook 2019 (Windows).

В браузере:

  • Outlook.com,
  • Hey.com.

Сложности отображения писем с темной темой

Вся сложность – в разных отображениях темной темы у разных почтовых клиентов:

  • Без изменений (Apple Mail, iPhone, iPad), т. е. как сверстано письмо, так и будет отображаться.
  • Частичная инверсия (Outlook.com, Gmail app (Android)). Здесь меняется фон, цвет текста, частично либо без изменений остается цвет кнопки.
  • Полная инверсия цветов (Gmail app (iOS)) – приложение инвертирует по своему усмотрению.

Стоит ли заморачиваться над темной темой

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

Создавайте увлекательные контентные рассылки с eSputnik

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

На данный момент четко ответить на этот вопрос сложно. Предлагаю некоторые моменты, которые помогут вам от чего-то оттолкнуться.

Как вычислить процент прочтений с Dark Mode?

  1. Проанализировать процентный состав вашей базы по доменам пользовательских почт. Сколько на Gmail, Mail.ru, Yandex, Yahoo, Aol и т. д., чтобы понять, какими основными почтовиками пользуются ваши клиенты.
  2. Узнать процент прочтения на разных платформах, операционных системах. Эта информация есть в любом сервисе рассылок, которым вы пользуетесь. Так вы понимаете, что происходит на платформах и почтовиках, уже зная, как последние поддерживают темную тему. И делаете вывод, стоит ли дополнительно заниматься темной темой.
  3. Посмотреть данные по использованию темной темы, например, в Google Analytics или в любом другом инструменте аналитики. Конечно, при условии, что вы настроили передачу этих данных, т. к. по умолчанию таких данных там нет. Мы также отталкиваемся от этой информации. Например, наш сайт посещают пользователи, 30% из которых используют темную тему. Естественно, что это не все подписчики и не факт, что в своих почтовых сервисах они используют эту тему.
  4. Взять данные из внешних источников, исследований. Например, Litmus недавно презентовал свое небольшое исследование о том, какой темой в почтовых клиентах пользуются юзеры.

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

Например, мы видим, что на смартфонах открывают 30%, в основном на Mac и iOS – это почти 90%, что неудивительно, поскольку Mac – это наша пользовательская база. Также достаточная база клиентов и на Gmail, который тоже интересно обрабатывает темную тему.

В середине сентября 2020 Litmus запустил новый продукт по аналитике, который позволял увидеть соотношение прочитанных писем, тему прочтения (темная, светлая), устройство, на котором открывалось письмо. Данные, собранные за месяц, показали, что письма в темной теме на десктопе в Apple Mail просмотрело около 7,5% пользователей, а на iOS – уже 36%, что довольно немало.

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

Стоит ли заниматься темной версией письма для маленьких баз

Не стоит при таких условиях:

  1. Если база подписчиков небольшая
  2. Если по данным в аналитике вы видите, что в темной теме читает письма малое количество пользователей.
  3. Если основная масса прочтений – на мобильном, на iOS, на iPhone, через Gmail, поскольку на данный момент предугадать инверсию цветов в темной теме невозможно.

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

Шаги для верстки Dark Mode письма

Нужно несколько шагов, чтобы сверстать темную тему:

  1. Включение обнаружения темной темы в письме, т. е. добавляем метатеги. Копируем кусок кода и вставляем. Этим мы даем понять почтовикам, что «у нас есть кастомная верстка нашего письма, ищите стили для него».
    Как правило, есть другой набор метатегов в самом начале письма, еще до того скрытого предзаголовка. Там есть блок метатегов, туда пристраиваем еще два дополнительных метатега.
  2. Настройки параметров темной темы в CSS-стилях. Задаем стили для темной темы. Здесь также есть конкретный кусочек кода, который нужно добавить. Необходимо расписать все варианты: цвет, размер и все, что мы хотим для наших базовых классов стилей, перезаписать в темной теме – отдельно для iOS, Apple Mail, Outlook.com и отдельно для Outlook (Android).
  3. Я верстаю в Stripo. Перелистываете базовые настройки, потом респонсивные – для отображения в мобильном. Дальше копируете и вставляете кусочек кода @media (prefers-color-scheme: dark) {}.
    Потом прописываете все те параметры, которые есть выше в светлой теме. Прописываете совершенно другие цвета.
    Почему это вставляется в самом низу? Потому что почтовики читают эти CSS снизу вверх, т. е. все, что ниже, главнее того, что перезаписывает сверху. Таким образом темные CSS для темной темы ставим в самом низу. Как видите на примере, здесь сначала идет кусочек кода, а потом перечисление наших настроек. Это является основными настройками.
  4. Отдельно для Outlook App (Android) те же настройки, которые в светлой теме прописали, копируем для каждого класса, для каждого параметра. Добавляем префикс [data-ogsc] и вставляем этот блок над @media (prefers-color-scheme: dark) {.
  5. Создание дополнительных CSS-правил (при необходимости). Необязательный шаг – создание дополнительных CSS-правил – можно проиллюстрировать на подмене картинки, в данном случае логотипа. Чтобы в светлой теме одна картинка отображалась так, в темной – совершенно по-другому.

В светлой теме таких классов нет, поэтому создаем в настройках для темной темы отдельные блоки: .dark-image {, .light-image {, прописываем параметры, как отображать эту картинку. В CSS задаем «показывать блок для темной темы, при этом картинку для светлой скрыть».

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

Поддержка темной темы в разных почтовых клиентах

Apple Mail, iPhone, iPad и Hey.com – здесь можем полностью задать темную тему так, как хотим, чтобы она отображалась. Все остальные почтовики на данный момент либо частично что-то инвертируют, либо отображают так, как захотят, например, как в Outlook на Windows и Gmail App на iOS.

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

Ключевые рекомендации для верстки Dark Mode

Рекомендации по кастомной верстке:

  1. Не использовать чистый белый и чистый черный, потому что инверсия происходит максимально резко. Письма некрасиво выглядят. То же самое касается и других цветов: не брать крайние и контрастные оттенки цветов, а пользоваться палитрой более промежуточных. 50 оттенков серого к вашим услугам.
  2. Стили для темной темы прописываем в самом низу CSS, потому что почтовики читают их снизу вверх и перезаписывают.
  3. Стили для Outlook (Android) прописываются над основными стилями (для iOS, Apple Mail, Outlook 2019 (MacOS), Outlook App (iOS)).
  4. Изображения готовим на прозрачном фоне, в основном эта рекомендация на 90% полезна. Но есть исключение: всегда тестируем и смотрим, может, это не наш случай.

Как обойтись без сложной верстки

Рекомендации для тех, кто идет более простым путем, без верстки:

  • Подготовка изображений: логотип готовить на прозрачном фоне

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

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

  • Подбор текста и фона

Рекомендую не использовать контрастный цвет текста и фона, потому что глазам может быть больно.

  • Делаем градиент

Я очень люблю градиент в письмах, потому что получается яркий и нарядный эффект. Но с появлением темной темы этот градиент добавляет новых сложностей. Если это кастомная верстка – на Apple, iOS, iPad – там можно задать варианты градиентов, как отображать, и проблем не будет. Но если мы идем простым путем, т. е. не меняем настройки, и когда у нас градиент – в темной теме он работает странно: либо инвертируется, либо нет.

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

Моя рекомендация: если мы не делаем кастомную верстку – избегать градиентов. Ваше письмо будет чище выглядеть.

  • Шаблоны и палитры

Универсальный совет при работе с темной темой – потратить дополнительное время с дизайнером.

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

Составьте также таблицу – как эти цвета инвертируются в темной теме, и если результат вас не устроит – путем тестирования подкорректируйте палитру. Это упрощает и стандартизирует вашу работу в будущем.

Рекомендации:

  • Осторожно использовать контрастные цвета: чистый белый #FFFFFF и черный #000000.
  • Изображения готовить на прозрачном фоне и проверять, т. к. прозрачный фон не всегда решает нашу задачу.
  • По возможности избегать градиента.
  • Готовить с дизайнером цветовые палитры.
  • Все обязательно тестировать.

Переходите на темную сторону и уважайте предпочтения ваших пользователей по выбору темы!

Special Request Inline