Как подготовить письмо для темной темы

Инфографика

Как подготовить письмо для темной темы

Инфографика
В одной темной-темной теме…

Почтовые сервисы меняют внешний вид писем в темной теме на основе собственных алгоритмов. Никаких инструкций от почтовиков по адаптации нет.

Мы подготовили инфографику — она выстрадана поможет подготовить письмо, которое будет отображаться корректно как в темной, так и в светлой теме.
Как почтовые сервисы меняют оформление
Эти блоки нужно правильно подготовить
Что делаем в дизайне
1. Все изображения отрисовываем на прозрачном фоне
Это поможет избежать белых рамок в темной теме. GIF анимация тоже на прозрачном фоне
2. Темные логотипы, иконки и нестандартные тексты дополняем свечением
Так они не потеряются на темном фоне. Подсветку можно сделать белым или под цвет светлого фона
Что делаем в верстке
1. Темный текст на светлом фоновом изображении верстаем картинкой
Если оставить обычным текстом, он станет светлым и его будет не прочитать
Можно использовать полупрозрачные подложки — фон в темной теме затемнится и светлый текст будет видно. Это нужно делать в дизайне
2. Все картинки используем в PNG формате
Этот формат поддерживает прозрачность фона.
Проверяем темную тему в почтовиках
Теперь вы всё знаете о темной теме!
P. S.

Участвуйте в самом масштабном конкурсе лучших писем Email-Competitors Awards. Побеждайте, получайте признание сообщества и полезные призы от спонсоров и партнеров конкурса.