Тамни режим за е-пошту се усваја… Ево како да га подржите
Тамни режим смањује потрошњу енергије екрана и повећава фокус. Неки корисници такође наводе да осећају смањено напрезање очију, али то је тако био саслушан.
Усвајање тамног режима наставља да расте. Тамни режим је сада доступан за мацОС, иОС, Андроид и низ апликација, укључујући Мицрософт Оутлоок, Сафари, Реддит, Твиттер, ИоуТубе, Гмаил и Реддит. Међутим, не постоји увек пуна подршка за сваки. Није често да постоји напредак у технологији е-поште, тако да је лепо видети усвајање подршке за тамни режим иу е-пошти.
Видели смо да је 28% корисника гледало у мрачном режиму у августу 2021. До августа 2022. тај број се повећао на скоро 34%.
Лакмус
Разумевање најбољих пракси, кода за имплементацију и подршке клијентима је од кључног значаја за успех имплементације мрачног режима. Из тог разлога, тим у Уплерсу је објавио овај водич за тамни режим емаил суппорт.
Недавно, DK New Media развио Салесфорце Маркетинг Цлоуд шаблон за клијента који је укључивао тамни режим, драматично контрастирајући секције е-поште када се гледају у клијенту е-поште. То је напор који може довести до додатног ангажовања и стопе учесталости кликова за ваше претплатнике.
Код е-поште у мрачном режиму
Корак 1: Укључите метаподатке да бисте омогућили тамни режим у клијентима е-поште – Први корак је да омогућите тамни режим у е-пошти за претплатнике са укљученим подешавањима тамног режима. Можете укључити ове метаподатке у таг.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Корак 2: Укључите стилове тамног режима за @медиа (преферира-цолор-схема: тамно) - Напишите овај медијски упит у свој уграђени tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
цом, Оутлоок 2019 (мацОС) и Оутлоок Апп (иОС). Ако не желите истакнути лого у својој е-пошти, можете га користити .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] .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: Укључите ХТМЛ-ове стилова само у тамном режиму - Ваше ХТМЛ ознаке морају имати одговарајуће класе тамног режима.
<!-- 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.