Темниот режим беше лансиран пред само неколку години и усвојувањето продолжува да расте. Темниот режим сега е достапна преку macOS, iOS и Android, како и мноштво апликации, вклучувајќи Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail и Reddit. Секогаш не постои целосна поддршка во секоја од нив.
Темниот режим ја намалува употребата на енергија на екранот и го зголемува фокусот. Некои корисници исто така наведуваат дека чувствуваат намалување на напрегањето на очите, но тоа е биле испрашувани.
Неодамна, развивме шаблон за маркетинг облак кој вклучи Темен режим во неговиот код што навистина ги прави деловите за е-пошта драматично спротивставени кога се гледаат во клиент за е-пошта. Тоа е напор што може да поттикне дополнителни стапки на ангажман и кликнување за вашите претплатници.
Не е често тоа што има напредувања во технологијата за е-пошта, па затоа е убаво да се види усвојувањето на ова искуство низ целата индустрија. Разбирањето на најдобрите практики, кодот за спроведување, како и поддршката на клиентот е од клучно значење за успехот во спроведувањето на темниот режим. Од таа причина, тимот од Уплерс го објави овој водич за поддршка за е-пошта во темен режим.
Код за е-пошта во темен режим
Чекор 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; } Некои дополнителни ресурси:
- Литмус - крајниот водич за мрачен режим за продавачи на е-пошта.
- КампањаМонитор - водичот на програмерите за темниот режим за е-пошта.
Погледнете го интерактивниот инфографик на аплерите
