Как мы перестали беспокоиться и полюбили темную тему в email-рассылках

Изображение

Темная тема в последние пару лет стала мощным трендом в дизайне приложений на всех платформах. Быстро выяснилось, что она очень востребована. Например, когда «ВКонтакте» в апреле 2019 года запустила темную тему в своем Android-приложении, в первый же день ее активировали 1,5 млн пользователей. Примерно тогда на сайте 4PDA провели тематический опрос с участием 21,5 тыс. человек, и оказалось, что почти 70% из них пользуются темной темой на своих гаджетах.

В борьбе за лояльность пользователей разработчики добавляют темную тему и в почтовые клиенты. А значит, брендам и бизнесу в своих email-рассылках приходится учитывать «темный» тренд, если они хотят, чтобы их коммуникации хорошо считывались и решали свои задачи.

Мы в агентстве Dau Relationship Marketing обратили на это внимание и провели аудит того, как выглядят рассылки наших клиентов в темной теме. Оказалось, что проблем возникает достаточно много и малой кровью их не решить.

Наша продакшн-команда провела комплексную работу:

  • разобралась, как работает темная тема на разных устройствах и в разных приложениях;

  • рассмотрела различные варианты решения проблем;

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

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

Постановка проблемы

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

Изображение

Как мы видим, в темной теме проблемы возникли практически по всему письму:

  • на черном фоне неразличимы логотипы черного цвета с прозрачным фоном; логотип с белым фоном остался виден, но теперь режет глаз;

  • аналогично слились с фоном черная плашка заголовка и кнопки;

  • подписи под иллюстрациями стали нечитаемыми;

  • фон футера изменился на белый, и номера телефонов, сверстанные картинкой с прозрачным фоном, на нем пропали.

Сбор и анализ данных

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

Результаты исследования мы собрали в таблицу. Она получилась объемная, так что здесь покажем только начало. Кликнув на ссылку под превью, можно открыть таблицу полностью.

Изображение
Открыть таблицу в отдельном окне.

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

Решение

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

  • использовать специальные метатеги, медиа-запросы и дата-атрибуты для темной темы — это позволяет полностью сохранить цвета в Apple Mail и частично — в Outlook;

  • подбирать изображения, обводки или заливки, держа в голове, как они будут выглядеть в различных темах.

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

Изображение

Разберем подробно, что мы сделали:

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

  • перенесли логотип на плашку заголовка, сохранив его контрастность;

  • добавили кнопкам светло-серую обводку, в цвет фона письма. Эта обводка, которую видно только при инверсии цветов, позволяет кнопкам оставаться контрастными;

  • в футере убрали черную подложку. Номера телефонов перекрасили в серый цвет, который хорошо видно и на светло-сером, и на темно-сером фоне.

Другие кейсы

Следуя тем же принципам, можно адаптировать к темной теме любые письма. Вот еще два примера из нашей практики:

Изображение
Изображение

Заключение

Мы в Dau Relationship Marketing считаем, что для развития нужно не только уметь хорошо решать задачи в моменте. Не менее важна способность команды использовать полученный опыт, выстраивать новые рабочие процессы и капитализировать знания.

По итогам этого мини-исследования, мы не только научились создавать email-рассылки, одинаково хорошо работающие в темной и светлой темах. Вот еще два полезных результата, которые мы получили:

  • мы настроили и обкатали процесс регулярного ревью и тестирования всех рассылок наших клиентов. Теперь мы не ждем от них замечаний и пожеланий, а сами проактивно оцениваем макеты на соответствие актуальным техническим требованиям и трендам;

  • Наша продакшн-команда научилась систематизировать знания, выделяя ключевые принципы и составляя инструкции.