電子郵件的深色模式正在獲得採用......以下是如何支援它
深色模式可減少螢幕能耗並提高焦點。 一些用戶也表示,他們覺得眼睛疲勞減輕了,但這只是 被質疑.
深色模式的採用率持續成長。 深色模式現已支援 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.