Tmavý režim pre e-maily získava prijatie... Tu je návod, ako ho podporiť
Tmavý režim znižuje spotrebu energie obrazovky a zvyšuje zaostrenie. Niektorí používatelia tiež uvádzajú, že pociťujú zníženú únavu očí, ale je to tak boli vypočutí.
Adopcia tmavého režimu stále rastie. Tmavý režim je teraz k dispozícii pre macOS, iOS, Android a množstvo aplikácií vrátane Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail a Reddit. Nie vždy však existuje úplná podpora v každom z nich. Nestáva sa často, že by došlo k pokroku v e-mailovej technológii, takže je pekné vidieť prijatie podpory tmavého režimu aj v e-mailoch.
V auguste 28 sme videli 2021 % používateľov, ktorí pozerali v tmavom režime. Do augusta 2022 sa toto číslo zvýšilo na takmer 34 %.
Lakmus
Pochopenie osvedčených postupov, kódu na implementáciu a podpory klienta je rozhodujúce pre úspech implementácie tmavého režimu. Z tohto dôvodu tím v Uplers zverejnil túto príručku pre tmavý režim e-mailovú podporu.
Nedávno, DK New Media vyvinula šablónu Salesforce Marketing Cloud pre klienta, ktorá zahŕňala tmavý režim, čím výrazne kontrastovala sekcie e-mailov pri zobrazení v e-mailovom klientovi. Je to úsilie, ktoré môže vašim odberateľom podnietiť ďalšie zapojenie a miery prekliknutia.
E-mailový kód v tmavom režime
Krok 1: Zahrnutím metadát povolíte tmavý režim v e-mailových klientoch – Prvým krokom je povoliť tmavý režim v e-maile pre odberateľov so zapnutými nastaveniami tmavého režimu. Tieto metadáta môžete zahrnúť do súboru tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Krok 2: Zahrňte štýly tmavého režimu pre @media (preferovaná farebná schéma: tmavá) - Tento mediálny dopyt napíšte do svojho vloženého súboru tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) a Outlook App (iOS). Ak nechcete mať vo svojom e-maile načrtnuté logo, môžete použiť .dark-img
a .light-img
triedy, ako je uvedené nižšie.
@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: Na duplikovanie štýlov tmavého režimu použite predponu [data-ogsc] - Zahrňte tieto kódy, aby bol e-mail kompatibilný s tmavým režimom v aplikácii Outlook pre 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 tela HTML štýly iba tmavého režimu - Vaše značky HTML musia mať správne triedy tmavé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 ďalšie zdroje e-mailom v tmavom režime
Pracoval som na Martech Zone denné a týždenné informačné bulletiny na podporu tmavého režimu... určite prihlásiť sa tu. Rovnako ako u väčšiny kódovania e-mailov to nie je jednoduché kvôli rôznym e-mailovým klientom a ich vlastným metodológiám kódovania. Jeden problém, na ktorý som narazil, boli výnimky... napríklad chcete biely text na tlačidle bez ohľadu na tmavý režim. Množstvo kódu je trochu smiešne... Musel som mať nasledujúce výnimky:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Niektoré ďalšie zdroje:
- Lakmus - dokonalý sprievodca tmavým režimom pre e-mailových obchodníkov.
- Monitor kampane – príručka vývojára pre tmavý režim pre e-mail.
Ak chcete svoje e-mailové šablóny previesť na podporu tmavého režimu, neváhajte nás kontaktovať DK New Media.