Несмотря на некоторые рекомендации по добавлению специальных элементов кода в ваши шаблоны темных тем, которые, как говорят, включают темный режим для ваших писем, эти примеры кода пока не решают никаких проблем. По крайней мере, это то, что показывают многочисленные тесты стилей только для темного режима.
Кроме того, шаблоны электронных писем отлично работают в большинстве почтовых клиентов.
Таким образом, оптимизировать дизайн полностью темного режима не требует больших усилий — вам нужно только поработать над внешним видом электронной почты, чтобы добиться выдающихся версий ваших писем в темном режиме. Пока нет необходимости работать с кодами.
Как темный режим влияет на текстовые письма?
Сообщается, что личные письма в список контактов уровня c темном режиме всегда отображаются правильно во всех почтовых клиентах, поддерживающих эту новую функцию.
Но так ли это? Давайте проверим:
1. Gmail на десктопе вообще не инвертирует наши письма. Поэтому нам не стоит об этом беспокоиться.
2. Gmail на iOS и Android отображает светлую типографику на темном фоне.
3. Outlook также инвертирует цвета текстовых сообщений в темном режиме.
4. Собственные приложения iPhone и Apple Mail инвертируют цвета фона со светлых на темные, а цвета текста с темных на светлые, когда речь идет о личных письмах в темном режиме.
Однако есть некоторые особенности текстовых сообщений в Apple Mail и почте iPhone, о которых стоит упомянуть:
- он инвертирует цвета только если это единственное или первое письмо в цепочке. Иногда второе и все последующие письма будут иметь белый фон и темную типографику;
- даже если это первое письмо в цепочке, но оно содержит изображение, ваше личное письмо в темном режиме может стать белым. Логотип вашей компании, который включен в вашу подпись в письме , также считается изображением;
- Личные письма, которые были пересланы вам, также могут иметь белый фон.
Заключительные мысли
Конечно, учитывая, что только небо технический аудит seo более надежен льшая часть пользователей может видеть темный режим, мы можем поддаться искушению спросить себя — действительно ли опыт темного режима стоит затраченных на него усилий? Да! Прежде всего, люди используют его по какой-то причине. Мы должны уважать это и оптимизировать дизайн наших писем для пользовательских стилей темного режима.
Во-вторых, популярность этой функции растет, и совсем скоро все больше наших подписчиков включат этот режим, поэтому вы должны быть готовы внедрить темный режим в свою рассылку.
2. Работа над логотипами
а) Пусть ваши логотипы не будут иметь фона.
б) Пусть ваши логотипы будут написаны не черным цветом, чтобы они хорошо отображались как в темных, так и в светлых темах.
Некоторые кодеры предлагают использовать два логотипа и даже приводят пример кода, который гарантирует, что черный Лидер по продаже бизнеса логотип будет отображаться в светлой теме, а белый — в темной.
Мы протестировали — код не помог. Но сделал наш email-код намного тяжелее.
в) Применить светлый фон (или белый контур) и тени к логотипу, специфичному для темного режима
Если ваш логотип должен быть написан черным цветом, добавьте к нему легкую тень. Это будет выглядеть красиво и будет соответствовать цветовой гамме вашего бренда.
3. Добавьте стили темного режима для @media через медиа-запрос
Чтобы ваше письмо отображалось правильно в темном режиме, вам следует добавить специальный медиа-запрос к каждому элементу медиа письма. У вас должно получиться что-то вроде этого:от медиа-запрос поможет настроить ваши списки рассылки темных модов для лучшей совместимости с почтовыми клиентами, такими как Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) и Outlook App (iOS). Просто добавьте запрос (prefers-color-scheme: dark) в раздел <style></style> вашего письма, чтобы создать пользовательские стили темного режима.
4. Установите цвета фона для контейнеров электронной почты
Если вы не хотите, чтобы содержимое вашего электронного письма имело темный фон, вы можете установить индивидуальный светлый цвет фона или индивидуальный темный режим с помощью Stripo.
Цветовая схема, которую вы установили в качестве «Цвета фона контента», останется прежней в темном режиме электронной почты.
Затем установите для полосы «прозрачную» цветовую схему — в этом случае выбранный цвет фона будет применен к содержимому письма, но не ко всей области письма.
Обязательно установите одинаковую цветовую схему для всех полос/строк.
Всегда проверяйте свои HTML-письма как в обычном светлом, так и в темном режиме.