Tmavý režim bol spustený len pred niekoľkými rokmi a jeho adopcia stále rastie. Tmavý režim je teraz k dispozícii pre systémy macOS, iOS a Android a tiež pre množstvo aplikácií vrátane Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail a Reddit. Nie vždy však existuje úplná podpora.
Tmavý režim znižuje spotrebu energie na obrazovke a zvyšuje zaostrenie. Niektorí používatelia tiež tvrdia, že cítia zníženie namáhania očí, ale to je tak boli vypočutí.
Nedávno sme vyvinuli šablónu Marketing Cloud, ktorá do svojho kódu začlenila režim Dark Mode, vďaka čomu sú e-mailové sekcie skutočne dramaticky kontrastné pri prezeraní v e-mailovom klientovi. Je to úsilie, ktoré môže pre vašich predplatiteľov zvýšiť mieru zapojenia a miery prekliknutia.
Nestáva sa často, aby došlo k pokroku v oblasti e-mailových technológií, takže je pekné vidieť prijatie tejto skúsenosti v celom odbore. Pochopenie osvedčených postupov, kód na implementáciu, ako aj podpora klientov je pre vašu úspešnosť implementácie tmavého režimu rozhodujúce. Z tohto dôvodu vydal tím Uplers túto príručku pre e-mailová podpora v tmavom režime.
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 povolenie tmavého režimu v e-maile pre predplatiteľov, ktorí majú zapnuté nastavenie tmavého režimu. Môžete tak urobiť zahrnutím týchto metadát do súboru značka.
<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 vo svojom e-maile nechcete mať obrysové logo, môžete použiť triedy .dark-img a .light-img, 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 nezabudnite na denné a týždenné informačné vestníky na podporu tmavého režimu prihlásiť sa tu. Rovnako ako pri väčšine kódovaní e-mailov nejde o jednoduchý proces kvôli rôznym e-mailovým klientom a ich proprietárnym metodikám kódovania. Jedným z problémov, s ktorým som sa stretol, boli výnimky ... napríklad chcete, aby bol na tlačidle biely text 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 - vývojársky sprievodca tmavým režimom pre e - mail.
Zobraziť interaktívnu infografiku spoločnosti Uplers
