Temný režim byl spuštěn před několika lety a adopce stále roste. Tmavý režim je nyní k dispozici v systémech macOS, iOS a Android a také v řadě aplikací včetně Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail a Reddit. Ve všech však není vždy plná podpora.
Tmavý režim snižuje spotřebu energie na obrazovce a zvyšuje zaostření. Někteří uživatelé také uvádějí, že pociťují snížení namáhání očí, ale to je tak byl vyslýchán.
Nedávno jsme vyvinuli šablonu Marketing Cloud, která do svého kódu začlenila Dark Mode, díky čemuž jsou e-mailové sekce při prohlížení v e-mailovém klientovi skutečně v kontrastu. Jedná se o úsilí, které může vašim odběratelům zajistit další zapojení a míru prokliku.
Nestává se často, že by došlo k pokroku v e-mailové technologii, takže je hezké vidět přijetí této zkušenosti v celém odvětví. Porozumění osvědčeným postupům, kód k implementaci a podpora klientů je zásadní pro úspěch vaší implementace temného režimu. Z tohoto důvodu vydal tým v Uplers tuto příručku e-mailová podpora v tmavém režimu.
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 povolení tmavého režimu v e-mailu pro předplatitele, kteří mají zapnutá nastavení tmavého režimu. Můžete tak učinit zahrnutím těchto metadat do souboru š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 aplikace Outlook (iOS). Pokud ve svém e-mailu nechcete mít obrysové logo, můžete použít třídy .dark-img a .light-img, jak je znázorněno 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 nezapomeňte na denní a týdenní zpravodaje na podporu temného režimu přihlásit se k odběru zde. Stejně jako u většiny kódování e-mailů nejde o jednoduchý proces kvůli různým e-mailovým klientům a jejich proprietárním metodikám kódování. Jedním z problémů, se kterým 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.
- CampaignMonitor - průvodce vývojáři pro temný režim pro e-mail.
Zobrazit interaktivní infografiku Uplers
