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

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

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

Распространение темного режима продолжает расти. Темный режим теперь доступен в 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 (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; } 

Некоторые дополнительные ресурсы:

  • Лакмус - полное руководство по темному режиму для маркетологов электронной почты.
  • CampaignMonitor – руководство разработчика по темному режиму для электронной почты.

Если вы хотите, чтобы ваши шаблоны электронной почты были преобразованы для поддержки темного режима, не стесняйтесь обращаться к DK New Media.

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

Douglas Karr

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

Статьи по теме

Вернуться к началу кнопки
Закрыть

Adblock обнаружен

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