De donkere modus voor e-mail wordt steeds populairder... Hier leest u hoe u dit kunt ondersteunen
De donkere modus vermindert het energieverbruik van het scherm en vergroot de focus. Sommige gebruikers geven ook aan dat ze minder vermoeide ogen voelen, maar dat is ook zo ondervraagd.
De adoptie van de donkere modus blijft groeien. De donkere modus is nu beschikbaar voor macOS, iOS, Android en een groot aantal apps, waaronder Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail en Reddit. Er is echter niet altijd volledige ondersteuning voor elk van hen. Het komt niet vaak voor dat er vooruitgang wordt geboekt in de e-mailtechnologie, dus het is leuk om te zien dat de ondersteuning voor de donkere modus ook in e-mail wordt overgenomen.
In augustus 28 zagen we dat 2021% van de gebruikers in de donkere modus keek. In augustus 2022 was dat aantal gestegen tot bijna 34%.
Lakmoes
Het begrijpen van best practices, te implementeren code en klantondersteuning is van cruciaal belang voor het succes van uw implementatie van de donkere modus. Om die reden heeft het team van Uplers deze gids voor de donkere modus gepubliceerd E-mail ondersteuning.
Onlangs DK New Media ontwikkelde een Salesforce Marketing Cloud-sjabloon voor een klant waarin de donkere modus was geïntegreerd, waardoor de e-mailsecties dramatisch contrasteerden wanneer ze in een e-mailclient werden bekeken. Het is een inspanning die kan leiden tot extra betrokkenheid en klikfrequenties voor uw abonnees.
E-mailcode voor donkere modus
Stap 1: Voeg metagegevens toe om de donkere modus in e-mailclients in te schakelen – De eerste stap is het inschakelen van de donkere modus in de e-mail voor abonnees met ingeschakelde instellingen voor de donkere modus. U kunt deze metagegevens opnemen in het label.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Stap 2: Voeg stijlen in de donkere modus toe voor @media (voorkeur-kleurenschema: donker) - Schrijf deze mediaquery in uw embedded tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) en Outlook-app (iOS). Als u geen omlijnd logo in uw e-mail wilt, kunt u dit gebruiken .dark-img
en .light-img
klassen zoals hieronder weergegeven.
@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; }
}
Stap 3: Gebruik het voorvoegsel [data-ogsc] om stijlen in de donkere modus te dupliceren - Voeg deze codes toe zodat de e-mail compatibel is met de donkere modus in de Outlook-app voor 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; }
Stap 3: Voeg alleen stijlen in de donkere modus toe aan de hoofdtekst-HTML - Uw HTML-tags moeten de juiste donkere modusklassen hebben.
<!-- 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 -->
E-mail de Dark Mode-tips en aanvullende bronnen
Ik heb gewerkt aan de Martech Zone dagelijkse en wekelijkse nieuwsbrieven ter ondersteuning van de donkere modus… zorg ervoor dat u dat doet abonneer u hier. Zoals bij de meeste e-mailcodering is dit niet eenvoudig vanwege de verschillende e-mailclients en hun eigen codeermethoden. Een probleem dat ik tegenkwam waren uitzonderingen… je wilt bijvoorbeeld witte tekst op een knop, ongeacht de donkere modus. De hoeveelheid code is een beetje belachelijk… Ik moest de volgende uitzonderingen hebben:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Enkele aanvullende bronnen:
- Lakmoes - de ultieme gids voor donkere modus voor e-mailmarketeers.
- CampaignMonitor – de ontwikkelaarshandleiding voor de donkere modus voor e-mail.
Als u uw e-mailsjablonen wilt converteren voor ondersteuning in de donkere modus, aarzel dan niet om contact op te nemen DK New Media.