Как появление темного режима может влиять на ваш e-mail маркетинг?

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

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

В этой статье мы подробнее расскажем вам о том, что такое темный режим, а также выделим его преимущества. Мы рассмотрим основные проблемы, которые могут возникнуть при использовании такого режима в e-mail шаблонах и предложим пути решения.

Что такое темный режим? 

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

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

Лишь в 80-х годах такие компании, как Xerox и CRT Corporation создали текстовые компьютеры с белым экраном и черным текстом, чтобы имитировать внешний вид чернил на бумаге.

Большинство популярных редакторов кода, такие как Visual Studio, Atom, Vim предлагают пользователям темный режим или тему.

В чем преимущества темного режима?

1. Яркий белый свет на экране вызывает у пользователей напряжение глаз, которое может сопровождаться головными болями. Темный режим может предотвратить это, особенно если использовать его в условиях недостаточного освещения. 
2. Темный режим улучшает читаемость, поэтому многие инструменты, такие как Slack, Facebook Messenger и Adobe Suite используют его.
3. Темный режим снижает яркость экрана, что помогает пользователю сэкономить заряд батареи.
4. Некоторые пользователи предпочитают темный режим, потому что он больше соответствует их стилю. 

Влияние темного режима на e-mail шаблоны

Большинство почтовых приложений обычно имеют белый фон и темно-серый / черный текст. Когда темный режим активирован, приложение проверяет наличие экземпляров background и стилей bgcolor в коде электронного письма, а затем меняет их на темно-серый цвет. Цвет шрифта в этом случае меняется на белый. 

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

Ниже мы рассмотрим основные проблемы, которые могут возникнуть в e-mail шаблонах, а также расскажем, как их исправить. 

1. Изображения сливаются с фоном

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

Такие письма будут отлично смотреться на белом фоне, а на темном они потеряются. Темно-серый заполнит белые области, но JPG-изображения с белым фоном останутся прежними.

Пример: В электронном письме West Elm ниже мы видим большой разрыв между логотипом и ссылкой. У баннера же слишком большой отступ, чем у других разделов. 

Пример: В письме Peloton белый текст отзыва под звездочками стал невидимым при темном режиме.

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

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

 2. Трудночитаемый логотип

Около 28% компаний используют в своих логотипах черный цвет. Такой логотип хуже всего выглядит при темном режиме.  

Пример: Логотип компании Medium тяжело разобрать на сером фоне. А логотип Reddit в электронном письме полностью слился с ним.

Решение 1:

Такое часто случается с изображениями PNG на прозрачном фоном, так как они могут принимать цвет любого изображения за ними. 

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

Решение 2:

Также в своих электронных письмах вы можете добавить дополнительный CSS-код, который поможет вам контролировать  отображение писем в темном режиме.

Litmus предлагает несколько строк кода, которые вы можете использовать для своих проектов. Отметим, что эти коды — не прямое решение вашей проблемы. Вы или ваши разработчики можете использовать его для вдохновения. 

Пример CSS:

Тестирование электронной почты

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

Для такого тестирования вы можете отправить тестовые версии своего электронного письма каждому клиенту и проверить их с помощью инструмента тестирования электронной почты — Litmus.

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

^{По мотивам статьи: impactbnd.com}