Темная тема для писем: что это и как оптимизировать рассылки

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

Что такое темная тема?

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

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

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

(Письмо в светлом режиме)

(Письмо в темном режиме)

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

Но когда дело доходит до черного цвета, то темная тема превращает его в белый на Gmail на Android и iOS. А вот темно-серый становится светло-серым и т.д.

Почему темные темы столь популярны?

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

Темная тема приобретает такую популярность из-за следующих убеждений:

• ее рекомендуют офтальмологи

Считается, что светлый текст на темном фоне снижает нагрузку на глаза. Хотя офтальмологи так и не пришли к единому мнению по данному вопросу;

• это сейчас в тренде

Да. Это правда. Многие люди включают темный режим оформления просто потому, что это что-то новое — а значит, надо бы попробовать;

• это просто удобно

Некоторым пользователям удобнее читать текст на темном экране, особенно ночью на улице;

• это экономит заряд аккумулятора

Google подтвердил, что темные темы на Android дают до 50% экономии заряда батареи вашего смартфона. Но это актуально только для экранов OLED.

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

Список почтовиков, которые поддерживают темные темы, и отображение писем в них

Темные темы только начинают набирать популярность. И только последние версии ОС поддерживают их и корректно отображают письма.

• Gmail App на Android (Android 10)

Он полностью инвертирует цвета: в темном режиме отображается не только пользовательский интерфейс, но и все письмо.

Мы протестировали множество разных писем. У одного из них изначально был темный фон и белая полоса с меню.

Android 10 не инвертировал темные цвета в светлые, но заменил мою белую строку на темную.

(Письмо на Android 10, темная тема)

Важно отметить:

Как мы уже говорили, только последняя версия Android (то есть Android 10) отображает письма в темном режиме. Но есть и другие обязательные условия, на которые нужно обратить особое внимание, если вы хотите увидеть письмо в режиме темной темы на Android:

1. Вам нужно загрузить приложение Gmail App из Google Play, а не использовать установленное по умолчанию на ваш смартфон (такое приложение есть на некоторых моделях Samsung).

2. У вас должна быть новейшая версия Gmail App, желательно обновленная не ранее ноября 2019 года.

• Gmail App на iOS (iOS 13)

Что делает Gmail App для iOS?

Мое письмо было изначально темным со светлой строкой меню. iOS инвертировал темные цвета в светлые, а светлые — наоборот в темные.

Важно отметить:

У Gmail запуск темной темы для iOS до сих пор в процессе. Релиз должен завершиться примерно через две недели. Но тот же процесс для Android занял у Google два месяца вместо заявленных двух недель. Так что нужно запастись терпением.

• Native Mail для iOS (встроенное почтовое приложение iPhone)

Оно не инвертирует цвета или делает это частично — как бы мы это не назвали.

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

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

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

• Apple Mail на macOS

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

• Gmail на macOS и Windows

Опять же — цвета не инвертируются или же изменяются частично.

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

• Mail.ru на MacOS and Windows

Mail.ru темные цвета оставляет темными, а светлые — инвертирует в темные.

Выглядело мое тестовое письмо в нем следующим образом:

Стоит отметить, что Mail.ru, равно как и Outlook.com, а также Yandex.ru, позволяет переключаться с темной темы на светлую и наоборот прямо зоне просмотра письма, не заходя в настройки.

Данный переключатель влияет только на вышеуказанную зону просмотра письма, но никак не на весь интерфейс почтовика.

• Yandex.ru app

Yandex, как и Mail.ru, и Gmail на Android 10, инвертирует белый фон на темный, при этом темный не инвертирует на светлый.

Но стоит отметить, что данный почтовик выбрал самый насыщенный и самый темный цвет в качестве фона для темной темы.

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

• Outlook App (2019) на Android 

Говорят, что цвета частично инвертируются. Если честно, я не смогла протестировать Outlook 2019, потому что ни на моем, ни на смартфоне моих коллег его нет.

• Outlook App (2019) на iOS

Предположительно, данное приложение частично инвертирует цвета. Но и на iPhone у меня, к сожалению, тоже нет Outlook App 2019.

• Outlook 2019 на macOS

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

• Outlook.com

Ситуация с Outlook.com очень интересная.

Предполагается частичная инверсия цветов. Однако, когда я отправляю письмо с темным дизайном, Outlook.com переключает цвета на светлые в ночном режиме. А когда отправляю письмо с дизайном, выдержанным в светлых тонах, то Outlook.com меняет цвета на темные.

Если письмо содержит и темный, и светлый фоны, то данный почтовик просто приводит письмо к «единому знаменателю» — темному бэкграунду и светлому шрифту.

Интересные факты о темной теме Outlook.com:

1. Outlook.com никак не меняет дизайн AMP-писем.

Если вы установили белый или светлый фон для АМР-писем, то ваши пользователи увидят именно его даже в режиме темной темы.

2. Outlook.com позволяет просматривать письма в режимах светлой и темной темы без изменения цвета пользовательского интерфейса.

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

3. Outlook не инвертирует цвета рамок.

Советы по оптимизации писем для темной темы

Не пытайтесь взломать темную тему, чтобы ваши письма отображались так же, как в обычных режимах. Люди используют ее — значит, у них есть на то причины. И мы должны уважать их выбор.

Итак, что нам нужно для оптимизации шаблонов для темной темы:

1. Поработайте с изображениями

а) Используйте иконки и логотипы с прозрачным фоном, чтобы избежать подобных эксцессов:

Логотип на белом фоне несколько испортил внешний вид всего письма, вы согласны?

б) Будьте осторожны с прозрачными изображениями

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

Но фото людей будут смотреться лучше при наличии определенного фона.

2. Уделите внимание логотипам

а) Логотип советуем писать не черным цветом, чтобы он хорошо отображался как и в темной, так и в светлой теме.

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

Мы протестировали — предлагаемый элемент код не помог. Он только сделал код всего письма намного тяжелее.

б) Добавляйте к черному логотипу светлую тень

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

3. Настройте фоновые цвета для контейнеров

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

Цвет, который вы задали как «Цвет фона контента», останется точно таким же в режиме темной темы.

Затем выберите прозрачный цвет фона полосы — в этом случае выбранный фоновый цвет будет применен к контенту, но не ко всей области письма.

Обязательно настройте единую цветовую схему для всех полос и строк.

4. Тестируйте письма

Всегда проверяйте ваши HTML-письма как в обычном, так и в темном режиме.

5. Не добавляйте дополнительные элементы кода

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

Кроме того, в большинстве почтовиков шаблоны и так работают достаточно хорошо.

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

Как темная тема влияет на plain-text письма?

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

Но так ли это? Давайте проверим:

1. Gmail для десктопных устройств вообще не инвертирует письма. Мы же помним, что он зону отображения письма оставляет белой. Так что не стоит беспокоиться.

2. Gmail на iOS и Android отображает светлый текст на темном фоне.

3. Outlook также инвертирует цвета текстовых писем в темном режиме.

4. Встроенные приложения iPhone и Apple Mail, как Outlook.com и Gmail на мобильных, преобразуют фоновые цвета личных писем из светлых в темные, а цвета текста — наоборот.

Но в Apple Mail и в почтовике iPhone есть несколько нюансов отображения чистого текста, о которых стоит упомянуть:

• они инвертируют цвета, только если письмо единственное или первое в цепочке. Если в цепочке более 5 писем, то и второе, и все последующие письма, вероятнее всего, будут с белым фоном и темными буквами. В моем ящике, таких вот цепочек больше, чем просто темных;

• даже если личное письмо идем первым в цепочке, но при этом в нем имеется изображение, оно может стать белым в темном режиме. Лого вашей компании, которое вы добавляете в подпись, также считается изображением;

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

В завершение

Действительно, если учесть тот факт, что только некоторые пользователи могут видеть темную тему, возникает вопрос: а стоит ли темный режим всех этих усилий? Ответ: да, стоит! Во-первых, у людей есть причины для его использования. Мы должны уважать их выбор и оптимизировать дизайн писем для темных тем.

Во-вторых, популярность опции растет — и скоро ею воспользуются еще больше подписчиков!