電子郵件營銷與自動化

電子郵件的深色模式正在獲得採用......以下是如何支援它

深色模式可減少螢幕能耗並提高焦點。 一些用戶也表示,他們覺得眼睛疲勞減輕了,但這只是 被質疑.

深色模式的採用率持續成長。 深色模式現已支援 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.

電子郵件中的暗模式
資源: 上流人

Douglas Karr

Douglas Karr 是 CMO 的 開放洞察 和創始人 Martech Zone。 道格拉斯幫助了數十家成功的 MarTech 新創公司,協助進行了超過 5 億美元的 MarTech 收購和投資盡職調查,並繼續協助公司實施和自動化其銷售和行銷策略。 道格拉斯是國際公認的數位轉型和 MarTech 專家和演講者。 道格拉斯也是一本傻瓜指南和一本商業領導書的出版作者。

相關文章

返回頂部按鈕
關閉

檢測到Adblock

Martech Zone 我們能夠免費為您提供這些內容,因為我們通過廣告收入、聯屬鏈接和讚助從我們的網站中獲利。 如果您在瀏覽我們的網站時刪除廣告攔截器,我們將不勝感激。