Chế độ tối cho email đang được chấp nhận… Đây là cách hỗ trợ nó
Chế độ tối giúp giảm mức sử dụng năng lượng của màn hình và tăng khả năng tập trung. Một số người dùng cũng cho biết họ cảm thấy mắt bớt mỏi hơn, nhưng đó chỉ là được hỏi.
Việc áp dụng chế độ tối tiếp tục phát triển. Chế độ tối hiện có sẵn trên macOS, iOS, Android và một loạt ứng dụng, bao gồm Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail và Reddit. Tuy nhiên, không phải lúc nào cũng có sự hỗ trợ đầy đủ trên mỗi. Không thường xuyên có những tiến bộ trong công nghệ email, vì vậy thật vui khi thấy việc áp dụng hỗ trợ chế độ tối trong email.
Chúng tôi nhận thấy 28% người dùng xem ở Chế độ tối vào tháng 2021 năm 2022. Đến tháng 34 năm XNUMX, con số đó đã tăng lên gần XNUMX%.
màu xanh lấy ở loài rêu
Hiểu các phương pháp hay nhất, mã để triển khai và hỗ trợ khách hàng là rất quan trọng đối với sự thành công của việc triển khai chế độ tối. Vì lý do đó, nhóm tại Uplers đã xuất bản hướng dẫn này về chế độ tối hỗ trợ email.
Gần đây, DK New Media đã phát triển mẫu Đám mây tiếp thị Salesforce cho một khách hàng kết hợp Chế độ tối, tương phản đáng kể các phần email khi được xem trong ứng dụng email. Đó là nỗ lực có thể thúc đẩy mức độ tương tác và tỷ lệ nhấp bổ sung cho người đăng ký của bạn.
Mã email ở chế độ tối
Bước 1: Bao gồm siêu dữ liệu để bật chế độ tối trong ứng dụng email – Bước đầu tiên là bật chế độ tối trong email đối với những người đăng ký đã bật cài đặt chế độ tối. Bạn có thể đưa siêu dữ liệu này vào nhãn.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Bước 2: Bao gồm các kiểu chế độ tối cho @media (ưu tiên phối màu: tối) - Viết truy vấn phương tiện này trong tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) và Ứng dụng Outlook (iOS). Nếu bạn không muốn có logo có đường viền trong email của mình, bạn có thể sử dụng .dark-img
và .light-img
các lớp như hình dưới đây.
@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; }
}
Bước 3: Sử dụng tiền tố [data-ogsc] để sao chép kiểu chế độ tối - Bao gồm các mã này để email tương thích với chế độ tối trong ứng dụng Outlook dành cho 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; }
Bước 3: Đưa các kiểu chỉ ở chế độ tối vào HTML nội dung - Các thẻ HTML của bạn phải có đúng lớp chế độ tối.
<!-- 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 -->
Gửi các mẹo về chế độ tối và tài nguyên bổ sung qua email
Tôi đã làm việc trên Martech Zone bản tin hàng ngày và hàng tuần để hỗ trợ chế độ tối… hãy chắc chắn Đăng ký tại đây. Giống như hầu hết việc mã hóa email, việc này không hề đơn giản do có nhiều ứng dụng email khác nhau và các phương pháp mã hóa độc quyền của chúng. Một vấn đề tôi gặp phải là các trường hợp ngoại lệ… ví dụ: bạn muốn có văn bản màu trắng trên một nút bất kể chế độ tối. Số lượng mã hơi vô lý… Tôi phải có những ngoại lệ sau:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Một số tài nguyên bổ sung:
- màu xanh lấy ở loài rêu - hướng dẫn cuối cùng về chế độ tối cho các nhà tiếp thị email.
- Chiến dịch viên – hướng dẫn dành cho nhà phát triển về chế độ tối cho email.
Nếu bạn muốn các mẫu email của mình được chuyển đổi để hỗ trợ chế độ tối, đừng ngần ngại liên hệ với DK New Media.