Как адаптировать email-рассылку под темный режим

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

Нюансы работы почты с ночным режимом

Ночной режим поддерживают мобильные версии популярных почтовых клиентов — Gmail и Outlook. И хотя многие браузерные варианты почтовиков пока полноценно не поддерживают его, работать над адаптацией своих рассылок однозначно стоит. Ведь 41,9% емейлов люди читают в мобильных приложениях (в браузерах 39,9%, а в десктопных программах — 18,2%).

Почтовые сервисы по-разному обрабатывают цвета. Например, Gmail для Android-устройств инвертирует все цвета в автоматическом режиме. Аналогично поступает десктопная версия Outlook для Windows. Эти же почтовики на macOS и iOS не трогают темные цвета, а заменяют только светлые. А веб-версия Gmail даже с активированным темным режимом не вносит изменений в дизайн письма — то есть, если вы сверстали его на белом фоне, то почтовик не сменит его на черный. 

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

Как создать email в темном режиме

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

Уделите внимание изображениям

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

• логотип и слоган;
• иконки соцсетей;
• карточки товаров;
• фото автора рассылки.

Особенно важно следовать этому совету в случае с иконками и логотипами. Если не сменить фон на прозрачный, а у пользователя активирован ночной режим, дизайн письма пострадает. Обратите внимание, как в примере ниже выделяется логотип компании. Кроме того, если вы используете фото своего представителя, не забудьте доработать и его, чтобы избежать такой проблемы.

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

Что делать с черным логотипом?

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

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

Подберите универсальный фон

Вы можете создать цветной фон для сообщения, который не изменится в светлом и ночном режимах и будет красиво смотреться в них обоих. Чтобы сделать это в системе eSputnik, при создании нового сообщения выберите понравившийся вам шаблон (или создайте его с нуля) и нажмите в меню на вкладку “Оформление” (расположена слева). В разделе “Общие настройки” найдите “Цвет фона письма” и выберите тот, который вам подходит. 

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

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

Выбранная фоновая картинка не изменится при светлой теме интерфейса почтовика и при включенном Dark Mode.

Варианты отображения Plain text

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

В веб-версии Gmail темный дизайн письма пока полноценно не отображается. Пользователь в любом случае увидит стандартный вариант сообщения “черное на белом”. 

Аналогично это работает в веб-версии Yahoo. 

В мобильной версияи Gmail текст сообщения показан светлым на темном фоне. Так же текст письма отображается в десктопной программе Outlook.

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

Примеры email в темном режиме

Вы можете вдохновиться идеями и оценить, насколько хорошо выглядит верстка email-рассылок в темном режиме в разделе “Примеры рассылок” блога eSputnik. Много таких вариантов вы увидите в подразделе “Черная пятница”. С помощью фильтра откройте “Типы писем” → “Проморассылка” → “Черная пятница”.

Кроме того, похожие по цветовому решению дизайны вы увидите, если откроете “Типы писем” → “Поздравительные” → “Хэллоуин”.

Другие примеры email рассылки в темном режиме можно посмотреть на сайте Stripo. Откройте на нем вкладку “Шаблоны”. Дизайны, подходящие для ночного режима, можно подобрать с помощью фильтра “Сезоны”. Например, выберите все те же “Хэллоуин” и “Черная пятница”.

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

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