Consegna dell'Episodio 4: Comprensione delle immagini di sfondo nelle e-mail

In questo episodio di Delivering, daremo un'occhiata a una tecnica essenziale per i designer di posta elettronica: l'immagine di sfondo umile ma potente. Scopri perché le immagini di sfondo sono importanti, come codificarle utilizzando una varietà di tecniche e come questi vari metodi si confrontano tra diversi client di posta elettronica. Questo episodio è un compagno della nostra Guida definitiva alle immagini di sfondo nelle e-mail recentemente aggiornata. Dai un'occhiata per suggerimenti, trucchi e codice.

Assicurati di iscriverti a Delivering su iTunes o Spotify per ascoltare gli episodi futuri e partecipare alla conversazione su Twitter utilizzando l'hashtag #DeliveringPodcast.

Trascrizione dell'episodio

Esistono molti modi per aggiungere elementi visivi interessanti alle campagne e-mail.

Sebbene i CSS consentano molte opzioni di stile diverse, a volte hai solo bisogno di una buona immagine. Ma qual è il modo migliore per utilizzare le immagini nelle e-mail? In questo episodio di Delivering, daremo un'occhiata a una tecnica essenziale per i designer di posta elettronica: l'immagine di sfondo umile ma potente.

Sono Jason Rodriguez e benvenuto in Delivering, un podcast sull'email marketing e il suo posto nel mondo. La consegna è offerta da Litmus, la piattaforma leader del settore per gli e-mail marketer. Unisciti a oltre 600.000 professionisti della posta elettronica che utilizzano Litmus per creare, rivedere, testare e monitorare migliori campagne di email marketing. Scopri di più e ottieni una prova gratuita di 7 giorni su Litmus.com.

Le immagini sono un elemento fondamentale delle campagne di email marketing. Sono utilizzati per scatti di prodotti, illustrazioni carine, loghi, icone e, in alcuni casi, per l'intera e-mail stessa. Soprattutto nel mondo della vendita al dettaglio, i professionisti del marketing sono inclini a progettare campagne interamente con strumenti come Photoshop, suddividere quelle immagini e scaricarle in HTML prima di inviarle agli abbonati. Tutte le informazioni (titoli, testi, inviti all'azione e altro) sono contenute nelle immagini.

È un buon modo per aderire alle linee guida del marchio e produrre rapidamente e-mail, ma l'utilizzo delle immagini in questo modo presenta alcuni importanti inconvenienti.

Il primo è che molti client di posta elettronica disabilitano le immagini per impostazione predefinita. Le immagini, e tutto il contenuto, in un'e-mail vengono letteralmente lasciate scaricate dal client di posta elettronica, risultando in campagne vuote che sembrano interrotte a molti abbonati.

Il secondo è che gli abbonati che utilizzano la tecnologia assistiva, come il software di lettura dello schermo, non saranno in grado di visualizzare il contenuto dell'e-mail.

In entrambi i casi, tutte le copie, le offerte e il valore che hai impiegato del tempo a inserire nella tua campagna e-mail sono essenzialmente andati sprecati. Ci deve essere una soluzione migliore, giusto?

Inserisci le immagini di sfondo.

Le immagini di sfondo sono semplicemente immagini, come qualsiasi altra in un'e-mail. Sono file caricati su un server e collegati in codice. La differenza è che le immagini di sfondo non vengono applicate con un tag immagine HTML, ma come attributo o CSS su altri elementi HTML.

Esistono quattro modi per codificare le immagini di sfondo, ciascuno con i propri pro e contro.

Il primo e più tradizionale metodo consiste nell'applicare l'attributo background a una cella di tabella. Il valore dell'attributo è solo l'URL che punta all'immagine. Questo metodo è interessante perché è abbastanza ben supportato tra i client di posta elettronica. Il principale difetto, tuttavia, è che non è molto flessibile. Non puoi controllare il dimensionamento della tua immagine di sfondo e l'immagine, per impostazione predefinita, si ripeterà attraverso il tuo elemento.

Puoi anche caricare immagini di sfondo usando CSS. Le due tecniche seguenti utilizzano lo stesso metodo, ma vengono applicate in modo diverso.

I CSS hanno una serie di proprietà di sfondo, in particolare: background-image, background-repeat, background-position, background-size e background-color. C'è anche la proprietà abbreviata di sfondo super utile.

Utilizzando queste proprietà, puoi includere l'URL di un'immagine, controllare come è posizionata l'immagine e se si ripete o meno, nonché includere un colore di fallback per quando le immagini non vengono caricate.

Il primo modo per utilizzare gli sfondi CSS è incorporare tali proprietà in un blocco di stile nell'intestazione della tua email. Basta indirizzare un elemento HTML come una cella di tabella o un div e farlo. Questo metodo è facile da codificare, leggere e gestire, ma gli stili incorporati non sono supportati in tutti i client di posta elettronica.

Un metodo più affidabile consiste nell'includere tali proprietà in linea nell'elemento HTML. Questo può diventare disordinato se stai usando immagini di sfondo su più elementi ma, dal momento che siamo fanatici della posta elettronica e siamo abituati a usare immagini in linea, è ancora perfettamente gestibile.

L'ultimo modo per includere immagini di sfondo in un'e-mail è utilizzare i cosiddetti "sfondi a prova di proiettile". Gli sfondi a prova di proiettile si basano sul metodo dell'attributo HTML includendo anche VML, o Vector Markup Language, nel codice. VML è un linguaggio proprietario di Microsoft utilizzato nei prodotti Office come Outlook. Applicando le immagini di sfondo in VML, funzioneranno in Microsoft Outlook, il che non è necessariamente vero per gli altri metodi discussi in precedenza.

Il principale svantaggio dell'utilizzo di VML è che non è molto accessibile o ben documentato e aggiunge molto codice che è, francamente, difficile da capire. Per semplificare, i nostri amici di Campaign Monitor hanno effettivamente creato uno strumento straordinario per generare sfondi a prova di proiettile. Lo trovate, comodamente, su backgrounds.cm.

Indipendentemente dal metodo scelto, ci sono incredibili vantaggi nell'usare le immagini di sfondo nelle e-mail rispetto alle immagini codificate tradizionalmente.

Il vantaggio principale è l'accessibilità. Utilizzando le immagini di sfondo, puoi fare affidamento su testo HTML in tempo reale anziché su immagini per tutti i tuoi contenuti. Il testo non soffre di blocco come le immagini, quindi anche quando le immagini sono disattivate, il tuo messaggio sarà comunque leggibile per gli abbonati. E, per gli utenti che richiedono utilità per la lettura dello schermo, saranno in grado di ascoltare i contenuti letti, a differenza delle immagini tradizionali.

Puoi usare CSS per modellare quel contenuto HTML in modo che appaia ben progettato come le immagini che escono da Photoshop e puoi anche includere anche pulsanti CTA.

Le immagini di sfondo, quindi, vengono utilizzate per includere uno stile visivo aggiuntivo, che si tratti di un semplice gradiente, di alcune immagini di prodotti fantasiosi o di uno schema ripetuto. Funzionano insieme al testo HTML per creare e-mail belle e utilizzabili.

La cosa ancora più interessante è che puoi fare cose più avanzate come includere GIF animate come immagini di sfondo, scambiare immagini in base alle dimensioni dello schermo o del dispositivo o persino codificare uno sfondo video come abbiamo fatto alcuni anni fa per la nostra e-mail di annuncio di Litmus Live.

C'è molto da fare per utilizzare al meglio le immagini di sfondo. Abbiamo recentemente pubblicato un aggiornamento alla nostra Guida definitiva alle immagini di sfondo nelle e-mail sul blog Litmus che vale la pena dare un'occhiata. È un ottimo modo per esaminare il codice che alimenta le immagini di sfondo e per trarre ispirazione per l'aggiornamento delle tue campagne. Basta andare alle note dello spettacolo di oggi per il collegamento.

E assicurati di iscriverti a Delivering su iTunes o Spotify per ascoltare gli episodi futuri in cui approfondiremo più tecniche per creare e-mail HTML migliori.