Mòd nwa pou imèl ap jwenn adopsyon... Men kijan pou sipòte li
Mòd nwa diminye itilizasyon enèji ekran ak ogmante konsantre. Gen kèk itilizatè tou deklare yo santi yo yon tansyon je redwi, men sa a te kesyone.
Adopsyon mòd nwa ap kontinye grandi. Mòd nwa disponib kounye a atravè macOS, iOS, Android, ak yon pakèt aplikasyon, tankou Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail, ak Reddit. Men, pa toujou gen sipò konplè sou chak. Li pa souvan ke gen avansman nan teknoloji imel, kidonk li se bèl yo wè adopsyon an nan sipò mòd nwa nan imel tou.
Nou te wè 28% itilizatè yo gade nan mòd nwa nan mwa Out 2021. Nan mwa Out 2022, nimewo sa a te ogmante a prèske 34%.
Lidr
Konprann pi bon pratik, kòd pou aplike, ak sipò kliyan enpòtan anpil pou siksè aplikasyon ou nan mòd nwa. Pou rezon sa a, ekip la nan Uplers pibliye gid sa a nan mòd nwa sipò imel.
Dènyèman, DK New Media te devlope yon modèl Salesforce Maketing Cloud pou yon kliyan ki enkòpore Dark Mode, ki diferan anpil nan seksyon imel yo lè yo gade nan yon kliyan imel. Se yon efò ki ka mennen plis angajman ak pousantaj klike sou pou abonnés ou yo.
Fènwa Mode Imèl Kòd
Etap 1: Mete metadata yo ki ap pèmèt mòd nwa nan kliyan imel – Premye etap la se pèmèt mòd nwa nan imel la pou abonnés ak anviwònman mòd nwa vire sou. Ou ka mete metadata sa a nan tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Etap 2: Mete estil mòd nwa pou @ medya (prefere-koulè-konplo: nwa) - Ekri rechèch sa a medya nan entegre ou tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS), ak Outlook App (iOS). Si ou pa vle yon logo dekri nan imèl ou, ou ka itilize .dark-img
ak .light-img
klas yo jan yo montre anba a.
@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; }
}
Etap 3: Sèvi ak [done-ogsc] prefiks pou kopi estil mòd nwa - Mete kòd sa yo pou imèl la dwe konpatib ak mòd nwa nan pespektiv app pou 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; }
Etap 3: Mete estil mòd nwa sèlman nan kò a HTML - Tags HTML ou yo dwe gen klas ki kòrèk mòd nwa.
<!-- 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 -->
Imèl Konsèy Mode nwa ak Resous Lòt
Mwen te travay sou la Martech Zone bilten chak jou ak chak semèn pou sipòte mòd nwa... asire w ke ou abònman isit la. Menm jan ak pifò kodaj imel, li pa senp akòz diferan kliyan imel yo ak metodoloji kodaj propriétaires yo. Yon pwoblèm mwen te rankontre se te eksepsyon ... pou egzanp, ou vle tèks blan sou yon bouton kèlkeswa mòd nwa. Kantite kòd la se yon ti jan ridikil... Mwen te oblije gen eksepsyon sa yo:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Kèk resous adisyonèl:
- Lidr - gid la ultim pou mòd nwa pou mache imel.
- CampaignMonitor – Gid pwomotè a nan mòd nwa pou imèl.
Si ou vle modèl imel ou konvèti pou sipò mòd nwa, pa ezite kontakte DK New Media.