Тъмният режим стартира само преди няколко години и приемането продължава да расте. Тъмния режим вече е достъпна за macOS, iOS и Android, както и за множество приложения, включително Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail и Reddit. Все пак не винаги има пълна подкрепа за всеки.
Тъмният режим намалява потреблението на енергия на екрана и увеличава фокуса. Някои потребители също заявяват, че чувстват намаляване на напрежението в очите, но това е е разпитан.
Наскоро разработихме шаблон на Marketing Cloud, който включи Dark Mode в своя код, който наистина прави разделите на имейлите драстично контрастни, когато се гледат в имейл клиент. Това е усилие, което може да доведе до допълнителен ангажимент и честота на кликване за вашите абонати.
Не рядко има напредък в технологиите за електронна поща, така че е приятно да видим приемането на този опит в цялата индустрия. Разбирането на най-добрите практики, кода за внедряване, както и поддръжката на клиентите е от решаващо значение за успеха на вашето внедряване в тъмен режим. По тази причина екипът от Uplers публикува това ръководство за поддръжка по имейл в тъмен режим.
Код за имейл в тъмен режим
Стъпка 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 - ръководството за разработчици за тъмен режим за електронна поща.
Вижте интерактивна инфографика на Uplers
