Темниот режим за е-пошта добива усвојување… Еве како да го поддржите
Темниот режим ја намалува потрошувачката на енергија на екранот и го зголемува фокусот. Некои корисници исто така наведуваат дека чувствуваат намален напор на очите, но тоа е биле испрашувани.
Усвојувањето на темниот режим продолжува да расте. Темниот режим сега е достапен преку macOS, iOS, Android и низа апликации, вклучувајќи ги Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail и Reddit. Сепак, нема секогаш целосна поддршка кај секој од нив. Не често има напредок во технологијата за е-пошта, па затоа е убаво да се види усвојувањето на поддршката за темниот режим и во е-поштата.
Видовме дека 28% од корисниците гледаат во темен режим во август 2021 година. До август 2022 година, тој број се зголеми на речиси 34%.
Литмус
Разбирањето на најдобрите практики, кодот за имплементација и поддршката на клиентот е од клучно значење за успехот на имплементацијата на темниот режим. Од таа причина, тимот на Uplers го објави овој водич за темниот режим поддршка за е-пошта.
Неодамна, DK New Media разви шаблон Salesforce Marketing Cloud за клиент кој го инкорпорираше Dark Mode, драматично спротивставени на деловите за е-пошта кога се гледаат во клиент за е-пошта. Тоа е напор што може да доведе до дополнително ангажирање и стапки на кликање за вашите претплатници.
Код за е-пошта во темен режим
Чекор 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 за 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; }
Некои дополнителни ресурси:
- Литмус - крајниот водич за мрачен режим за продавачи на е-пошта.
- КампањаМонитор – водич за програмери за темниот режим за е-пошта.
Ако сакате вашите шаблони за е-пошта да се конвертираат за поддршка за темниот режим, не двоумете се да контактирате DK New Media.