วิธีเปิดใช้งานโหมดมืดในอีเมล HTML – ทุกสิ่งที่คุณจำเป็นต้องรู้

ด้วยการอัปเดต iOS 13 ใหม่ Apple Mail ได้รับธีมสีเข้ม นั่นหมายความว่าเป็นไคลเอนต์อีเมลรายใหญ่รายแรกที่รองรับ prefers-color-scheme แบบสอบถามสื่อ CSS คุณจึงออกแบบอีเมลสำหรับธีมสีเข้มและสีอ่อนได้โดยเฉพาะ

ฉันเป็นแฟนตัวยงของโหมดมืด และอีเมลที่สว่างไสวคือศัตรูตัวฉกาจของฉัน ดังนั้นเมื่อฉันเรียนรู้เกี่ยวกับโหมดมืดใน iOS 13 ฉันทำสิ่งที่ชัดเจนและสั่งให้ iPhone ใหม่เอี่ยมเพื่อทดสอบสิ่งต่างๆ

ขณะที่ฉันทำงาน ฉันยังทดสอบด้วยว่าโหมดมืดทำงานอย่างไรในไคลเอนต์อีเมลเกือบทั้งหมด รวมถึง Outlook ตัวสร้างปัญหา นี่คือสิ่งที่ฉันพบ

แต่ก่อนอื่น หมวกคือแบบที่ชอบ-สี-แบบแผนใช่ไหม
prefers-color-scheme คิวรี่สื่อ CSS ใช้เพื่อตรวจสอบว่าผู้ใช้ชอบธีมสีอ่อนหรือสีเข้ม ทำให้สามารถออกแบบอีเมลสำหรับทั้งคู่โดยเฉพาะได้

ด้วยการอัปเดต iOS 13 การสนับสนุนในโปรแกรมรับส่งเมลยอดนิยมส่วนใหญ่เพิ่มขึ้นจาก 2.3% เป็น 38.4% ! ขั้นตอนใหญ่ต้องขอบคุณความนิยมของ Apple Mail น่าแปลกที่ Outlook เป็นโปรแกรมรับส่งเมลเพียงเครื่องเดียวที่รองรับสิ่งนี้ก่อน Apple Mail

โหมดมืดทำงานอย่างไรในโปรแกรมรับส่งเมลยอดนิยม

ในการทำให้ข้อความอีเมลมืดลง โปรแกรมอีเมลจะเปลี่ยนสีของอีเมลโดยอัตโนมัติในเบื้องหลัง สำหรับอีเมลระหว่างผู้ใช้กับผู้ใช้ทั่วไป วิธีนี้ใช้ได้ผลดีและสม่ำเสมอในโปรแกรมรับส่งเมลทั้งหมด

อย่างไรก็ตาม มันไม่ง่ายขนาดนั้นสำหรับอีเมล HTML ที่กำหนดเอง — อีเมลที่กรอกในกล่องจดหมายส่วนใหญ่ของเรา ฉันกำลังพูดถึงธุรกรรมและการส่งเสริมการขาย

นี่คือความแตกต่างที่ฉันพบในวิธีที่ไคลเอนต์อีเมลจัดการกับการแสดงผลอีเมลในโหมดมืด:

* นิยมใช้ร่วมกันในทุกแพลตฟอร์มสำหรับไคลเอนต์อีเมลเดียวกัน เนื่องจากไม่สามารถแยกแยะได้อย่างน่าเชื่อถือ แหล่งความนิยม: Litmus ส่วนแบ่งตลาดไคลเอนต์อีเมลปี 2019

(ไปที่โพสต์ต้นฉบับเพื่อดูบันทึกย่อของฉันจากการทดสอบ และดูการทดสอบล่าสุดในขณะที่ฉันค่อยๆ ทดสอบโปรแกรมรับส่งเมลเพิ่มเติมและอัปเดตบทความที่นั่นก่อน)

วิธีทำให้อีเมล HTML ใช้งานได้ในโหมดมืด

ฉันได้นำข้อมูลไปใช้แล้ว และปัญหาบางอย่างที่เกี่ยวข้องกับ Outlook ในภายหลัง ฉันทำให้โหมดมืดของอีเมลของเราใช้งานได้ง่าย คุณสามารถทำสิ่งเดียวกันได้ดังนี้:

ข้อมูลว่าอย่างไร:
อีเมลมากกว่า 55% อาจถูกเปิดโดยเปิดใช้งานโหมดมืด เมื่อ Gmail เข้าสู่ด้านมืด อีเมลที่อาจเปิดโดยเปิดใช้โหมดมืดจะเพิ่มเป็น 83%!

1) การปรับสี

ระวัง Apple Mail เพราะจะเปลี่ยนสีก็ต่อเมื่อสีพื้นหลังโปร่งใสหรือไม่ระบุ — พื้นหลังสีขาวไม่เปลี่ยน . วิธีที่ง่ายที่สุดในการตรวจสอบให้แน่ใจว่าอีเมลของคุณจะไม่ทำให้ใครตาบอดคือการตรวจสอบว่ามีการระบุสีพื้นหลังหรือไม่ สำหรับการควบคุมการออกแบบที่มากขึ้น นี่คือที่ที่ prefers-color-scheme มีประโยชน์

ไวยากรณ์ (@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>

เคล็ดลับการออกแบบ: หลีกเลี่ยงสีขาวบริสุทธิ์ #fff เป็นสีข้อความ ฉันพบว่าอัตราส่วนคอนทราสต์ประมาณ 11.5 สำหรับข้อความหลักเป็นการประนีประนอมที่ดีระหว่างไม่สว่างเกินไปและไม่สลัวเกินไป ตรวจสอบอัตราส่วนคอนทราสต์ที่นี่:https://contrast-ratio.com หรือใช้เครื่องมือสำหรับนักพัฒนาของ Chrome

2) การสลับระหว่างโลโก้สว่างและสีเข้ม

ข้อความสีเข้มบนพื้นหลังสีเข้มแทบจะมองไม่เห็น และนั่นคือสิ่งที่จะเกิดขึ้นกับโลโก้หากดูในโปรแกรมรับส่งเมลที่เปิดใช้งานโหมดมืด

ทุกวันนี้ โลโก้ทั่วไปมักจะมีพื้นหลังโปร่งใส ไอคอนที่มีสีสัน และสำเนาสีเข้ม เห็นปัญหา? เนื่องจากโปรแกรมรับส่งเมลไม่เปลี่ยนสีรูปภาพ คุณต้องจัดการเอง

เพื่อแก้ไขปัญหานี้ คุณสามารถ:

1. บันทึกโลโก้ด้วยพื้นหลังสีขาวแทนพื้นหลังโปร่งใส (วิธีที่ง่ายที่สุดในการแก้ไขปัญหานี้) แต่ฉันจะไม่แนะนำวิธีนี้ ผู้ใช้โหมดมืดจะไม่มีความสุข
2. ใส่โลโก้สีอ่อนบนพื้นหลังสีเข้ม และเก็บอีเมลที่เหลือไว้บนพื้นหลังสีขาว (ดูว่า Litmus ทำอย่างไร)
3. กำหนดให้อีเมลในโหมดมืดเป็นค่าเริ่มต้น ตัวเลือกที่ดีสำหรับสิ่งนี้คือ Spotify เพราะพวกเขาเสนอธีมสีเข้มในแอปเท่านั้น
4. ใส่โลโก้ของคุณทั้งแบบสว่างและสีเข้ม และสลับระหว่างด้วย prefers-color-scheme แบบสอบถามสื่อ

สิ่งที่ฉันชอบคือวิธีสุดท้าย ดังนั้นนี่คือวิธีที่คุณทำ:

"display: none"ง่ายๆ บนโลโก้สีเข้มทำงานได้ดีในไคลเอนต์อีเมลสมัยใหม่ทั้งหมด แต่ทุกคนต้องแปลกใจ ฟีเจอร์นี้ใช้ไม่ได้ใน Outlook และ Windows 10 Mail

ในรูปแบบ CSS:

<style>
	@media (prefers-color-scheme: dark) {
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

…และโครงสร้าง 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>

วิธีนี้ใช้ได้ผลดี แต่ก็ยังทำงานไม่ถูกต้องทั่วทั้งกระดาน ปัญหาข้อความสีเข้มบนพื้นหลังสีเข้มจะเกิดขึ้นกับไคลเอนต์อีเมลที่รองรับโหมดมืด แต่ไม่รองรับ prefers-color-scheme . นั่นคือ Outlook, Windows 10 Mail, Zoho และอาจเป็น Gmail

ดังนั้น เพื่อให้โลโก้ในอีเมลกันกระสุนได้อย่างสมบูรณ์ ฉันจะรวมวิธีที่ 1 และ 4 จากด้านบนเข้าด้วยกัน วิธีที่ 1 จะครอบคลุมไคลเอ็นต์อีเมลทั้งหมดที่สนับสนุนโหมดมืด แต่ไม่ใช่ prefers-color-scheme . และวิธีที่ 4 จะครอบคลุม Apple Mail, Outlook บน MacOS และ Outlook.com ซึ่งรองรับทั้งสองอย่าง

นอกจากนี้ แทนที่จะบันทึกโลโก้บนพื้นหลังสีขาว ฉันจะเพิ่มเส้นขอบที่ตรงกับพื้นหลังกว้าง 3 พิกเซลและบันทึกบนพื้นหลังโปร่งใสตามปกติ

เริ่มดูค่อนข้างซับซ้อน (สำหรับโลโก้เท่านั้น) มาดูมาร์กอัป 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>

…และรูปแบบ 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>

โหมดมืดใน Gmail กำลังจะมา

โหมดมืดกำลังจะมาถึง Android ใน Android 10 ใหม่และในที่สุด Gmail ก็ควรจะมืดสนิทเช่นกัน สิ่งที่คุณต้องมีคือ Android 10 และ Gmail ใหม่ล่าสุด (อย่างน้อยเวอร์ชัน 2019.09.01.268168002) อย่างไรก็ตาม Google มีแนวโน้มที่จะเปิดใช้งานคุณลักษณะใหม่ (ในกรณีนี้คือธีมสีเข้ม) สำหรับผู้ใช้ทีละน้อยด้วยการกดจากฝั่งเซิร์ฟเวอร์ และตอนนี้ฉันยังไม่มีโชคกับมัน

ฉันอยากรู้ว่ารองรับ @media prefers-color-scheme . หรือไม่ กำลังมาที่ Gmail เท่าที่อ่านดูไม่มีความหวัง ฉันเดาว่าเราต้องรอเพื่อหา ฉันจะอัปเดตบทความเมื่อเปิดใช้ธีมมืดใน Gmail

สรุป

โหมดมืดกำลังมาในอีเมล HTML และฉันชอบมันมาก! แต่เป็นอีกเรื่องที่ต้องกังวล – เช่นการใช้ตาราง HTML สำหรับการจัดวางไม่เพียงพอ

ติดตามข่าวสารล่าสุดเกี่ยวกับโหมดมืดในอีเมลโดยเข้าร่วมรายชื่ออีเมลของเรา นอกจากนี้เรายังแชร์ข้อมูลเชิงลึกและความท้าทายที่เราเผชิญขณะสร้างและพัฒนาผลิตภัณฑ์ SaaS — Sidemail

ขอบคุณสำหรับการอ่าน!