Email Marketing & Automatizace

Tmavý režim pro e-maily získává přijetí… Zde je návod, jak jej podpořit

Tmavý režim snižuje spotřebu energie obrazovky a zvyšuje zaostření. Někteří uživatelé také uvádějí, že cítí sníženou únavu očí, ale to je byl vyslýchán.

Adopce tmavého režimu stále roste. Tmavý režim je nyní k dispozici pro macOS, iOS, Android a řadu aplikací, včetně Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail a Reddit. Ne vždy je však plná podpora napříč všemi. Nestává se často, že by došlo k pokroku v e-mailové technologii, takže je hezké vidět přijetí podpory tmavého režimu také v e-mailu.

V srpnu 28 jsme viděli 2021 % uživatelů sledování v tmavém režimu. Do srpna 2022 se toto číslo zvýšilo na téměř 34 %.

Lakmus

Porozumění osvědčeným postupům, kódu k implementaci a klientské podpoře je zásadní pro úspěšnou implementaci tmavého režimu. Z tohoto důvodu tým z Uplers publikoval tohoto průvodce temným režimem e-mailovou podporu.

Nedávno, DK New Media vyvinula šablonu Salesforce Marketing Cloud pro klienta, která obsahovala tmavý režim, čímž dramaticky kontrastovala sekce e-mailu při prohlížení v e-mailovém klientovi. Je to úsilí, které může vašim odběratelům přinést další zapojení a míru prokliku.

E-mailový kód Dark Mode

Krok 1: Zahrnutím metadat povolíte tmavý režim v e-mailových klientech – Prvním krokem je povolit tmavý režim v e-mailu pro odběratele se zapnutým nastavením tmavého režimu. Tato metadata můžete zahrnout do štítek.

<meta name="color-scheme" content="light dark"> 
<meta name="supported-color-schemes" content="light dark">

Krok 2: Zahrnout styly tmavého režimu pro @media (preference-barevné schéma: tmavé) - Napište tento mediální dotaz do svého vloženého tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) a Outlook App (iOS). Pokud nechcete mít ve svém e-mailu nastíněné logo, můžete použít .dark-img a .light-img třídy, jak je uvedeno níže.

@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; } 
}

Krok 3: Použijte předponu [data-ogsc] k duplikování stylů tmavého režimu - Zahrňte tyto kódy, aby byl e-mail kompatibilní s tmavým režimem v aplikaci Outlook pro 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; }

Krok 3: Zahrňte do těla HTML styly pouze v tmavém režimu - Vaše značky HTML musí mít správné třídy temného režimu.

<!-- 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 -->

Tipy a další zdroje e-mailem v tmavém režimu

Pracoval jsem na Martech Zone denní a týdenní zpravodaje na podporu tmavého režimu… určitě přihlásit se k odběru zde. Stejně jako u většiny kódování e-mailů to není jednoduché kvůli různým e-mailovým klientům a jejich proprietárním metodologiím kódování. Jeden problém, na který jsem narazil, byly výjimky... například chcete bílý text na tlačítku bez ohledu na tmavý režim. Množství kódu je trochu směšné... Musel jsem mít následující výjimky:

@media (prefers-color-scheme: dark ) { 
.dark-mode-button {
	color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } 

Některé další zdroje:

  • Lakmus - konečný průvodce temným režimem pro e-mailové marketingové pracovníky.
  • Monitor kampaně – průvodce vývojáře tmavým režimem pro e-mail.

Pokud chcete, aby byly vaše e-mailové šablony převedeny pro podporu tmavého režimu, neváhejte se na nás obrátit DK New Media.

tmavý režim v e-mailech
Zdroj: Vyšší

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladatelem Martech Zone. Douglas pomohl desítkám úspěšných MarTech startupů, pomohl s due diligence v hodnotě více než 5 miliard dolarů v akvizicích a investicích Martech a nadále pomáhá společnostem při implementaci a automatizaci jejich prodejních a marketingových strategií. Douglas je mezinárodně uznávaný odborník na digitální transformaci a MarTech a řečník. Douglas je také publikovaným autorem průvodce pro figuríny a knihy o obchodním vedení.

Související články

Tlačítko Nahoru
zavřít

Byl detekován Adblock

Martech Zone je schopna vám poskytnout tento obsah zdarma, protože naše stránky zpeněžujeme prostřednictvím příjmů z reklam, přidružených odkazů a sponzorství. Ocenili bychom, kdybyste při prohlížení našich stránek odstranili svůj blokovač reklam.