How to Utilize Dark Mode_Stripo
20 февраля 2023

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

Создавайте электронные письма в темном режиме
Оглавление
  1. Что такое темный режим?
  2. Почему темный режим так популярен?
  3. Список почтовых клиентов, поддерживающих темный режим, и как отображаются письма в них
  4. Советы по оптимизации писем для темного режима
  5. Как темный режим влияет на обычные письма?
  6. В завершение
1.
Что такое темный режим?

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

Темный режим _ Stripo

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

Темный режим отображает светлые тексты, иконки и элементы пользовательского интерфейса на темном фоне.

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

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

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

Цвета в светлом режиме

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

Цвета в темном режиме

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

Однако темный режим меняет цвет на белый в Gmail на iOS и Android, когда речь идет о черном фоне. Темно-серый цвет переходит в светло-серый и т. д.

Почему темный режим так популярен?

Темный режим для писем становится все более популярным по нескольким причинам:

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

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

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

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

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

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

  • он экономит заряд батареи

Google подтвердил, что темный режим в Android экономит время автономной работы до 50%, поскольку снижает яркость экрана. Однако это актуально только для OLED-экранов;

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

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

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

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

  • Приложение Gmail на Android (Android 13)

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

Мы протестировали самые разные письма. Одно из них изначально имело темный фон и белую строку/полосу с меню.

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

Темный режим в приложении Gmail _ Android

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

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

Как мы уже говорили, только последняя версия Android — Android 10 — отображает письма в темном режиме. Но есть и другие обязательные условия, на которые следует обратить особое внимание, если вы хотите видеть письма в темном режиме Android. Они заключаются в следующем:

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

Темный режим для писем _ Проверка версии приложения Gmail

  • Приложение Gmail на iOS (iOS 13)

Что делает приложение Gmail на iOS?

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

Приложение Gmail на iOS _ Письмо с темной темой

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

Gmail все еще внедряет темный режим для писем на iOS. Предполагается, что он станет полностью видимым и доступным для всех пользователей примерно через 2 недели. Однако аналогичный процесс для Android занял у Google не две недели, а около двух месяцев. Нам просто нужно набраться терпения.

  • Родное почтовое приложение для iPhone (родной почтовик на iOS)

Начиная с iOS 13 компания Apple добавила поддержку темного режима в свое родное почтовое приложение Apple. Этот почтовый клиент позволяет включить темный режим для пользовательского интерфейса и области писем. Если вы установили прозрачный цвет фона, то почтовик для iPhone изменит его на более темный.

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

Письма в темном режиме _ Родная электронная почта на iOS

  • Apple Mail на macOS

У нас та же ситуация. Apple Mail позволяет включить темный режим для пользовательского интерфейса, но это не влияет на поддерживаемые цветовые схемы ваших HTML-писем в темном режиме. Кроме того, Apple Mail на macOS позволяет добавлять пользовательский код для настройки темного режима на свой вкус с помощью CSS. Сюда входят мета-теги HTML, целевые CSS и обновленные свойства, которые позволяют разработчикам писем изменять цвета шрифтов, визуальных элементов, фоновых изображений и так далее.

HTML-письмо в темном режиме _ Apple Mail _ Тест

  • Gmail на macOS и Windows

Этот один из популярных почтовых клиентов на ОС для десктопов не инвертирует цвета или делает это частично в темном режиме — называйте это как хотите.

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

Письма для темного режима _ Gmail на macOS

  • Приложение Outlook на Android

Считается, что он частично инвертирует цвета. Однако, когда я тестировала темный режим на своем устройстве Android, никаких инвертированных цветов замечено не было. Если вы столкнулись с такой проблемой или если ваше письмо в темном режиме несовместимо с Outlook на Android, просто добавьте префикс data-ogsc к дубликатам стилей темного режима. В результате у вас должно получиться что-то вроде этого:

[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
  • Приложение Outlook на iOS

Предполагается, что этот почтовый клиент частично инвертирует цвета в темном режиме. Но у меня также нет приложения Outlook на iPhone

  • Outlook 2019 на macOS

При включении темного режима в этом почтовом клиенте отображается реверсивная цветовая схема. Он поступает так же, как Android 10 — оставляет темную цветовую схему такой, какая она есть, и превращает светлый фон в темный.

Темный режим для Outlook _ Тест писем

  • Outlook.com

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

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

Тестирование темного режима в Outlook

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

1. Outlook.com вообще не влияет на дизайн AMP-писем.

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

AMP-письма в темном режиме _ Outlook

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

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

Настройка темного режиму в Outlook

3. Outlook не инвертирует цвета границ.

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

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

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

1. Работать над изображениями

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

Темный режим

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

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

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

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

Использование фото с фоном для темного режима

2. Работайте над логотипами

a) В ваших логотипах не должно быть фона

Неудачный пример логотипа в темном режиме

б) Сделайте ваши логотипы не черными, чтобы они хорошо отображались как в темных, так и в светлых темах

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

Мы протестировали — код не помог. Но значительно утяжелил код нашего письма.

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

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

Логотип с тенью

3. Добавьте стили темного режима для @media с помощью медиа-запроса

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

@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}
}

Этот медиа-запрос поможет настроить ваши рассылки в темном режиме для большей совместимости с почтовыми клиентами, такими как Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) и Outlook App (iOS). Просто добавьте запрос (prefers-color-scheme: dark) в раздел <style></style> вашего письма, чтобы создать пользовательские стили темного режима.

4. Установите фоновые цвета для контейнеров письма

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

Цветовая схема, которую вы установили в качестве «Фонового цвета содержимого», останется неизменной в темном режиме в письме.

Фоновый цвет контента письма _ Настройка цветов с помощью Stripo

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

Фоновый цвет для контента письма

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

4. Протестируйте свои письма

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

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

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

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

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

Как темный режим влияет на обычные письма?

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

Текстовые письма в темном режиме

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

1. Gmail на десктопе не инвертирует наши письма. Следовательно, нам не стоит беспокоиться по этому поводу.

2. Gmail на iOS и Android отображает светлую типографику на темном фоне.

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

Текстовые письма в темном режиме в Outlook

4. Родные приложения iPhone и Apple Mail инвертируют цвета фона от светлого к темному и цвета текста от темного к светлому, когда речь идет о персональных письмах в темном режиме.

Однако есть некоторые моменты, связанные с сообщениями в виде обычного текста в Apple Mail и в почтовике iPhone, о которых стоит упомянуть:

  • они инвертируют цвета, только если это единственное или первое письмо в цепочке. Иногда второе и все последующие письма будут иметь белый фон и темную типографику;

Письма с обычным текстом в Apple Mail

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

В завершение

Конечно, учитывая, что только небольшая часть пользователей способна видеть темный режим, у нас может возникнуть соблазн спросить себя — действительно ли опыт использования темного режима стоит затраченных усилий? Стоит! Прежде всего, люди используют его не просто так. Мы должны уважать это и оптимизировать дизайн своих писем для пользовательских стилей темного режима.

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

Используйте шаблоны писем для использования темного режима в популярных почтовых клиентах
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
3 комментариев
Eymeric Hénin (Yeemirc) 5 месяцев назад
Bonjour et merci pour cet article. J'ai cru voir passer un comfortable au lieu de confortable. J'utilise Outlook dans le cadre professionnel. Et depuis peu, la version web, permettant le mode sombre. Savez-vous si ce mode est disponible sur l'application bureautique svp ? Merci !
Анна Кузнецова 3 месяца назад
Hello, Eymeric Hénin. Microsoft says that Outlook for Microsoft 365 has a dark mode, so if you're using this version of Outlook, you can switch to it in your account. Here's the manual. https://support.microsoft.com/en-au/office/dark-mode-in-outlook-3e2446e0-9a7b-4189-9af9-57fb94d02ae3 Kind regards.
Ellis Edwards 3 года назад
Is there any way to disable dark mode on stripo emails? I have added white as background color of content in all my sections and it still switches to black on dark mode
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.