Кейсы с темной темой в email. Примеры и решения адаптации писем из практики Inbox Marketing
Почтовые сервисы меняют код письма, чтобы адаптировать оформление под темную тему. Каким образом работают их алгоритмы — неизвестно. Можно только наблюдать то, что происходит на практике, и делать выводы.
Мы постоянно работаем (и адаптируем письма) для Google, Яндекс, Mail, Yahoo, Outlook 365 и выявили некоторые закономерности адаптации в этих почтовых сервисах.
В статье покажем примеры работы с темной темой и решения, как в итоге удалось сделать письмо, которое красиво отображается в темной и светлой темах.
Элементы письма — на прозрачный фон
Если картинка на прозрачном фоне будет плохо считывается в темной теме — оставляем частично белый цвет.
Для детализированных картинок и иконок иногда не избежать плашки.
Подложку сделали на полупрозрачном фоне: в светлой теме ее не видно (она становится белой), но видно в темной.
Подсветка и обводка в тексте, заголовках и логотипах
Иногда иконкам в темной теме тоже нужна обводка. Если в светлой теме иконки расположены на цветной плашке, поставьте им светлый фон. Иначе в классической теме обводка будет заметна.
Фирменные тексты, которые верстаются картинкой, необходимо обводить или подсвечивать.
Многие компании используют фирменные шрифты. Но большая часть почтовиков их не отрисовывает, а заменяет на безопасные веб-шрифты, и в итоге письмо будет выглядеть совсем не так, как в дизайн-макете, и может «разъехаться».
Чтобы этого не происходило, мы нарезаем текст фирменным текстом картинками, но нужно делать светлую обводку для темной темы. Проблема обводки в том, что иногда ее видно в классической теме тоже.
Решение: подобрать похожий стандартный шрифт вместо фирменного. Это позволит не тратить время на обводки и не рисковать дизайном в светлой теме, ведь текст адаптируется автоматически.
Анимация адаптируется так же, как картинки.
Гифка: статичная картинка и анимация
Разделили гифку на составные части: статичную линию и анимированную карусель. Линию подсветили, а гифку вырезали на прозрачном фоне.
Темная тема наоборот
Решение: тексты нарезали картинками, чтобы белый текст не инвертировался в черный, и подложили фоновую картинку чёрного цвета под всё письмо, кроме подвала.
Адаптация неровных краев цветных подложек
Поэтому нужно резать двумя прямоугольниками, но в темной теме цвет картинок меняется на противоположный. В результате получается, как на сриншоте в центре.
Можно было бы сделать еще лучше: подложить под текст между плашками полупрозрачную фоновую картинку, чтобы цвет в темной теме идеально совпал. Но в условиях жестких дедлайнов, увы, иногда просто нет времени подумать над еще более хорошим решением.
Инверсия текста, картинок и кнопок
Оставить светлую картинку с черным текстом в темной теме можно, если сверстать оба элемента картинками и расположить их друг над другом. Либо вырезать весь баннер картинкой.
«Ситуация с плашками сейчас довольно неоднозначная. Мобильное приложение Яндекс. Почты „научилось“ распознавать белые плашки в коде, но пока что недостаточно успешно — получается через раз.
Оптимальным решением для таких блоков, я думаю, будет задавать для самой плашки большой уровень прозрачности. Если фон самого письма изначально белый, то на их внешнем виде это никак не отразится, а вот в борьбе с проблемами темной темы поможет».
Леся, верстальщик в Inbox Marketing
В тех случаях, когда в самом письме или его части изначально задан светлый цвет текста, как правило, он остается неизменным. Цвет фона такого письма или блока иногда тоже остается неизменным. Но на практике встречаются не совсем предсказуемые варианты.
Тестируйте отображение писем
и коллекционируйте решения
В результате тестов собирайте удачные решения и держите их под рукой — это экономит время. Вот пара советов о темной теме напоследок.
1. Все изображения (логотипы, иконки, небольшие рисунки, элементы фона) вырезайте на прозрачном фоне. Если это почему-то невозможно, дизайнеру следует заранее оформлять рамкой изображения, чтобы в темной теме все выглядело максимально органично.
2. Темные логотипы, нестандартные по шрифту заголовки, иконки и другие темные элементы нужно дополнять белым свечением или под цвет светлого фона.