Електронний маркетинг і автоматизація

Темний режим для електронної пошти набирає поширення… Ось як його підтримувати

Темний режим зменшує споживання енергії екраном і підвищує фокус. Деякі користувачі також стверджують, що відчувають зменшення напруги очей, але це так був допитаний.

Прийняття темного режиму продовжує зростати. Темний режим тепер доступний для 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.

темний режим в електронних листах
джерело: Апплери

Douglas Karr

Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

Martech Zone може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.