Come stupire facilmente ogni abbonato con un'immagine di sfondo dell'e-mail (+ il codice per farlo!)

Pubblicato: 2021-07-23

Le e-mail possono sembrare un po' prevedibili con un'immagine qui, un blocco di testo lì... Un modo per ravvivare l'esperienza dell'abbonato? Immagini di sfondo. Sono inaspettati e aggiungono un'altra dimensione al tuo design, facendo "esplodere" le tue e-mail. Se fatti bene, fanno sembrare la tua email un milione di dollari, ma sono incredibilmente facili da realizzare.

Continua a leggere per:

I vantaggi delle immagini di sfondo
Esempi di email stimolanti
Considerazioni sul design
Come codificare le immagini di sfondo

Cosa sono le immagini di sfondo? (E qual è il punto?)

Le immagini di sfondo sono immagini che vengono applicate allo sfondo di, o dietro, un elemento. Invece di essere un punto focale principale dell'e-mail, come l'immagine di un eroe, sono più spesso sottili e complementari agli altri contenuti della campagna.

Il vantaggio principale dell'utilizzo delle immagini di sfondo è che ti consentono di posizionare contenuto HTML aggiuntivo su di esse. A differenza di altre immagini, in cui solo l'immagine stessa può esistere in quello spazio, le immagini di sfondo offrono possibilità di stratificazione, quindi puoi avere immagini extra, testo o inviti all'azione (CTA) esistenti all'interno dello stesso spazio.

esempio di testo HTML live e un pulsante a prova di proiettile su un'immagine di sfondo

L'utilizzo di testo HTML live sopra un'immagine di sfondo, invece di includere quel testo come parte dell'immagine, significa che il tuo messaggio è leggibile quando le immagini sono disattivate, rendendo questa un'ottima tecnica per creare e-mail HTML migliori e più accessibili.

Oltre ad aiutare a creare campagne che forniscono una migliore esperienza di lettura, le immagini di sfondo offrono anche una vasta gamma di possibilità di design, distinguendo la tua campagna dalla concorrenza.

Modi creativi in cui i marchi utilizzano le immagini di sfondo

Miro ha posizionato un'immagine di sfondo contenente delle forme dietro la sezione degli eroi, attirando l'attenzione sul titolo e sui messaggi principali dell'e-mail, sovrapposti utilizzando il testo in tempo reale.

Email Miro con immagine di sfondo — Fonte: email davvero buone

Uplers ha utilizzato un'immagine di sfondo per evidenziare uno sconto sui propri servizi, con un'immagine del coupon posizionata dietro un codice coupon.

Immagine di sfondo dell'e-mail di Uplers per il codice coupon — Fonte: email davvero buone

Figma ha aggiunto un sottile motivo di sfondo ripetuto al corpo di questa e-mail, presentandoci il loro nuovo prodotto di lavagna. Il motivo che presentano riecheggia lo sfondo trovato nel prodotto.

Immagine di sfondo Figma nell'e-mail — Visualizza questa email in Litmus Builder

Chipotle ha posizionato un'immagine di sfondo enorme dietro questo eroe jumbo di grande impatto e l'area del corpo, inclusa la fotografia del prodotto e un motivo a linee. Sopra questa immagine, hanno una GIF animata con sfondo trasparente e testo in tempo reale nell'area del corpo.

Chipotle Friendsgiving e-mail con un'immagine di sfondo sottile — Fonte: email davvero buone

Le GIF animate possono essere utilizzate anche come immagini di sfondo, come questo esempio di Adobe Stock , che promuovono raccolte festive con contenuti eroici, tra cui testo dal vivo e un pulsante CTA posizionato sopra lo sfondo animato.

Email Adobe Stock con immagine di sfondo GIF animata — Fonte: email davvero buone

Considerazioni sul design

Quando si pensa all'implementazione di immagini di sfondo, ci sono alcune considerazioni di progettazione che vale la pena prendere in considerazione.

Contrasto

Per garantire che tutti i lettori ottengano il valore del contenuto sovrapposto alle immagini di sfondo, è importante prestare attenzione ai contrasti. Tratta l'immagine più o meno allo stesso modo di un colore piatto e confronta i colori dell'immagine con i colori del contenuto.

Se progetti utilizzando Figma, puoi aggiungere plug-in come Color Blind e Contrast per vedere se stai rispettando le linee guida per l'accessibilità dei contenuti Web (WCAG). Ci sono anche una serie di app web, come Contrast Checker di WebAim, dove puoi testare i colori nei tuoi progetti.

Semplicità

Un altro modo per garantire la leggibilità è mantenere le cose semplici. Gli sfondi occupati possono rendere difficile ottenere il valore di qualsiasi testo live che metti sull'immagine. Quindi è spesso utile considerare l'immagine di sfondo come un miglioramento piuttosto che una caratteristica.

Ripieno a tinta unita

Poiché non tutti i client di posta elettronica rispettano le immagini di sfondo, progetta un fallback a tinta unita. Gli abbonati che utilizzano client di posta elettronica che non supportano le tue immagini possono comunque vivere un'ottima esperienza con un colore a tinta unita. Assicurati di scegliere un colore di riserva che corrisponda al tuo design e contrasti bene con i suoi elementi in primo piano.

Come codificare le immagini di sfondo nelle e-mail

Prima di esaminare il codice, vediamo quali client eseguiranno il rendering dello stile CSS in background e quali necessitano dell'aiuto di un fallback VML.

La buona notizia: il supporto per CSS in linea in background è migliorato, con i client webmail che ora supportano completamente questo metodo, il che significa che l'attributo HTML di sfondo non è più necessario.

La cattiva notizia: Sfortunatamente, a Windows 10 Mail non piacciono le immagini di sfondo. Non renderà il CSS in linea o l'attributo di sfondo HTML deprecato. E l'applicazione di VML causerà problemi di rendering con un messaggio di errore "l'immagine non può essere visualizzata".

Se sei preoccupato per l'esperienza che ottengono gli abbonati a Windows 10 Mail, considera di escludere il VML. Ciò garantisce che i colori di sfondo di riserva offrano al pubblico di Microsoft Outlook Suite un'ottima esperienza di lettura della posta elettronica, senza decorazioni extra.

come appaiono le immagini di sfondo delle email in Windows 10 Mail

Supporto client di posta elettronica per le immagini di sfondo

Client di posta elettronica	Utilizzo di CSS in linea	Utilizzo di VML
Posta Apple 14	✓	?
Office 365 (Mac)	✓	?
Office 365 (Windows)	?	✓
Outlook 2016 (macOS 10.12.6)	✓	?
Outlook 2013, 2016, 2019 (Windows 10)	?	✓
Posta di Windows 10	?	?
Applicazione Gmail (Android 10)	✓	?
Applicazione Gmail (iOS 13.4.1)	✓	?
Outlook (Android 7.0)	✓	?
Outlook (iOS 12.0)	✓	?
Posta Samsung (Android 7.0)	✓	?
iPad 11 Air (Gen 4 iOS 14.2)	✓	?
iPhone 12 (iOS 14.2)	✓	?
Posta AOL (Edge)	✓	?
Gmail (Chrome)	✓	?
Ufficio 365	✓	?
Outlook.com	✓	?
Yahoo! posta	✓	?

Quali client di posta usano i tuoi iscritti?

Dai un'occhiata alla tua quota di mercato del client di posta elettronica con Litmus Email Analytics. Scopri per quali client di posta hai bisogno di ottimizzare le tue immagini di sfondo. (Suggerimento: se Windows 10 Mail è basso, non preoccuparti.)

Scopri di più →

Ora che l'abbiamo tolto di mezzo, parliamo di codice!

Una delle cose divertenti di portare immagini di sfondo nelle tue e-mail è che ci sono diversi modi in cui puoi raggiungere questo obiettivo. Puoi riempire una piccola sezione o coprire il corpo dell'e-mail, utilizzare una singola immagine o uno schema ripetuto e puoi cambiare le immagini di sfondo a seconda che il tuo lettore sia su desktop, dispositivo mobile, modalità chiara, modalità scura o anche quando si librano o rotolano sulla tua immagine.

Ogni tecnica richiede un approccio diverso, quindi diamo un'occhiata ai modi migliori per codificarli.

Immagine di sfondo definita in larghezza o fissa

sfondo a larghezza fissa

Quando si applicano le immagini di sfondo, è sempre meglio aggiungere il codice alla cella della tabella contenente. È improbabile che l'applicazione a qualsiasi altro elemento HTML come <table> o <body> ottenga supporto da alcuni client di posta elettronica. Ecco come dovrebbe apparire:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Qui, l'immagine viene adattata alla larghezza e all'altezza della cella includendo background-size:cover negli stili CSS in linea e quindi posizionata al centro. L'aggiunta di questi stili ti consente di utilizzare un'immagine 2x, il che significa che vedrai un rendering nitido sui display retina, e verrà ridimensionata per adattarsi perfettamente al tuo contenitore, anche quando il contenitore si ridimensiona per il rendering su dispositivi diversi.

Tuttavia, questo significa anche che se l'immagine è troppo piccola o non dimensionata proporzionalmente al contenitore, potrebbe apparire pixelata o allungata. Soprattutto se si tratta di fotografia.

La tua immagine di sfondo funziona?

Scopri come funziona il nostro codice per le immagini di sfondo nella tua e-mail nelle app di posta elettronica più popolari come Gmail e Outlook.

Scopri di più →

Oggi, la maggior parte dei client di posta elettronica supporta lo stile di sfondo CSS in linea, quindi puoi aggiungere l'immagine di sfondo e il colore di fallback utilizzando la proprietà CSS abbreviata dello sfondo. In altre parole, applicali semplicemente allo stile "sfondo". Sfortunatamente, l'ulteriore stile di sfondo non funziona molto bene con la stenografia durante la codifica in linea, quindi qualsiasi posizionamento o dimensionamento dovrebbe essere scritto come stili separati. Ad esempio, utilizzando background-position: center; dimensione dello sfondo: 80%; al posto dello sfondo: centro/80%; .

Far funzionare questo in Outlook con un fallback VML

Anche Outlook e Office 365 per desktop necessitano di un piccolo aiuto per visualizzare le immagini di sfondo, poiché anche loro non eseguiranno il rendering degli stili di sfondo CSS. Per visualizzare la nostra immagine di sfondo in questi client di posta elettronica, dobbiamo sfruttare una tecnica resa popolare da Stig Morten Myre per Campaign Monitor e applicare Vector Markup Language (VML) di Microsoft.

Prendendo il codice che abbiamo già creato, posizioniamo il VML richiesto e un <div> contenente all'interno della nostra cella della tabella:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

Per le immagini che devono riempire il contenitore senza essere ripetute, è necessario utilizzare 'frame' all'interno del tag vml:fill. In questo modo, puoi utilizzare immagini 2x all'interno di questo tag. Assicurati solo di impostare la larghezza del tuo contenitore usando lo stile in linea sul tag v:rect (nell'esempio sopra, è impostato su 600px).

Se desideri il riempimento sul tuo contenitore, qualcosa che potresti trovare sta posizionando il VML all'interno del contenitore farà collassare il riempimento. Il modo in cui risolviamo questo problema è avvolgere il VML attorno al nostro contenitore, quindi dobbiamo annidare il nostro contenitore all'interno di un'altra tabella in questo modo:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

Immagine di sfondo ripetuta

Puoi anche aggiungere uno sfondo che si ripete all'interno del contenitore in cui lo posizioni. Un ottimo esempio è ripetere uno schema in tutto il corpo della tua email.

esempio di immagine di sfondo ripetuta

Se l'immagine che posizioniamo nella nostra cella contenitore è più piccola del contenitore, si ripeterà automaticamente sia in orizzontale che in verticale. Per ripetere in una sola direzione, applica lo stile con CSS 'background-repeat' e aggiungi il valore repeat-x per ripetere orizzontalmente o repeat-y per ripetere verticalmente.

Per riempire l'intero contenitore con uno schema completamente ripetuto, il codice è molto semplice:

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

Far funzionare questo in Outlook con un fallback VML

Ancora una volta, se desideri vedere il rendering in background nei client Outlook, puoi applicare VML. Il codice è leggermente diverso questa volta, con il VML posizionato prima del contenitore:

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

Per ripetere lo sfondo, popola il tag v:fill con il tipo 'tile'. Nessuna sorpresa, ci sono alcuni problemi di rendering con Windows 10 Mail e, con sfondi ripetuti, i problemi di rendering possono essere molto più sgradevoli. Quindi, escludere il VML potrebbe essere l'approccio più sicuro se si dispone di abbonati a Windows 10 Mail.

Tecniche avanzate

Le immagini di sfondo fisse e ripetute offrono molte opportunità per migliorare i tuoi progetti di posta elettronica, ma c'è di più:

Scambio immagine a contrasto

Ora che la modalità oscura è disponibile in più client di posta elettronica e rispettare le preferenze degli abbonati ti aiuta a raggiungere un pubblico più ampio e creare fiducia, cambiare l'immagine di sfondo è un ottimo modo per completare un design in modalità chiara o scura. Ed è anche un miglioramento semplice e divertente.

modalità di contrasto

Per implementare ciò, è necessario aggiungere alcuni CSS incorporati alle query multimediali in modalità oscura. Ciò assicurerà che l'immagine di sfondo in modalità oscura venga servita all'interno dei client di posta elettronica che supporteranno questo tipo di query multimediale:

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

Vale la pena aggiungere un colore di riserva scuro. Ciò aiuterà con i client di posta elettronica che non caricheranno le immagini senza che il lettore agisca e assicurerà che il tuo messaggio possa essere letto quando l'immagine non è stata caricata.

Ora, nel tuo HTML, applica la tua classe alla cella contenente l'immagine di sfondo in modalità luce. Semplice!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Prendi nota : qualcosa per cui è difficile progettare, e ancora più difficile da codificare, sono i client di posta elettronica che invertono i colori della tua e-mail in un ambiente in modalità oscura, ignorando completamente tutto il duro lavoro che metti nella scrittura di query multimediali in modalità oscura.

È quasi impossibile ottenere questi client di posta elettronica. Tuttavia, puoi giocare con immagini di sfondo che hanno un livello di trasparenza e applicare un colore di sfondo ad alto contrasto al tuo contenitore, come il bianco per la modalità chiara e il nero per la modalità scura. Ciò consentirà di invertire il colore di sfondo. Ho provato questo con il prossimo esempio:

immagine di sfondo della posta elettronica in diversi scenari della modalità oscura

La mia immagine di sfondo chevron ha un'opacità del 30% sulle frecce ed è completamente trasparente tra di loro. Ciò significa che quando i client di posta elettronica offensivi prendono il controllo del mio rendering in modalità oscura, il contenuto è leggibile.

Per ulteriori informazioni sulla codifica per la modalità oscura e il supporto del client di posta elettronica, consulta la nostra guida definitiva all'e-mail in modalità oscura.

Sfondo interattivo

Che ne dici di deliziare gli abbonati con un po' di interattività? Puoi diffondere un po' di gioia con un semplice effetto hover o rollover, cambiando lo sfondo del tuo contenitore mentre il lettore sposta il cursore sul tuo contenuto.

l'immagine di sfondo dell'email cambia al passaggio del mouse o al passaggio del mouse

Hai bisogno di un po' di CSS incorporato per farlo funzionare. Inserisci questo all'interno del tuo tag <style>:

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

Ora tutto ciò che devi fare è applicare questa classe alla cella della tabella, in questo modo:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Fai salire di livello i tuoi progetti

Con una vasta gamma di opportunità, l'utilizzo di immagini di sfondo per migliorare i design delle tue e-mail è un ottimo modo per spingere la busta e far risaltare le tue e-mail tra la folla. Per aiutarti a mettere in pratica queste tecniche, abbiamo creato una pratica risorsa in cui puoi prendere il codice presente in questo post.

Ci piacerebbe vedere come usi le immagini di sfondo nelle tue e-mail: condividi i tuoi esempi nei commenti qui sotto.

Assicurati che le tue immagini di sfondo funzionino con Litmus

Ha funzionato? Visualizza in anteprima le tue immagini di sfondo (e il resto della tua email) in oltre 100 client di posta elettronica, app e dispositivi con Litmus. E saluta le e-mail on-brand e prive di errori.

Inizia la tua prova gratuita →

Pubblicato originariamente il 24 maggio 2019 da Jason Rodriguez. Ultimo aggiornamento 21 luglio 2021.

Come stupire facilmente ogni abbonato con un'immagine di sfondo dell'e-mail (+ il codice per farlo!)

Cosa sono le immagini di sfondo? (E qual è il punto?)

Modi creativi in ​​cui i marchi utilizzano le immagini di sfondo

Considerazioni sul design

Contrasto

Semplicità

Ripieno a tinta unita

Come codificare le immagini di sfondo nelle e-mail

Immagine di sfondo definita in larghezza o fissa

Far funzionare questo in Outlook con un fallback VML

Immagine di sfondo ripetuta

Far funzionare questo in Outlook con un fallback VML

Tecniche avanzate

Scambio immagine a contrasto

Sfondo interattivo

Fai salire di livello i tuoi progetti

Modi creativi in cui i marchi utilizzano le immagini di sfondo