ຮູບແບບມືດ ສຳ ລັບອີເມວ: ມັນແມ່ນຫຍັງ? ລູກຄ້າໃດທີ່ສະ ໜັບ ສະ ໜູນ ມັນ? ມີລະຫັດໃດແດ່ທີ່ ຈຳ ເປັນ?

ຮູບແບບຊ້ໍາໄດ້ຖືກເປີດຕົວພຽງແຕ່ສອງສາມປີກ່ອນແລະການຮັບຮອງເອົາຍັງສືບຕໍ່ເຕີບໃຫຍ່. ຮູບແບບມືດ ປະຈຸບັນມີຢູ່ທົ່ວ macOS, iOS, ແລະ Android ພ້ອມທັງມີໂປແກຼມລວມທັງ Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail ແລະ Reddit. ບໍ່ມີການສະ ໜັບ ສະ ໜູນ ຢ່າງເຕັມທີ່ໃນແຕ່ລະດ້ານ, ເຖິງແມ່ນວ່າ.

ຮູບແບບມືດຫຼຸດຜ່ອນການໃຊ້ພະລັງງານໃນ ໜ້າ ຈໍແລະເພີ່ມຈຸດສຸມ. ຜູ້ໃຊ້ບາງຄົນຍັງກ່າວອີກວ່າພວກເຂົາຮູ້ສຶກວ່າການຫຼຸດຜ່ອນຄວາມເຄັ່ງຕຶງໃນສາຍຕາ, ແຕ່ນັ້ນແມ່ນ ໄດ້ຖືກຕັ້ງ ຄຳ ຖາມ.

ເມື່ອບໍ່ດົນມານີ້, ພວກເຮົາໄດ້ພັດທະນາແມ່ແບບ Marketing Cloud ທີ່ລວມເອົາ Dark Mode ເຂົ້າໃນລະຫັດຂອງມັນທີ່ເຮັດໃຫ້ສ່ວນອີເມວມີຄວາມກົງກັນຂ້າມຢ່າງຫຼວງຫຼາຍເມື່ອເບິ່ງໃນລູກຄ້າອີເມວ ມັນແມ່ນຄວາມພະຍາຍາມທີ່ອາດຈະເຮັດໃຫ້ການມີສ່ວນພົວພັນເພີ່ມເຕີມແລະອັດຕາການຄລິກຜ່ານ ສຳ ລັບຜູ້ຈອງຂອງທ່ານ.

ມັນບໍ່ຄ່ອຍຈະມີຄວາມກ້າວ ໜ້າ ໃນເຕັກໂນໂລຢີອີເມວ, ສະນັ້ນມັນດີທີ່ໄດ້ເຫັນການຮັບຮອງເອົາປະສົບການນີ້ໃນທົ່ວອຸດສາຫະ ກຳ. ຄວາມເຂົ້າໃຈກ່ຽວກັບການປະຕິບັດທີ່ດີທີ່ສຸດ, ລະຫັດເພື່ອຈັດຕັ້ງປະຕິບັດ, ພ້ອມທັງການສະ ໜັບ ສະ ໜູນ ລູກຄ້າແມ່ນ ສຳ ຄັນຕໍ່ຜົນ ສຳ ເລັດຂອງການຈັດຕັ້ງປະຕິບັດຂອງທ່ານໃນຮູບແບບມືດ. ດ້ວຍເຫດຜົນນັ້ນ, ທີມງານທີ່ Uplers ໄດ້ເຜີຍແຜ່ປື້ມຄູ່ມືນີ້ໃຫ້ ສະຫນັບສະຫນູນອີເມວແບບຊ້ໍາ.

ລະຫັດອີເມວແບບຊ້ ຳ

ຂັ້ນຕອນທີ 1: ປະກອບມີເມຕາເດຕາເພື່ອເປີດໂຫມດມືດໃນລູກຄ້າອີເມວ - ຂັ້ນຕອນ ທຳ ອິດແມ່ນເປີດໃຊ້ຮູບແບບມືດໃນອີເມວ ສຳ ລັບຜູ້ຈອງທີ່ມີການຕັ້ງຄ່າໂຫມດມືດ. ທ່ານສາມາດເຮັດໄດ້ໂດຍການລວມເອົາຂໍ້ມູນ metadata ນີ້ໃນ ແທັກ.

<meta name="color-scheme" content="light dark"> 
<meta name="supported-color-schemes" content="light dark">

ຂັ້ນຕອນທີ 2: ປະກອບມີຮູບແບບສີເຂັ້ມ ສຳ ລັບ @media (ມັກເລືອກສີສັນ: ຊ້ ຳ) - ຂຽນແບບສອບຖາມສື່ນີ້ໃສ່ໃນເອກະສານຊ້ອນທ້າຍຂອງທ່ານ 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] ເພື່ອຊ້ ຳ ຮູບແບບແບບຊ້ ຳ - ລວມເອົາລະຫັດເຫລົ່ານີ້ ສຳ ລັບອີເມວໃຫ້ເຂົ້າກັນໄດ້ກັບຮູບແບບມືດໃນ Outlook app ສຳ ລັບ 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; }

ຂັ້ນຕອນທີ 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; } 

ບາງຊັບພະຍາກອນເພີ່ມເຕີມ:

• Litmus - ຄຳ ແນະ ນຳ ສຸດທ້າຍ ສຳ ລັບຮູບແບບມືດ ສຳ ລັບນັກກາລະຕະຫຼາດອີເມວ.
• CampaignMonitor - ນັກພັດທະນາແນະ ນຳ ຮູບແບບມືດ ສຳ ລັບອີເມວ.

ເບິ່ງ Uplers Interactive Infographic