E-mail marketing e automazione

La modalità oscura per la posta elettronica sta guadagnando adozione... Ecco come supportarla

La modalità oscura riduce il consumo energetico dello schermo e aumenta la messa a fuoco. Alcuni utenti affermano anche di avvertire un ridotto affaticamento degli occhi, ma è così stato interrogato.

L’adozione della modalità oscura continua a crescere. La modalità oscura è ora disponibile su macOS, iOS, Android e una serie di app, tra cui Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail e Reddit. Tuttavia, non c'è sempre il pieno supporto per ciascuno di essi. Non capita spesso che ci siano progressi nella tecnologia della posta elettronica, quindi è bello vedere l'adozione del supporto della modalità oscura anche nella posta elettronica.

Nell'agosto 28 abbiamo riscontrato che il 2021% degli utenti utilizzava la modalità oscura. Nell'agosto 2022, tale numero era aumentato fino a quasi il 34%.

Tornasole

Comprendere le best practice, il codice da implementare e il supporto client è fondamentale per il successo dell'implementazione della modalità oscura. Per questo motivo il team di Uplers ha pubblicato questa guida alla modalità oscura supporto via email.

Recentemente, DK New Media ha sviluppato un modello Salesforce Marketing Cloud per un cliente che incorporava la modalità oscura, contrastando notevolmente le sezioni dell'e-mail quando visualizzate in un client di posta elettronica. È uno sforzo che può aumentare il coinvolgimento e le percentuali di clic per i tuoi abbonati.

Codice e-mail in modalità oscura

Passaggio 1: includi i metadati per abilitare la modalità oscura nei client di posta elettronica – Il primo passaggio è abilitare la modalità oscura nell'e-mail per gli abbonati con le impostazioni della modalità oscura attivate. Puoi includere questi metadati nel file etichetta.

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

Passaggio 2: includi gli stili della modalità scura per @media (preferisce lo schema dei colori: scuro) - Scrivi questa media query nel tuo file tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) e l'app Outlook (iOS). Se non desideri un logo delineato nella tua email, puoi utilizzare .dark-img ed .light-img classi come mostrato di seguito.

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

Passaggio 3: utilizzare il prefisso [data-ogsc] per duplicare gli stili in modalità oscura - Includere questi codici affinché l'e-mail sia compatibile con la modalità oscura nell'app Outlook per 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; }

Passaggio 3: includi stili solo in modalità oscura nel corpo HTML - I tag HTML devono avere le classi di modalità oscura corrette.

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

Suggerimenti per la modalità scura e-mail e risorse aggiuntive

Ho lavorato su Martech Zone newsletter giornaliere e settimanali per supportare la modalità oscura... assicurati di farlo iscriviti qui. Come per la maggior parte della codifica della posta elettronica, non è semplice a causa dei diversi client di posta elettronica e delle relative metodologie di codifica proprietarie. Un problema che ho riscontrato riguardava le eccezioni... ad esempio, vuoi il testo bianco su un pulsante indipendentemente dalla modalità oscura. La quantità di codice è un po’ ridicola... ho dovuto avere le seguenti eccezioni:

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

Alcune risorse aggiuntive:

  • Tornasole - la guida definitiva per la modalità oscura per gli operatori di email marketing.
  • CampaignMonitor – la guida per sviluppatori alla modalità oscura per la posta elettronica.

Se desideri che i tuoi modelli di posta elettronica vengano convertiti per il supporto della modalità oscura, non esitare a contattarci DK New Media.

modalità oscura nelle e-mail
Fonte: Upler

Douglas Karr

Douglas Karr è CMO di ApriINSIGHTS e il fondatore della Martech Zone. Douglas ha aiutato dozzine di startup MarTech di successo, ha assistito nella due diligence di oltre 5 miliardi di dollari in acquisizioni e investimenti Martech e continua ad assistere le aziende nell'implementazione e nell'automazione delle loro strategie di vendita e marketing. Douglas è un esperto e relatore di trasformazione digitale e MarTech riconosciuto a livello internazionale. Douglas è anche autore di una guida per manichini e di un libro sulla leadership aziendale.

Articoli Correlati

Torna a pulsante in alto
Chiudi

Blocco annunci rilevato

Martech Zone è in grado di fornirti questi contenuti gratuitamente perché monetizziamo il nostro sito attraverso entrate pubblicitarie, link di affiliazione e sponsorizzazioni. Ti saremmo grati se rimuovessi il blocco degli annunci mentre visiti il ​​nostro sito.