Электрондук почта маркетингиндеги Dark режимин колдоо

Электрондук почта маркетинги жана электрондук почта маркетингин автоматташтыруу

Электрондук почталардын караңгы режими: бул эмне? Кайсы кардарлар аны колдошот? Кандай код керек?

Douglas Karr Шейшемби, февраль 2, 2021

0 1,008 2 мүнөт окуу

Dark режим бир нече жыл мурун гана ишке киргизилген жана кабыл алуу өсүп жатат. Dark режими эми MacOS, iOS жана Androidде, ошондой эле Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail жана Reddit сыяктуу көптөгөн тиркемелерде жеткиликтүү. Бирок, ар бир жерде ар дайым толук колдоо жок.

Караңгы режим экрандагы энергияны азайтат жана фокусту көбөйтөт. Кээ бир колдонуучулар көздүн тыгыздашуусу азайганын айтышат, бирок ошол суралды.

Жакында, биз Карандаш режиминде электрондук почта бөлүмдөрүн кескин карама-каршы кылган, анын кодуна Dark Mode киргизилген Marketing 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; overﬂow: visible !important; ﬂoat: 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] префиксин колдонуңуз - Android үчүн Outlook колдонмосунда караңгы режимге шайкеш келиши үчүн электрондук почтага ушул коддорду киргизиңиз.

[data-ogsc] .light-mode-image { display:none; display:none !important; } 
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overﬂow: visible !important; ﬂoat: 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; overﬂow:hidden; ﬂoat: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; }

Айрым кошумча ресурстар:

лакмус кагазы - электрондук почта сатуучулары үчүн караңгы режим үчүн акыркы колдонмо.
CampaignMonitor - иштеп чыгуучулар электрондук почта үчүн караңгы режимге көрсөтмө беришет.

Uplers интерактивдүү инфографикасын караңыз