电子邮件营销与自动化

电子邮件的深色模式正在获得采用......以下是如何支持它

深色模式可减少屏幕能耗并提高焦点。 一些用户还表示,他们感觉眼睛疲劳减轻了,但这只是 被质疑.

深色模式的采用率持续增长。 深色模式现已支持 macOS、iOS、Android 和许多应用程序,包括 Microsoft Outlook、Safari、Reddit、Twitter、YouTube、Gmail 和 Reddit。 但并不总是每个人都得到全力支持。 电子邮件技术的进步并不常见,因此很高兴看到电子邮件中采用深色模式支持。

28 年 2021 月,我们发现有 2022% 的用户在深色模式下观看内容。到 34 年 XNUMX 月,这一数字已增加至近 XNUMX%。

石蕊

了解最佳实践、要实施的代码和客户端支持对于成功实施暗模式至关重要。 因此,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包括深色模式样式(prefers-color-scheme:深色) –在您的嵌入式设备中编写此媒体查询 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]前缀复制深色模式样式 –将这些代码包括在电子邮件中,以便与Android的Outlook应用程序中的暗模式兼容。

[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.

电子邮件中的暗模式
Sumber: 上流人

Douglas Karr

Douglas Karr 首席营销官是 开放洞察 和创始人 Martech Zone。 道格拉斯帮助了数十家成功的 MarTech 初创公司,协助进行了超过 5 亿美元的 MarTech 收购和投资尽职调查,并继续协助公司实施和自动化其销售和营销策略。 道格拉斯是国际公认的数字化转型和 MarTech 专家和演讲者。 道格拉斯还是一本傻瓜指南和一本商业领导力书籍的出版作者。

相关文章

返回顶部按钮
关闭

检测到Adblock

Martech Zone 我们能够免费为您提供这些内容,因为我们通过广告收入、联属链接和赞助从我们的网站中获利。 如果您在浏览我们的网站时删除广告拦截器,我们将不胜感激。