Как избежать ошибок OZON, Эльдорадо и Shutterstock в адаптации рассылок под тёмную тему
Идеальных рассылок не бывает. Но всегда хочется сделать так, чтобы было как минимум не стыдно, а как максимум — принесло результат.
Главные составляющие эффективных емейлов:
- грамотный текст, который можно дочитать до конца без отторжения или ментальной боли;
- органичный дизайн, который не отвлекает на себя внимание, но акцентирует его на ключевых моментах;
- аккуратная вёрстка, которая даёт подписчику изучить информацию в полном объёме, без отвлекающих и раздражающих факторов.
Когда что-то из перечисленного не соблюдается, пользователь получает негативный опыт. Хорошо ли это для бизнеса? Пожалуй, не очень.
И если с первым пунктом из списка критериев большинство крупных брендов справляются прекрасно, на этапе дизайна и вёрстки возникают проблемы. Часть из них связана с отсутствием адаптации под тёмную тему.
Тёмная тема — это режим интерфейса, который у 45% пользователей айфонов включён постоянно или работает в ночное время. Его можно настроить и на других устройствах у некоторых почтовиков.
Покажу на примерах, что может пойти не так, и расскажу, как это предотвратить.
OZON: ошибки в вёрстке
В письмах от крупнейшего интернет-магазина теряется текст, если открыть их в почтовом клиенте iOS или масOS.
Здесь прописано объявление поддержки тёмной темы через :root, но в медиазапросах описаны несуществующие элементы. Чтобы решить проблему, нужно прописать медиазапросы для стилизации существующих элементов письма.
Shutterstock: непрозрачный фон
Емейлы от знаменитого контент-стока просто обязаны быть красивыми! Так и есть, но только не для пользователей тёмной темы. В ней почтовики по регламенту инвертировали цвета: поменяли фон со светло-розового на бордовый, а текст — на белый.
Решение: поменять фон иллюстрации в теле письма на прозрачный, то есть убрать розовую подложку под растительными элементами. А у лого не только убрать подложку, но и добавить светлую обводку, которая не будет видна в светлой теме, но спасёт ситуацию в тёмной. Делать всё это необходимо на этапе дизайна.
Эльдорадо: прозрачный фон
Последнее время магазин техники радует подписчиков креативными контентными письмами. Вот только в почтовиках, в которых включена тёмная тема, текстовая часть действительно стильного контента пропадает — вместе со смыслом.
Дело в том, что пропавший текст тут — часть изображений. Поэтому его цвет не инвертировался, а прозрачный фон сыграл не на руку бренду.
В качестве решения можно предложить добавить под изображения с текстом ещё одну картинку — сплошной серый фон. Ещё можно изменить вёрстку таким образом, чтобы контентная часть письма не состояла только из баннеров. Или на этих баннерах добавить к буквам подложку, обводку (как у изображений женщин), тени в стиле набирающего популярность неоморфизма.
Ошибки случаются даже у крупных брендов — но исправить их довольно просто. Решения этих и других проблем с адаптацией рассылок под тёмную тему смотрите в нашей инфографике. Создали её, набив шишек на собственном опыте и изучив исследования зарубежных коллег.
Очень верные замечания, спасибо за идею обратить на этот нюанс внимание!
Спасибо! Эффективных и красивых рассылок вам 🙌
Чтобы хоть немного оправдать название статьи – оставьте одно предложение со ссылкой на самих себя, убрав лишнее
Виталий, здравствуйте! Мне показалось логичным немного погрузить читателя в то, зачем мы эту инфографику сделали. На тот случай, если он не в курсе всех этих тёмных тем и рассылочной кухни в принципе. Скачали инфографику? Как вам?