Готовим дизайн, включаем через медиазапросы и исправляем проблемы с Gmail
Тёмная тема — уже давно не просто тренд, а полноценный инструмент, который может улучшить восприятие контента и повысить вовлеченность пользователей. Но как правильно использовать это решение в письмах, чтобы оно действительно работало?
В этой статье вместе с Евгением Шишковым, CPO конструктора рассылок EmailMaker, разберём особенности создания писем для тёмной темы, распространённые ошибки и то, какие преимущества dark mode может принести вашим рассылкам.
Возможность переключаться между тёмной и светлой темой есть во многих приложениях, операционных системах и на разных устройствах. Изначально предполагалось, что светлая тема должна использоваться в дневное время, а тёмная — в вечернее.
Но большинство пользователей не меняют режимы регулярно, а выбирают один из вариантов. Причём статистика показывает, что люди предпочитают тёмную тему: согласно данным на 2024 год, 82% владельцев смартфонов выбирают именно её. Причины разные — кто-то при помощи dark mode экономит заряд батареи, кто-то считает, что это благотворно влияет на глаза, а кому-то так просто больше нравится.
И вот представьте: на устройстве, где установлена тёмная тема, пользователь открывает почтовый клиент, где тоже всё тёмное, видит письмо, кликает… и глаза выжигает яркий белый свет с экрана. У него должна быть очень большая мотивация прочесть письмо. В противном случае человек, скорее всего, поспешит закрыть окно — и не факт, что откроет ваши письма в будущем.
Конечно, это утрированный сценарий. Далеко не все люди используют тёмную тему, далеко не для всех использующих её светлое письмо станет поводом отписаться от рассылки. В целом, dark mode — не обязательное решение, но если можно сделать взаимодействие пользователей с вашей рассылкой приятнее, почему бы его не внедрить?
Почтовые клиенты могут поддерживать или не поддерживать тёмную тему, но даже если она у них есть, работает она там очень по-разному. Вот три основных варианта, что они могут делать с вашими письмами в dark mode.
Ничего. Базовый уровень поддержки тёмной темы — её отсутствие. Это почтовые клиенты, которые никак не изменяют ваше письмо в зависимости от того, включена тёмная тема у пользователя или нет. В целом, у этого даже есть свои преимущества — вы можете быть уверены, что письмо дойдёт в том виде, который вы ему придали. Чаще всего так себя ведут десктоп и веб-почтовики, а также устаревшие мобильные приложения.
Инверсия цвета. Пожалуй, самый неприятный из-за своей непредсказуемости вариант поведения почтового клиента: он может инвертировать цвета вашего письма целиком или частично — и зачастую это выглядит не слишком приятно. Частичная инверсия ещё ничего: обычно она подразумевает только замену светлого фона на тёмный, а тёмного текста — на светлый.
При полной инверсии почтовик пытается преобразовать все цвета, зачастую затрагивая не только цвет, но также яркость и сатурацию. Иногда это может выглядеть нормально, а иногда — так себе. И кроме того — если вы изначально отправляли тёмное письмо, в dark mode при полной инверсии оно, по иронии судьбы, может стать светлым!
Таким поведением отличается Outlook (веб-версия и почти все его приложения для десктопа и мобильных) и мобильное приложение Gmail.
Поддержка кастомной тёмной темы. Некоторые почтовые клиенты позволяют использовать CSS для настройки дизайна и его переключения между тёмной и светлой темами. Поддерживается на MacOS и iOS последних версий.
Короткий ответ — тоже по-разному. В Яндекс Почте можно установить тёмную тему, но она не повлияет не только на само письмо, но даже на фон, на котором оно расположено. Никакой инверсии, и поддержки тёмной темы, заданной через CSS, тоже никакой.
У Mail.ru в тёмной теме письма подвергаются частичной, но довольно радикальной инверсии.
Вот, например, одно письмо из коллекции шаблонов EmailMaker. Обратите внимание на используемые цвета: белый фон, чёрный текст, кнопки с чёрной обводкой, а внизу коричневые заголовок и кнопка.
При переходе в тёмную версию меняется фон и цвет текста. Но цвет рамок у кнопок остался чёрным, хотя текст в них инвертировался. Коричневый заголовок претерпел изменения, но цвет кнопки остался прежним. Видимо, такой оттенок коричневого показался почтовику достаточно контрастным.
Заодно решили проверить, как Mail.ru себя поведёт, если ему прислать письмо, изначально сделанное в тёмных тонах. Спойлер: светлыми они не стали, но некоторые элементы почтовику всё равно показались слишком яркими.
Правильная подготовка изображений позволит вашему письму выглядеть достойно при инверсии цвета. Для этого важно сделать три вещи.
Удаляем фон. Все изображения, которые можно оставить без фона — делаем таковыми (для этого вместо JPG нужно использовать формат PNG или GIF). Так у картинки не будет бесячего квадратного контура-подложки.
Убрать фон удобно, например, через плагин RemoveBG в Figma, также можно выделить и вырезать объект через режим «Маска» в Photoshop или использовать любой другой удобный вам способ.
Добавляем поля. Иногда прозрачный фон использовать не вариант — например, когда на пикче чёрный шрифт или однотонный набросок, и на чёрном фоне он потеряется или просто будет выглядеть не ок. В таком случае лучше не убирать фон, а добавить пространство вокруг изображения. Это позволит сохранить читабельность и будет выглядеть приемлемо.
8 нейросетей, которые помогут заменить фон на фото
В идеале, отступы должны быть широкими и одинаковыми со всех сторон — это можно также сделать при помощи любого редактора изображений.
Делаем обводку. Ещё один вариант, если убрать фон не получится — сделать у элементов изображения белую или серую обводку — так они не потеряются при смене фона в dark mode.
Казалось бы, для более предсказуемого инвертирования стоит выбирать как можно более простые цвета: чёрный на белом не испортить, если превратить его в белый на чёрном. Однако высокая контрастность может плохо влиять на восприятие текста, поэтому лучше предпочесть вариации серого.
Это же касается и других цветов текста, например, цвета гиперссылок: классический яркий синий при выборе серой гаммы не будет с ней гармонировать — лучше его приглушить.
В почтовых клиентах Apple Mail и Mail.ru можно настроить индивидуальный дизайн для светлой и тёмной темы. Разберём этот способ на примере одного из шаблонов EmailMaker.
Как мы видим, тут изменяются цвета фонов, текстов, линий, а также заменяются картинки логотипа и соцсетей. Как этого можно достичь?
Первое, что нужно сделать, — дать устройствам получателей понять, что у письма есть версия для тёмной темы. Для этого в HTML-код (между тегами <head> и </head>) нужно добавить следующие метатеги:
Оба этих тега указывают веб-браузерам и почтовым клиентам, что у вашего письма есть и светлая, и тёмная версии. Без них будет считаться, что есть только режим light, и сервисы будут отображать письмо как есть — без изменений при переключении темы.
Когда вы задаёте эти теги с параметрами light и dark одновременно, вы сообщаете почтовым клиентам о необходимости включить поддержку тёмного режима — либо через инверсию цветов, либо через кастомные настройки, прописанные в CSS.
Далее, так же в <head>, внутри тега <style> необходимо прописать медиазапрос @media (prefers-color-scheme:dark), а внутри него стили, которые будут применяться в тёмной теме. Пример кода:
Указанные классы вроде “dark-background” следует прописать уже в теле письма в атрибуте class у элементов, к которым требуется применить новые стили. Заметьте, класс dark-image вынесен за пределы стилей для тёмной темы. Поэтому картинка с этим классом в светлой теме будет скрыта. И, соответственно, наоборот, картинка с классом light-image будет скрыта в тёмной теме.
Тёмная тема в мобильных приложениях Gmail появилась в 2019, но некоторые её особенности всё ещё ставят email-маркетологов в тупик, в частности, различие в отображении на iOS и Android.
Так, Gmail настаивает на изменении любого светлого цвета текста на тёмный в приложении для iOS. В итоге письмо с белым текстом на чёрном фоне получит чёрный текст на светлом. Это не только кажется абсурдным (наше письмо для тёмной темы принудительно снова делают светлым), но и создаёт реальные проблемы с доступностью и читаемостью.
На самом деле, перед нами стоят две проблемы:
С фоном всё более менее просто: можно использовать в качестве фона картинку или указать его градиентом. Например:
А вот с сохранением светлого текста придётся повозиться. Gmail поддерживает CSS Blend Modes, который позволяет описать, как должны меняться цвета элементов при перекрытии. Не будем вдаваться в детали, заинтересованные сами могут почитать источник. Опишем только то, что нужно сделать с вашим шаблоном.
Первое. Объявить классы:
Второе. Тегу <body> прописать класс body:
Третье. Обернуть все теги с текстом в два контейнера с классами gmail-blend-screen и gmail-blend-difference.
Шаблон с применением этой технологии вы можете посмотреть в EmailMaker. Для этого надо зарегистрироваться, создать свой проект и перейти по ссылке.
Читайте только в Конверте
Отправляйте красивые письма, делитесь классным контентом, привлекайте больше платящих клиентов. До 1 500 писем бесплатно.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно)
