Темний режим для електронної пошти набирає поширення… Ось як його підтримувати
Темний режим зменшує споживання енергії екраном і підвищує фокус. Деякі користувачі також стверджують, що відчувають зменшення напруги очей, але це так був допитаний.
Прийняття темного режиму продовжує зростати. Темний режим тепер доступний для macOS, iOS, Android і безлічі програм, включаючи Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail і Reddit. Однак не завжди є повна підтримка для кожного. Технології електронної пошти розвиваються нечасто, тому приємно бачити підтримку темного режиму в електронній пошті.
У серпні 28 року ми спостерігали, як 2021% користувачів переглядають у темному режимі. До серпня 2022 року це число зросло майже до 34%.
Лакмус
Розуміння найкращих практик, коду для впровадження та підтримки клієнтів є критично важливими для успішного впровадження темного режиму. З цієї причини команда Uplers опублікувала цей посібник із темного режиму підтримка електронною поштою.
В останній час DK New Media розробив шаблон Salesforce Marketing Cloud для клієнта, який інтегрував темний режим, різко контрастуючи між розділами електронної пошти під час перегляду в поштовому клієнті. Це зусилля, яке може стимулювати додаткове залучення та рейтинг кліків для ваших підписників.
Код електронної пошти в темному режимі
Крок 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; }
Деякі додаткові ресурси:
- Лакмус - остаточне керівництво щодо темного режиму для продавців електронної пошти.
- Монітор кампанії – посібник розробника для темного режиму для електронної пошти.
Якщо ви хочете, щоб ваші шаблони електронної пошти були перетворені на підтримку темного режиму, не соромтеся звертатися до DK New Media.