кейсы с темной темой в email

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

Мы постоянно работаем (и адаптируем письма) для Google, Яндекс, Mail, Yahoo, Outlook 365 и выявили некоторые закономерности адаптации в этих почтовых сервисах.

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

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

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

Для детализированных картинок и иконок иногда не избежать плашки.

Подложку сделали на полупрозрачном фоне: в светлой теме ее не видно (она становится белой), но видно в темной.

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

Подсветка нужна не всегда. Если логотип есть в светлом (или цветном) варианте, можно использовать его и не делать подсветку.

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

Фирменные тексты, которые верстаются картинкой, необходимо обводить или подсвечивать.

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

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

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

Анимация адаптируется так же, как картинки.

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

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

Мы сразу делали письмо на черном фоне. Казалось бы, что могло пойти не так? Темная тема в приложении Gmail на iOS инвертирует все цвета, поэтому изначально темное письмо в темной теме становится светлым.

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

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

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

Решение: сделали волну полупрозрачной. Так она на темном фоне принимает темный цвет.

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

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

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

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

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