Темний режим був запущений лише кілька років тому, і прийняття продовжує зростати. Темний режим тепер доступний для macOS, iOS та Android, а також для безлічі програм, включаючи Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail та Reddit. Однак не завжди існує повна підтримка кожного.
Темний режим зменшує використання енергії екрану та збільшує фокус. Деякі користувачі також заявляють, що відчувають зменшення напруги очей, але це був допитаний.
Нещодавно ми розробили шаблон Marketing Cloud, який включив темний режим у свій код, що дійсно робить розділи електронної пошти різко контрастними при перегляді в поштовому клієнті. Це зусилля, яке може сприяти додатковій зацікавленості та рейтингу кліків для ваших передплатників.
Нерідко спостерігається прогрес у технології електронної пошти, тому приємно бачити, як цей досвід застосовується у всій галузі. Розуміння найкращих практик, коду для реалізації, а також підтримка клієнтів є критичним для успіху вашої реалізації в темному режимі. З цієї причини команда Uplers опублікувала цей посібник підтримка електронної пошти в темному режимі -.
Код електронної пошти в темному режимі
Крок 1: Включіть метадані, щоб увімкнути темний режим у поштових клієнтах - Першим кроком є увімкнення темного режиму в електронній пошті для абонентів, у яких увімкнено налаштування темного режиму. Ви можете зробити це, включивши ці метадані в тег.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">Крок 2: Включіть стилі темного режиму для @media (надає перевагу кольоровій схемі: темний) - Напишіть цей медіа-запит у своєму вбудованому tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) та Outlook App (iOS). Якщо ви не хочете, щоб у вашій електронній пошті був окреслений логотип, ви можете використовувати класи .dark-img та .light-img, як показано нижче.
@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; }
}Крок 3: Використовуйте префікс [data-ogsc] для копіювання стилів темного режиму - Включіть ці коди, щоб електронна пошта була сумісна з темним режимом у програмі Outlook для Android.
[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; }Крок 3: Додайте стилі лише темного режиму до основного HTML - Ваші теги HTML повинні мати правильні класи темного режиму.
<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" />
</div><!--<![endif]-->
</a>
<!-- //Logo Section -->Електронна пошта Темний режим Поради та додаткові ресурси
Я працював над Martech Zone щоденні та щотижневі інформаційні бюлетені, що підтримують темний режим, обов’язково підписатися тут. Як і у випадку з більшістю кодування електронної пошти, це не простий процес через різні поштові клієнти та їх власні методології кодування. Одне питання, з яким я зіткнувся, - це винятки ... наприклад, вам потрібен білий текст на кнопці незалежно від темного режиму. Кількість коду трохи смішна ... Мені довелося мати такі винятки:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } Деякі додаткові ресурси:
- Лакмус - остаточне керівництво щодо темного режиму для продавців електронної пошти.
- Монітор кампанії - керівництво розробників щодо темного режиму електронної пошти.
Переглянути інтерактивну інфографіку Uplers
