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