Tiếp thị qua email & Tự động hóa

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

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.

chế độ tối trong email
nguồn: người thượng lưu

Douglas Karr

Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

Bài viết liên quan

Back to top
Đóng

Đã phát hiện ra khối quảng cáo

Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.