Anteprima e ottimizzazione dell'aspetto del design delle e-mail in modalità scura

Molti client di posta elettronica hanno un'impostazione di modalità scura, che può portare a incongruenze con la visualizzazione delle e-mail di marketing nei client con un aspetto più luminoso attivato.

Attivare l'anteprima in modalità scura nell'editor delle e-mail

Per passare a un'anteprima in modalità scura dell'e-mail mentre la si sta progettando:

1. Nel tuo account HubSpot, vai a Marketing > E-mail.
2. Fare clic sul nome di un'e-mail in fase di progettazione.
3. Nella parte superiore dell'editor di e-mail, fare clic su Opzioni di visualizzazione, quindi attivare l'opzione Anteprima in modalità scura .

Anteprima dell'aspetto dell'e-mail in specifiche modalità scure del client

Per vedere come apparirà l'e-mail quando un contatto la aprirà in un browser o in un client con la modalità scura abilitata:

1. Nel tuo account HubSpot, vai a Marketing > E-mail.
2. Fare clic sul nome di un'e-mail esistente.
3. In alto a destra nell'editor di e-mail, fare clic su Anteprima e test, quindi selezionare Anteprima posta in arrivo.
4. Nella parte superiore della schermata di anteprima, fare clic su Clienti.
5. In Modalità scura, selezionarela casella di controllo accanto al client di cui si desidera visualizzare l'anteprima.

6. In alto a destra, fare clic su Prova l'e-mail ora.

Migliori pratiche per la progettazione delle e-mail in modalità scura

Quando si visualizza l'anteprima dell'e-mail con diversi client in modalità scura, tenere presente che ogni client può visualizzare l'e-mail in modo diverso. Ad esempio, se i contatti aprono l'e-mail con Apple E-mail, questa apparirà esattamente come prima, indipendentemente dal fatto che abbiano attivato o meno la modalità scura. Se invece un contatto attiva la modalità scura in app come Gmail o Outlook su Windows, si possono notare differenze più drastiche nello stile delle e-mail, come ad esempio colori di sfondo invertiti.

Per verificare che lo stile delle e-mail sia coerente tra i vari client, recensite i suggerimenti riportati di seguito.

Utilizzate immagini che appaiano chiaramente sia su sfondi chiari che scuri

Convertite le immagini in file PNG prima di caricarle e aggiungerle alle e-mail, in modo da garantire che vengano visualizzate nei client di posta elettronica che invertono automaticamente il colore di sfondo delle e-mail in modalità scura. Se l'immagine contiene del testo, ad esempio un logo, è possibile aggiungere un contorno traslucido intorno al testo per farlo risaltare.

Iscriversi a colori accessibili al web

Progettare i contenuti delle e-mail in modo che siano accessibili è importante indipendentemente dal client e-mail utilizzato dal destinatario. Rispettare gli standard di accessibilità, ad esempio controllando il contrasto di colore del testo, aiuterà le e-mail a essere visualizzate correttamente anche in modalità scura. Per saperne di più sui colori accessibili sul web, consultate il blog di HubSpot.

Specificare una media query per lo stile in modalità scura in iOS

Diversi client di posta elettronica, tra cui E-mail e Outlook.com, offrono un supporto limitato per il rilevamento e l'aggiunta di stili personalizzati tramite una media query. Se si utilizza l'editor di posta elettronica classico aggiornato e si dispone di risorse per apportare modifiche CSS alle e-mail, è possibile aggiungere una media query con la funzione prefers-color-scheme media per configurare l'aspetto di immagini e testo in modalità scura e chiara.