Как мы перестали беспокоиться и полюбили темную тему в email-рассылках
Темная тема в последние пару лет стала мощным трендом в дизайне приложений на всех платформах. Быстро выяснилось, что она очень востребована. Например, когда «ВКонтакте» в апреле 2019 года запустила темную тему в своем Android-приложении, в первый же день ее активировали 1,5 млн пользователей. Примерно тогда на сайте 4PDA провели тематический опрос с участием 21,5 тыс. человек, и оказалось, что почти 70% из них пользуются темной темой на своих гаджетах.
В борьбе за лояльность пользователей разработчики добавляют темную тему и в почтовые клиенты. А значит, брендам и бизнесу в своих email-рассылках приходится учитывать «темный» тренд, если они хотят, чтобы их коммуникации хорошо считывались и решали свои задачи.
Мы в агентстве Dau Relationship Marketing обратили на это внимание и провели аудит того, как выглядят рассылки наших клиентов в темной теме. Оказалось, что проблем возникает достаточно много и малой кровью их не решить.
Наша продакшн-команда провела комплексную работу:
- разобралась, как работает темная тема на разных устройствах и в разных приложениях;
рассмотрела различные варианты решения проблем;
- сформулировала принципы дизайна и верстки писем, которые позволяют им адекватно отображаться как в светлой, так и в темной теме на всех платформах и во всех популярных приложениях.
Результаты нашего исследования мы коротко резюмировали в этой статье — надеемся, она будет вам полезна.
Постановка проблемы
Вот с чем мы столкнулись до того, как стали учитывать особенности дизайна для темной темы. Разберем на реальном примере. Так выглядело письмо из регулярной рассылки одного из наших клиентов:
Как мы видим, в темной теме проблемы возникли практически по всему письму:
- на черном фоне неразличимы логотипы черного цвета с прозрачным фоном; логотип с белым фоном остался виден, но теперь режет глаз;
- аналогично слились с фоном черная плашка заголовка и кнопки;
- подписи под иллюстрациями стали нечитаемыми;
- фон футера изменился на белый, и номера телефонов, сверстанные картинкой с прозрачным фоном, на нем пропали.
Сбор и анализ данных
В разных приложениях, на разных устройствах и платформах темная тема обрабатывается по-разному. Чтобы понять, как именно это происходит в разных случаях, мы сделали более 200 тестов.
Результаты исследования мы собрали в таблицу. Она получилась объемная, так что здесь покажем только начало. Кликнув на ссылку под превью, можно открыть таблицу полностью.
Проанализировав все эти данные, мы поняли, как можно решить проблему.
Решение
Наш опыт показал, что едва ли возможно написать общую инструкцию, которая подходила бы для всех устройств, приложений и платформ. Вместо этого мы сформулировали для себя главные принципы, которые позволяют нашим рассылкам адекватно отображаться и в светлой, и в темной темах:
- Использовать специальные метатеги, медиа-запросы и дата-атрибуты для темной темы — это позволяет полностью сохранить цвета в Apple Mail и частично — в Outlook.
- Подбирать изображения, обводки или заливки, держа в голове, как они будут выглядеть в различных темах.
Вот как стало выглядеть письмо из начала статьи после того, как мы применили к нему эти принципы:
Разберем подробно, что мы сделали:
- Изменили фон письма с белого на серый. Теперь при инверсии цветов он становится не таким темным, и все черные элементы на нем сохраняют достаточную контрастность.
- Перенесли логотип на плашку заголовка, сохранив его контрастность.
- Добавили кнопкам светло-серую обводку, в цвет фона письма. Эта обводка, которую видно только при инверсии цветов, позволяет кнопкам оставаться контрастными.
- В футере убрали черную подложку. Номера телефонов перекрасили в серый цвет, который хорошо видно и на светло-сером, и на темно-сером фоне.
Другие кейсы
Следуя тем же принципам, можно адаптировать к темной теме любые письма. Вот еще два примера из нашей практики:
Заключение
Мы в Dau Relationship Marketing считаем, что для развития нужно не только уметь хорошо решать задачи в моменте. Не менее важна способность команды использовать полученный опыт, выстраивать новые рабочие процессы и капитализировать знания.
По итогам этого мини-исследования, мы не только научились создавать email-рассылки, одинаково хорошо работающие в темной и светлой темах. Вот еще два полезных результата, которые мы получили:
- Мы настроили и обкатали процесс регулярного ревью и тестирования всех рассылок наших клиентов. Теперь мы не ждем от них замечаний и пожеланий, а сами проактивно оцениваем макеты на соответствие актуальным техническим требованиям и трендам.
- Наша продакшн-команда научилась систематизировать знания, выделяя ключевые принципы и составляя инструкции.