Переход на темную сторону: делаем ночную тему для email-рассылок

Почему люди выбирают темную тему

Причин много. Главный аргумент в ее пользу — удобство в работе со смартфоном или компьютером ночью. Типичная страница в темной теме в пять раз менее яркая, чем в светлой, благодаря чему глаза устают меньше. По этой же причине расход батареи смартфона сокращается до 50% (по крайней мере у Android). Другие преимущества темной темы:

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

По статистике, главными ценителями темной темы остаются веб-разработчики и другие специалисты из IT-сферы. Обычные пользователи тоже выбирают ее, потому что она красивая и минималистичная.

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

Как мы делали письмо в темной теме без кода

К нам обратился Фонд «Обнаженные сердца» с задачей — сделать редизайн email-рассылок. Когда мы согласовывали шаблон и показывали, как письма отображаются в Litmus, обратили внимание, что в темной теме они выглядят плохо. Решили адаптировать шаблон.

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

Письмо состоит не только из текста на светлом фоне. В нем использованы цветовые блоки, соответствующие фирменному стилю фонда. Потому и возникли проблемы с отображением сообщения в темной теме. Цвета инвертировались, и темно-красный становился светло-красным, а темно-синий — светло-синим.

Так как фонд планирует вести рассылки самостоятельно, нашей задачей было сделать универсальный и простой шаблон, который сотрудники смогут менять под себя. Мы изучили опыт Litmus и коллег из Email Soldiers и начали действовать.

Шаг 1. Фоновая заливка

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

При реализации что-то пошло не так. Вот какие проблемы у нас возникли:

1. Белое письмо в темной теме ослепляет и отталкивает.
2. Нужно долго все тестировать. Мы столкнулись с тем, что Outlook 2007, 2010, 2013 и 2016 не отображает фоновых картинок — приходилось дублировать их заливкой цветом и тестировать снова.
3. Текст на белом фоне, залитом картинкой, было плохо видно. Но эту проблему удалось решить — просто сделали текст серым.
   
   

Шаг 2. Замена цветов 

Некоторые почтовики (Outlook и Apple Mail) не поддерживают инверсию цветов. Например, в одном из писем блок с книгами получил нежно-розовый бэкграунд, хотя в макете он белый. Также на черном фоне (который на самом деле белый) не читались синие заголовки. Синие блоки тоже не инвертировались.

В темной теме синие заголовки не было видно, поэтому мы использовали красный цвет, который тоже есть в палитре бренда.

Шаг 3. Косяки с почтовыми клиентами

Мы проверяли отображение писем с помощью Litmus. Он показал, что в iPhone 8 часть сообщений не отображалась. Первое, что мы сделали, — отправили письмо на iPhone. Оказалось, что в телефоне все отображается и баг не в верстке, а в Litmus.

Изначально в нашем макете были тени в блоках, выделявшие их на общем фоне. Но так как мы верстали шаблон не картинкой, а HTML + текстом, пришлось убрать тени, потому что большинство почтовиков их не поддерживает.

В Outlook не работала инверсия цветов, блоки в двух колонках съезжали. В итоге мы смогли отредактировать блоки только с помощью техподдержки, а исправить отображение цветов во всех версиях Outlook так и не удалось.

После множества тестов мы смогли сделать рассылки, которые хорошо отображаются как в светлой, так и в темной теме. Синие блоки залили не цветом, а картинками. Заголовки вместо синего залили красным (но все равно в некоторых версиях Outlook это не сработало).

Вот как теперь письмо выглядит в светлой и темной темах:

Альтернативные варианты

Для тех, у кого есть ресурсы, время и желание.

2. Сверстать письмо только картинками.  Если у вас есть штатный дизайнер или маркетолог, готовый работать в графическом редакторе и создавать рассылки из картинок. Такие письма всегда будут выглядеть хорошо.
   
   Важно! Есть шанс впасть в немилость почтовых провайдеров Mail, Gmail, Yandex — спам-фильтры настороженно относятся к письмам, сверстанным только картинками, и могут понизить репутацию домена. Но если вы готовы тщательно следить за показателями доставляемости, попробовать можно. Хоть мы и не рекомендуем ?
3. Создать мастер-шаблон с оглядкой на темную тему.  Который включает темный шрифт на светлом фоне. Если у вас темный логотип, добавьте светлую размытую обводку. Используйте картинки в формате .png без фона. Это все, что нужно, чтобы email-рассылка всегда смотрелась как надо.
   
   

Что в итоге

С одной стороны, темная тема — головная боль для email-маркетологов и дизайнеров. Если фирменный стиль компании изначально светлый, она способна притормозить творческий полет и отнять десятки часов на тесты. Ведь чем проще письмо, тем выше вероятность, что оно хорошо отобразится во всех устройствах, браузерах, приложениях и клиентах. Но с другой стороны, это возможность покреативить с гифками, AMP, расположением блоков и научиться создавать восхитительные рассылки.

Фото на обложке: Shuttertsock/donatas1205

Изображения в тексте предоставлены автором