24.05.2022, 15:00
ADPASS рекомендует материал к прочтению
Материал блога компании: Dau Relationship Marketing

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

Темная тема в последние пару лет стала мощным трендом в дизайне приложений на всех платформах. Быстро выяснилось, что она очень востребована

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решение

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

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

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

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

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

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

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

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

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

Другие кейсы

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

Заключение

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

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

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

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

Поделиться
Мы в соцсетях
Еженедельные рассылки ADPASS

Читайте также:

Маркетинг Геймификация

Как обыграть потребителя

Советы маркетологам по геймификации продвижения
Маркетинг Архитектура Дизайн Apple

Apple оросила Стамбул

Архитектурное бюро Нормана Фостера представило новый флагманский магазин Apple в центре Стамбула. Этот оазис с инновационной системой сбора и рециркуляции воды окупится не скоро, но крупнейшую корпорацию планеты это не тревожит. ADPASS подготовил галерею главных «яблочных» магазинов мира.