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.