Харанхуй горимыг хэдхэн жилийн өмнө эхлүүлсэн бөгөөд үрчлэлт улам бүр нэмэгдэж байна. Dark горим MacOS, iOS, Android дээр ажиллах боломжтой бөгөөд Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail, Reddit зэрэг олон програмуудыг ашиглах боломжтой болсон. Гэхдээ тус бүрдээ үргэлж бүрэн дэмжлэг байдаггүй.
Харанхуй горим нь дэлгэцийн эрчим хүчний хэрэглээг багасгаж, анхаарлыг нэмэгдүүлдэг. Зарим хэрэглэгчид нүдний ядаргаа багасч байгааг мэдэрдэг ч энэ нь тийм юм байцаасан.
Саяхан бид Dark Mode-ийг кодондоо шингээсэн Marketing Cloud Cloud загварыг боловсруулж, имэйлийн клиентэд үзэхэд имэйлийн хэсгүүдийг эрс ялгаатай болгосон. Энэ нь таны захиалагчдын нэмэлт оролцоо, товшсон үнийг нэмэгдүүлэх хүчин чармайлт юм.
Имэйлийн технологид дэвшил гарч байгаа нь тэр бүр тохиолддоггүй тул энэ туршлагыг салбар даяар нэвтрүүлж байгааг харах таатай байна. Шилдэг туршлага, хэрэгжүүлэх код, үйлчлүүлэгчдийн дэмжлэгийг ойлгох нь харанхуй горимыг хэрэгжүүлэхэд чухал үүрэг гүйцэтгэнэ. Энэ шалтгааны улмаас Uplers-ийн баг энэхүү гарын авлагыг хэвлүүлэв харанхуй горимын имэйлийн дэмжлэг.
Харанхуй горимын имэйлийн код
Алхам 1: Имэйлийн үйлчлүүлэгчид харанхуй горимыг идэвхжүүлэхийн тулд мета өгөгдлийг оруулна уу - Эхний алхам бол харанхуй горимын тохиргоог асаасан захиалагчдын хувьд имэйл дэх харанхуй горимыг идэвхжүүлэх явдал юм. Та энэ мета өгөгдлийг шошго.
<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 програм дээр харанхуй горимд нийцтэй байхын тулд эдгээр кодыг имэйлээр оруулна уу.
[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 хаягууд харанхуй горимын зөв ангитай байх ёстой.
<!-- 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 - имэйлийн зах зээлд зориулсан харанхуй горимд зориулсан гарын авлага.
- Кампанит ажлын мониторинг - хөгжүүлэгчид имэйлийн харанхуй горимыг удирдан чиглүүлдэг.
Uplers Interactive Infographic үзэх
