Как избежать ошибок OZON, Эльдорадо и Shutterstock в адаптации рассылок под тёмную тему​

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

Главные составляющие эффективных емейлов:

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

Когда что-то из перечисленного не соблюдается, пользователь получает негативный опыт. Хорошо ли это для бизнеса? Пожалуй, не очень.

И если с первым пунктом из списка критериев большинство крупных брендов справляются прекрасно, на этапе дизайна и вёрстки возникают проблемы. Часть из них связана с отсутствием адаптации под тёмную тему.

Покажу на примерах, что может пойти не так, и расскажу, как это предотвратить.

В письмах от крупнейшего интернет-магазина теряется текст, если открыть их в почтовом клиенте iOS или масOS.

Здесь прописано объявление поддержки тёмной темы через :root, но в медиазапросах описаны несуществующие элементы. Чтобы решить проблему, нужно прописать медиазапросы для стилизации существующих элементов письма.

Емейлы от знаменитого контент-стока просто обязаны быть красивыми! Так и есть, но только не для пользователей тёмной темы. В ней почтовики по регламенту инвертировали цвета: поменяли фон со светло-розового на бордовый, а текст — на белый.

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

Последнее время магазин техники радует подписчиков креативными контентными письмами. Вот только в почтовиках, в которых включена тёмная тема, текстовая часть действительно стильного контента пропадает — вместе со смыслом.

Дело в том, что пропавший текст тут — часть изображений. Поэтому его цвет не инвертировался, а прозрачный фон сыграл не на руку бренду.

В качестве решения можно предложить добавить под изображения с текстом ещё одну картинку — сплошной серый фон. Ещё можно изменить вёрстку таким образом, чтобы контентная часть письма не состояла только из баннеров. Или на этих баннерах добавить к буквам подложку, обводку (как у изображений женщин), тени в стиле набирающего популярность неоморфизма.

Ошибки случаются даже у крупных брендов — но исправить их довольно просто. Решения этих и других проблем с адаптацией рассылок под тёмную тему смотрите в нашей инфографике. Создали её, набив шишек на собственном опыте и изучив исследования зарубежных коллег.