Имейл маркетинг и автоматизация

Тъмният режим за имейл набира популярност... Ето как да го поддържате

Тъмният режим намалява потреблението на енергия на екрана и увеличава фокуса. Някои потребители също заявяват, че усещат намалено напрежение на очите, но това е така е разпитан.

Възприемането на тъмен режим продължава да расте. Тъмният режим вече е наличен в macOS, iOS, Android и множество приложения, включително Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail и Reddit. Въпреки това не винаги има пълна поддръжка във всеки от тях. Не се случва често да има напредък в имейл технологията, така че е хубаво да видим приемането на поддръжка на тъмен режим и в имейла.

Видяхме, че 28% от потребителите гледат в тъмен режим през август 2021 г. До август 2022 г. този брой се е увеличил до почти 34%.

Лакмус

Разбирането на най-добрите практики, кода за внедряване и клиентската поддръжка е от решаващо значение за успеха на внедряването на тъмен режим. Поради тази причина екипът на Uplers публикува това ръководство за тъмен режим имейл поддръжка.

Наскоро DK New Media разработи шаблон на Salesforce Marketing Cloud за клиент, който включва тъмен режим, драматично контрастиращ между имейл секциите, когато се гледат в имейл клиент. Това е усилие, което може да стимулира допълнителна ангажираност и честота на кликване за вашите абонати.

Код за имейл в тъмен режим

Стъпка 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; } 

Някои допълнителни ресурси:

  • Лакмус - най-доброто ръководство за тъмен режим за търговци на електронна поща.
  • CampaignMonitor – ръководство на разработчиците за тъмен режим за имейл.

Ако искате имейл шаблоните ви да бъдат конвертирани за поддръжка на тъмен режим, не се колебайте да се свържете с DK New Media.

тъмен режим в имейли
Източник: Апплери

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основателят на Martech Zone. Дъглас е помогнал на десетки успешни стартъпи на MarTech, съдействал е за надлежна проверка на над $5 милиарда в придобивания и инвестиции на Martech и продължава да помага на компаниите при прилагането и автоматизирането на техните стратегии за продажби и маркетинг. Дъглас е международно признат експерт и лектор по дигитална трансформация и MarTech. Дъглас също е публикуван автор на ръководство за манекени и книга за бизнес лидерство.

Свързани статии

Бутон "Нагоре" горе
Близо

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

Martech Zone е в състояние да ви предостави това съдържание безплатно, тъй като осигуряваме приходи от нашия сайт чрез приходи от реклами, партньорски връзки и спонсорство. Ще сме благодарни, ако премахнете блокера си за реклами, докато разглеждате нашия сайт.