Письма с тёмным дизайном хороши не только в Чёрную пятницу. По данным Litmus, 35% получателей открывают письма в тёмной теме. А исследование Hi-Tech Mail.ru показало, что ночную тему предпочитают 34% российских пользователей, в то время как светлую устанавливают только 32%.
Поэтому так важно сделать, чтобы email-рассылки в тёмной теме открывались корректно. Рассказываем, чем так хорош dark mode и как оптимизировать электронные рассылки для тёмной темы.
Зачем нужна тёмная тема в email-рассылке
Тёмная тема — это режим, при котором цветовая схема меняется: если в стандартном режиме мы видим тёмный текст на белом фоне, то в dark mode наоборот — светлый шрифт на тёмном фоне.
Пользователи включают тёмную тему в самом интерфейсе устройства или выборочно — в браузере, в приложении и в том числе в почтовом клиенте. Но, так или иначе, они выбирают её по одним причинам:
- Удобно читать. Тёмная тема снижает нагрузку на зрение, особенно при слабом освещении и вечером.
- Экономится заряд батареи. Это работает, если при включении тёмной темы не повышать яркость экрана.
- Выглядит стильно. Так, 8% пользователей используют ночную тему просто потому, что любят чёрный цвет.
Поэтому, когда компания оптимизирует электронные письма под тёмную тему, она показывает, что учитывает предпочтения всех своих клиентов, а не только тех, у кого стоит тема по умолчанию в почтовом клиенте. А это вклад в лояльность и, как следствие, — более высокие конверсии.
И наоборот: когда бренд не уделяет тёмной теме в email должного внимания, письма выглядят неаккуратно. Допустим, у подписчика стоит тёмная тема в почтовом клиенте. И если компания делает дизайн рассылок только под стандартную светлую тему, в письме может быть сложно разобраться. Например, подписчик увидит тёмный текст на тёмном фоне. Это вызывает не самые лучшие ассоциации с компанией, доверие к ней падает.
Поэтому так важно оптимизировать письма — чтобы и в светлой, и в тёмной теме они открывались хорошо.
В чём особенность тёмной темы
Тёмная тема в email-рассылке работает так:
- Пользователь устанавливает её в своём почтовом клиенте.
- После этого цветовая схема писем меняется: текст становится светлее, фон темнее, а картинки остаются прежними.
Но не везде это происходит одинаково. Есть три варианта, как почтовые клиенты отображают письмо в тёмной теме:
- Не меняют цвета. Электронное письмо остаётся таким же, как при светлой теме. Например, так происходит в Яндекс Почте.
- Частично инвертируют цвета. У светлых писем фон меняется на тёмный, а изначально тёмные письма остаются прежними. Например, Mail.ru в мобильной и веб-версиях.
- Полностью инвертируют цвета. Светлые письма становятся тёмными, а тёмные — светлыми. Например, Gmail на iOS.
Главная проблема в том, что у почтовиков нет единого алгоритма конвертации под тёмную тему. Письмо везде будет выглядеть немного по-разному. Можно было бы решить эту проблему с помощью медиазапросов, но нюанс в том, что большинство почтовиков их не поддерживает
Но это не всё. Дело ещё в том, что компания не может узнать, каким почтовым клиентом пользуется подписчик и установлена ли у него тёмная тема. При этом самих подписчиков сотни и тысячи.
В итоге из-за разного отображения тёмной темы в почтовых клиентах сделать идеальное электронное письмо с тёмной темой невозможно. Но всё же минимально адаптировать рассылку к dark mode реально.
Как сделать тёмную тему в рассылке
Чтобы письмо корректно открывалось и в тёмном, и в светлом режиме, его дизайн должен быть универсальным. И вот что поможет сделать его таким.
Оптимизируйте логотип и иконки
Лучше всего использовать логотип и иконки в формате PNG. Благодаря прозрачному фону они будут одинаково хорошо смотреться в обеих темах.
Всё сложнее, когда логотип не яркого цвета. В этом случае можно добавить к логотипу светлую тень или белый контур. Эти ходы будут незаметны в светлой теме, зато выручат в тёмной. Всё это касается также иконок и других миниатюрных графических элементов.
Поработайте над изображениями
Сюда относятся фото, баннеры, карточки товаров. Они более сложносочинённые, чем логотипы или иконки, поэтому действовать нужно деликатнее. Только прозрачного фона, скорее всего, будет недостаточно.
Неплохой вариант — использовать фото в приглушённых цветах или монохромные. Благодаря такой цветовой схеме они будут органично смотреться и в тёмной, и в светлой теме.
Если товары яркие сами по себе или просто не хочется глушить оттенки, можно добавить цветную подложку. В идеале — с градиентом, который подойдёт к обеим темам.
Другой вариант — размещать товары на белом фоне, но добавлять к ним тени. Так делает Ushatava. И даже светлая футболка хорошо видна на белом фоне за счёт тени.
Используйте акценты
Типичное письмо в тёмной теме выглядит как светло-серый текст на чёрном фоне, несколько картинок и призыв к действию. Иногда в таком письме читателю сложно сориентироваться. Чтобы упростить процесс, расставьте акценты. Есть два варианта:
- Контрастно выделить главные фразы. Хорошие цвета для тёмной темы — красный, синий, зелёный и их оттенки.
- Добавить эмодзи. Их тоже можно поставить рядом с важной информацией или структурировать с помощью них текст.
Сделайте кнопки контрастными
Если фирменный цвет вашего бренда хорошо смотрится в обеих темах — это здорово. Смело используйте его для кнопок призыва к действию.
Но если фирменный цвет не такой контрастный, можно сделать у кнопки обводку или светлую тень. Или изначально выбрать яркий оттенок, а фирменный цвет сохранить в логотипе и заголовках. Призыв к действию — главный элемент в письме, поэтому важно, чтобы кнопку было хорошо видно.
Протестируйте рассылку в тёмной теме
Главное правило, которое поможет ещё до отправки заметить недочёты и исправить их — протестировать рассылку. Проверьте, как письмо отображается в тёмной и светлой темах на разных устройствах.
Также можно отправить тестовую версию письма на адреса разных почтовых клиентов. Хотя бы на самые популярные — Gmail, Яндекс Почту и Mail.ru.
Чтобы каждый раз не создавать письмо для тёмной темы с нуля, сделайте единый мастер-шаблон. Добавьте в него все нужные элементы: логотип, иконки, место под текст. Потом просто берите шаблон и адаптируйте к новым задачам.
Например, внутри Sendsay тоже есть такие готовые шаблоны. Вот коротко о том, как ими пользоваться:
- В личном кабинете выберите способ создания письма: «Открыть галерею». В ней хранятся шаблоны.
- Выберите подходящий шаблон в зависимости от вида письма.
.png)
- Наполните шаблон своим контентом.
5 примеров хорошего дизайна тёмной темы
Собрали несколько писем, которые гармонично смотрятся в тёмной теме.
Бренд аудиотехники Bose
Компания делится отзывами о товарах и добавляет фото в письмо. Несмотря на то, что товары чёрного цвета, ещё и на тёмном фоне, их можно рассмотреть в деталях. Всё это благодаря хорошей светотени и обводке. А главные элементы в письме — логотип, кнопку призыва к действию, специальное предложение — компания помещает на белую подложку, и это сразу привлекает внимание.
Производитель посуды Great Jones
Бренд использует только два цвета — белый и чёрный. Но за счёт подложки, где эти цвета сочетаются, письмо выглядит ярко, его хочется рассматривать.
Поставщик стоковых изображений Rawpixel
Письмо в тёмной теме необязательно должно быть мрачным. К тому же есть компании, у которых фирменные цвета сами по себе яркие, неоновые. И если это ваш случай, попробуйте добавлять к блокам письма цветную подложку, как это делает Rawpixel.
Каждая подложка соответствует изображениям на ней: для минималистичных фото и паттернов Rawpixel выбирает белый цвет, для ярких — салатовый. И хотя письмо в тёмной теме, разноцветные подложки задают нужное настроение и отражают философию бренда.
Бренд велосипедов VanMoof
Письмо от VanMoof выглядит стильно и дорого. Велосипед как будто поставили под свет софитов, чтобы им можно было любоваться. А благодаря окружающего чёрному пространству создаётся эффект погружения — будто читатель и правда находится в одном помещении с велосипедом.
Производитель аксессуаров Bellroy
Кроме чёрного и белого цветов компания использует в письме свой фирменный — тёплый бежевый. И в этом есть сразу два преимущества: Bellroy расставляет акценты и закрепляет ассоциации со своим брендом.
Тёмная тема в email-рассылках пока вызывает вопросы у email-маркетологов. Нет единого алгоритма, по которому почтовые клиенты открывают письма. Из-за этого одна и та же рассылка, свёрстанная для тёмной темы, у каждого получателя будет выглядеть по-разному. Но всё же адаптировать электронное письмо для тёмной темы реально, если соблюдать несколько несложных правил. И главное — проверять отображение письма в обеих темах перед отправкой.
