Маркетинг и автоматизација на е-пошта

Темниот режим за е-пошта добива усвојување… Еве како да го поддржите

Темниот режим ја намалува потрошувачката на енергија на екранот и го зголемува фокусот. Некои корисници исто така наведуваат дека чувствуваат намален напор на очите, но тоа е биле испрашувани.

Усвојувањето на темниот режим продолжува да расте. Темниот режим сега е достапен преку 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.

мрачен режим во е-пошта
извор: Зголемувања

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основачот на Martech Zone. Даглас им помогна на десетици успешни стартапи на MarTech, помогна во длабинската анализа од над 5 милијарди американски долари за аквизиции и инвестиции на Martech и продолжува да им помага на компаниите во имплементацијата и автоматизирањето на нивните стратегии за продажба и маркетинг. Даглас е меѓународно признат експерт и говорник за дигитална трансформација и MarTech. Даглас е исто така објавен автор на водич за Dummie и книга за бизнис лидерство.

поврзани написи

Вратете се на почетокот копче
Затвори

Откриен е блок за рекламирање

Martech Zone може да ви ја обезбеди оваа содржина без трошоци бидејќи ја монетизираме нашата страница преку приходи од реклами, врски со партнери и спонзорства. Ќе ни биде благодарно ако го отстраните вашиот блокатор на реклами додека ја гледате нашата страница.