E-Mail Marketing & Automatioun

Däischter Modus fir E-Mail kritt Adoptioun ... Hei ass wéi Dir et ënnerstëtzen

Däischter Modus reduzéiert Écran Energieverbrauch a erhéicht de Fokus. E puer Benotzer soen och datt se eng reduzéiert Aenbelaaschtung fillen, awer dat ass gefrot ginn.

Däischter Modus Adoptioun wiisst weider. Däischter Modus ass elo verfügbar iwwer macOS, iOS, Android, an eng ganz Partie Apps, dorënner Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail a Reddit. Et gëtt awer net ëmmer voll Ënnerstëtzung iwwer all. Et ass net dacks datt et Fortschrëtter an der E-Mail-Technologie sinn, also ass et flott d'Adoptioun vun der Donkelmodus Support an der E-Mail och ze gesinn.

Mir hunn 28% vun de Benotzer gesinn am Dark Mode am August 2021. Bis August 2022 ass dës Zuel op bal 34% eropgaang.

Litmus

Best Practices verstoen, Code fir ëmzesetzen, a Client Ënnerstëtzung ass kritesch fir Ären Implementéierungssuccès vum Dark Mode. Aus deem Grond huet d'Equipe vun Uplers dëse Guide fir däischter Modus publizéiert E - Mail ënnerstëtzen.

viru kuerzem, DK New Media entwéckelt eng Salesforce Marketing Cloud Schabloun fir e Client deen Dark Mode integréiert huet, dramatesch kontrastéiert d'E-Mail Sektiounen wann se an engem E-Mail Client gekuckt ginn. Et ass en Effort deen zousätzlech Engagement a Klickraten fir Är Abonnente fuere kann.

Däischter Modus E-Mail Code

Schrëtt 1: Maacht Metadaten fir den Däischteren Modus an E-Mail Clienten z'aktivéieren - Den éischte Schrëtt ass den Däischter Modus an der E-Mail z'aktivéieren fir Abonnente mat Däischter Modus Astellungen ageschalt. Dir kënnt dës Metadaten an der tag.

<meta name="color-scheme" content="light dark"> 
<meta name="supported-color-schemes" content="light dark">

Schrëtt 2: Gitt donkel Modus Stiler fir @media (léiwer Faarf-Schema: donkel) - Schreift dës Medieufro an Ärem agebett tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), an Outlook App (iOS). Wann Dir net e skizzéierte Logo an Ärer E-Mail wëllt, kënnt Dir benotzen .dark-img an .light-img Klassen wéi ënnendrënner gewisen.

@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; } 
}

Schrëtt 3: Benotzt de [data-ogsc] Präfix fir de Dark Mode Stiler ze duplizéieren - Gitt dës Coden fir d'E-Mail mat dem Däischtere Modus an der Outlook App fir Android kompatibel ze sinn.

[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; }

Schrëtt 3: Füügt däischter Modus nëmmen Stiler op de Kierper HTML an - Är HTML Tags mussen déi richteg Dark Mode Klassen hunn.

<!-- 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 -->

Email Dark Mode Tipps an zousätzlech Ressourcen

Ech hunn un der Martech Zone alldeeglech a wëchentlech Newslettere fir däischter Modus z'ënnerstëtzen ... gitt sécher abonnéieren. Wéi mat de meeschte E-Mail Kodéierung, ass et net einfach wéinst de verschiddenen E-Mail Clienten an hir propriétaire Kodéierungsmethodologien. Een Thema, op deem ech gerannt sinn, war Ausnahmen ... zum Beispill, Dir wëllt wäiss Text op engem Knäppchen onofhängeg vum donkelen Modus. D'Quantitéit vum Code ass e bësse lächerlech ... Ech hu missen déi folgend Ausnahmen hunn:

@media (prefers-color-scheme: dark ) { 
.dark-mode-button {
	color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } 

E puer zousätzlech Ressourcen:

  • Litmus - den ultimative Guide fir Däischtermodus fir E-Mail Marketing.
  • CampaignMonitor - Den Entwéckler Guide fir däischter Modus fir E-Mail.

Wann Dir wëllt datt Är E-Mail-Templates fir däischter Modus-Ënnerstëtzung ëmgewandelt ginn, zéckt net fir z'erreechen DK New Media.

donkel Modus an E-Mailen
Source: Upler

Douglas Karr

Douglas Karr ass CMO vun OpenINSIGHTS an de Grënner vun der Martech Zone. Den Douglas huet Dosende vun erfollegräiche MarTech Startups gehollef, huet an der Due Diligence vun iwwer $ 5 Bill bei Martech Acquisitioune an Investitiounen gehollef, a weider fir Firmen ze hëllefen fir hir Verkafs- a Marketingstrategien ëmzesetzen an ze automatiséieren. Den Douglas ass en international unerkannten digitale Transformatioun a MarTech Expert a Spriecher. Den Douglas ass och e publizéierten Auteur vun engem Dummie's Guide an e Business Leadership Buch.

Verbonnen Artikelen

Zréck erop zum Knäppchen
Zoumaachen

Adblock entdeckt

Martech Zone ass fäeg Iech dësen Inhalt ouni Käschten ze liwweren, well mir eise Site monetiséieren duerch Ad-Recetten, Partnerlinks a Sponsoren. Mir géifen appreciéieren wann Dir Är Annonce Blocker ewechzehuelen géif wéi Dir eise Site Vue.