Với bản cập nhật iOS 13 mới, Apple Mail sẽ nhận được một chủ đề tối. Điều đó có nghĩa là ứng dụng email chính đầu tiên hỗ trợ prefers-color-scheme Truy vấn phương tiện CSS. Vì vậy, bây giờ bạn có thể thiết kế email đặc biệt cho cả chủ đề tối và sáng.
Tôi là một người rất hâm mộ chế độ tối và email sáng chói là kẻ thù của tôi. Vì vậy, khi tôi biết về chế độ tối trong iOS 13, tôi đã làm điều hiển nhiên duy nhất và đặt mua một chiếc iPhone hoàn toàn mới để kiểm tra mọi thứ.
Trong khi ở đó, tôi cũng đã thử nghiệm cách hoạt động của chế độ tối trong hầu hết các ứng dụng email, bao gồm cả Outlook của kẻ gây rối. Đây là những gì tôi tìm thấy.
Nhưng trước hết, bạn có thích phối màu hơn không?
prefers-color-scheme Truy vấn phương tiện CSS được sử dụng để phát hiện xem người dùng thích chủ đề sáng hay tối, giúp bạn có thể thiết kế email dành riêng cho cả hai.
Với bản cập nhật iOS 13, hỗ trợ trong hầu hết các ứng dụng email phổ biến đã tăng từ 2,3% lên 38,4% ! Một bước tiến vượt bậc nhờ sự phổ biến của Apple Mail. Đáng ngạc nhiên, Outlook là ứng dụng email duy nhất hỗ trợ điều này trước Apple Mail.
Cách hoạt động của chế độ tối trong các ứng dụng email phổ biến
Để hiển thị thông báo email tối, ứng dụng khách email sẽ tự động đảo ngược màu sắc của email ở phía sau hậu trường. Đối với các email người dùng thông thường, tính năng này hoạt động tốt và nhất quán trong tất cả các ứng dụng email.
Tuy nhiên, điều đó không đơn giản như vậy đối với các email HTML tùy chỉnh - những email lấp đầy hầu hết các hộp thư đến của chúng tôi. Tôi đang nói về giao dịch và khuyến mại.
Dưới đây là những điểm khác biệt mà tôi tìm thấy trong cách ứng dụng email xử lý kết xuất email ở chế độ tối:
| Email client | Mức độ phổ biến | Giao diện người dùng tối | Tự động đảo ngược màu email | Hỗ trợ @media (ưu tiên phối màu) | |
|---|---|---|---|---|---|
| Apple Mail iPhone + iPad | 36,1% | ✔ Có | ✔ Có | ✔ Có | (Hiển thị ảnh chụp màn hình) |
| Gmail Android 10 | 27,8% * | ✔ Có | ✔ Có | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| Gmail iOS 13 | 27,8% * | ✖ Không | ✖ Không | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| Gmail webmail | 27,8% * | ✔ Có | ✖ Không | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| Outlook iOS 13 | 9,1% * | ✔ Có | ✔ Có | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| Outlook Android 10 | 9,1% * | ✔ Có | ✔ Có | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| Outlook Windows 10 | 9,1% * | ✔ Có | ✔ Có | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| Outlook macOS | 9,1% * | ✔ Có | ✔ Có | ✔ Có | (Hiển thị ảnh chụp màn hình) |
| Apple Mail macOS | 7,5% | ✔ Có | ✔ Có | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| Yahoo! webmail | 6,3% * | ✔ Có | ✖ Không | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| AOL webmail | 6,3% * | ✖ Không | ✖ Không | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| Outlook.com webmail | 2,3% | ✔ Có | ✔ Có | ✔ Có | (Hiển thị ảnh chụp màn hình) |
| Thư Windows 10 Windows 10 | 0,5% | ✔ Có | ✔ Có | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| Zoho Mail webmail | dưới 0,5% | ✔ Có | ✔ Có | ✖ Không | (Hiển thị ảnh chụp màn hình) |
| Mozilla Thunderbird Windows 10 | dưới 0,5% | ✔ Có | ✖ Không | ✔ Có | (Hiển thị ảnh chụp màn hình) |
| Spark macOS | dưới 0,5% | ✔ Có | ✔ Có | ✔ Có | (Hiển thị ảnh chụp màn hình) |
| Spark iOS 13 | dưới 0,5% | ✔ Có | ✔ Có | ✔ Có | (Hiển thị ảnh chụp màn hình) |
| Spark Android 9 | dưới 0,5% | ✔ Có | ✔ Có | ✔ Có | (Hiển thị ảnh chụp màn hình) |
* Mức độ phổ biến được chia sẻ trên tất cả các nền tảng cho cùng một ứng dụng email vì nó không thể được phân biệt một cách đáng tin cậy. Nguồn phổ biến: Litmus, thị phần ứng dụng email khách năm 2019 .
(Truy cập bài đăng gốc để xem các ghi chú của tôi từ quá trình thử nghiệm và để xem các thử nghiệm mới nhất khi tôi dần thử nghiệm nhiều ứng dụng email hơn và cập nhật bài viết ở đó trước.)
Cách làm cho email HTML thân thiện với chế độ tối
Tôi đã đặt dữ liệu để sử dụng và một vài thách thức liên quan đến Outlook sau đó, tôi đã làm cho email của chúng tôi trở nên thân thiện với chế độ tối. Đây là cách bạn có thể làm như vậy:
Dữ liệu nói gì:
Hơn 55% email có thể được mở khi bật chế độ tối. Khi Gmail tham gia vào mặt tối, các email có thể được mở bằng chế độ tối được bật sẽ tăng vọt lên 83%!
1) Điều chỉnh màu sắc
Hãy chú ý đến Apple Mail, vì nó chỉ đảo ngược màu sắc khi màu nền trong suốt hoặc không xác định - nền trắng thì không . Cách dễ nhất để đảm bảo email của bạn sẽ không làm mờ mắt bất kỳ ai là kiểm tra xem màu nền có được chỉ định hay không. Để kiểm soát nhiều hơn thiết kế, đây là nơi prefers-color-scheme có ích.
Cú pháp (@media prefers-color-Scheme):
<style>
/* Your light mode (default) styles: */
body {
background: white;
color: #393939;
}
@media (prefers-color-scheme: dark) {
/* Your dark mode styles: */
body {
background: black;
color: #ccc;
}
}
</style>
Mẹo thiết kế: Tránh màu trắng tinh khiết #fff như màu văn bản. Tôi thấy rằng tỷ lệ tương phản khoảng 11,5 cho văn bản chính là một sự thỏa hiệp tốt đẹp giữa không quá sáng và không quá mờ. Kiểm tra tỷ lệ tương phản tại đây:https://contrast-ratio.com hoặc sử dụng các công cụ dành cho nhà phát triển Chrome.
2) Chuyển đổi giữa biểu trưng sáng và tối
Văn bản tối trên nền tối rất khó nhìn thấy và đó chính xác là những gì sẽ xảy ra với biểu trưng nếu được xem trong ứng dụng email có bật chế độ tối.
Ngày nay, một logo điển hình thường có nền trong suốt, biểu tượng đầy màu sắc và bản sao tối. Thấy vấn đề? Vì ứng dụng email không đảo ngược màu sắc hình ảnh, bạn cần tự xử lý.
Để giải quyết vấn đề này, bạn có thể:
- lưu biểu trưng bằng nền trắng thay vì nền trong suốt (cách dễ nhất để khắc phục điều này). Nhưng tôi không khuyên bạn nên làm theo cách này - người dùng chế độ tối sẽ không hài lòng.
- đặt một biểu trưng sáng trên nền tối và giữ phần còn lại của email trên nền trắng (xem cách Litmus thực hiện).
- đặt email ở chế độ tối làm mặc định của bạn. Một ứng cử viên sáng giá cho điều này sẽ là Spotify vì họ chỉ cung cấp chủ đề tối trong ứng dụng của mình.
- bao gồm cả phiên bản sáng và tối của biểu trưng của bạn và chuyển đổi giữa bằng
prefers-color-schemetruy vấn phương tiện
Tôi thích nhất là cách tiếp cận cuối cùng, vì vậy đây là cách bạn thực hiện:
Một "display: none" đơn giản trên logo tối hoạt động tốt trong tất cả các ứng dụng email hiện đại. Nhưng trước sự ngạc nhiên của mọi người, nó không hoạt động trong Outlook và Windows 10 Mail.
Trong các kiểu CSS:
<style>
@media (prefers-color-scheme: dark) {
.darkLogo {
display: none !important;
}
.lightLogoWrapper,
.lightLogo {
display: block !important;
}
}
</style>
… Và cấu trúc HTML:
<image src="dark-logo.png" class="darkLogo" />
<!--
To hide the light logo perfectly in Outlook and Windows 10 Mail,
you need to wrap the light logo image tag with a div.
-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>
Cách tiếp cận này hoạt động khá tốt, nhưng nó vẫn không hoạt động chính xác trên toàn diện. Vấn đề văn bản tối trên nền tối sẽ xảy ra với các ứng dụng email hỗ trợ chế độ tối nhưng không hỗ trợ prefers-color-scheme . Đó là Outlook, Windows 10 Mail, Zoho và có thể là Gmail.
Vì vậy, để làm cho biểu trưng trong email hoàn toàn chống đạn, tôi sẽ kết hợp phương pháp 1 và 4 từ trên. Phương pháp 1 sẽ bao gồm tất cả các ứng dụng email hỗ trợ chế độ tối, nhưng không bao gồm prefers-color-scheme . Và phương pháp 4 sẽ bao gồm Apple Mail, Outlook trên MacOS và Outlook.com, hỗ trợ cả hai.
Ngoài ra, thay vì lưu biểu trưng trên nền trắng, tôi sẽ thêm đường viền phù hợp với nền rộng 3 pixel và lưu biểu trưng trên nền trong suốt như bình thường.
Ban đầu, nó trông khá phức tạp (chỉ đối với một biểu trưng), vì vậy trước tiên hãy xem phần đánh dấu HTML:
<!-- Default logo with 3-pixel wide background-matching border -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />
<!-- Light theme (so dark logo):
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="darkLogoWrapper" style="mso-hide: all; display: none">
<image src="dark-logo.png" class="darkLogo" style="display: none" />
</div>
<!-- Dark theme (so light logo):
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>
… Và kiểu CSS:
<style>
@media (prefers-color-scheme: light) {
.darkLogoDefault,
.lightLogo {
display: none !important;
}
.darkLogoWrapper,
.darkLogo {
display: block !important;
}
}
@media (prefers-color-scheme: dark) {
.darkLogoDefault,
.darkLogo {
display: none !important;
}
.lightLogoWrapper,
.lightLogo {
display: block !important;
}
}
</style>
Chế độ tối trong Gmail sắp ra mắt
Chế độ tối sắp xuất hiện trên Android trong Android 10 mới và cuối cùng thì Gmail cũng sẽ chuyển sang chế độ tối hoàn toàn. Tất cả những gì bạn cần là Android 10 và Gmail mới nhất (ít nhất là phiên bản 2019.09.01.268168002). Tuy nhiên, Google có xu hướng dần dần kích hoạt các tính năng mới (chủ đề tối trong trường hợp này) cho người dùng bằng cách đẩy phía máy chủ và tôi chưa gặp may với nó cho đến lúc này.
Tôi tò mò muốn biết liệu hỗ trợ cho @media prefers-color-scheme sắp có trên Gmail. Từ những gì tôi đọc, nó có vẻ không hứa hẹn. Tôi đoán chúng ta phải đợi để tìm hiểu. Tôi sẽ cập nhật bài viết sau khi bật chủ đề tối trong Gmail.
Kết thúc
Chế độ tối sắp xuất hiện trên email HTML và tôi thích nó! Tuy nhiên, đó là một điều khác cần lo lắng - chẳng hạn như sử dụng bảng HTML để bố trí là không đủ.
Luôn cập nhật về chế độ tối trong email bằng cách tham gia danh sách gửi thư của chúng tôi. Chúng tôi cũng chia sẻ ở đó những hiểu biết sâu sắc và những thách thức mà chúng tôi phải đối mặt trong quá trình xây dựng và phát triển sản phẩm SaaS - Sidemail.
Cảm ơn vì đã đọc!