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