L'aggiunta di un'immagine di sfondo è senza dubbio il modo più semplice per rendere le e-mail non solo accattivanti, ma anche più funzionali. Ma tutti i client di posta elettronica supportano questa funzione?
Supporto per le immagini di sfondo
Il problema principale legato all'inserimento di immagini di sfondo nelle e-mail è che non sono supportate da tutti i client di posta elettronica, per motivi di sicurezza o di altro tipo.
Webmail: senza complicazioni
Far visualizzare le immagini di sfondo sui client di webmail è l'operazione meno complicata: tutte le principali piattaforme supportano questa funzionalità. L'unica eccezione è Yahoo! Mail, che rimuove i valori con la sintassi della barra e rende il valore non valido.
Borsa mista per dispositivi mobili
Circa la metà delle app di posta elettronica più diffuse è in grado di visualizzare le immagini di sfondo, mentre le altre offrono almeno un supporto parziale. Il problema più comune è la mancanza di supporto per la proprietà CSS `background-attachment: fixed`.
Il desktop è fonte di guai
I client di posta elettronica per desktop hanno maggiori difficoltà con le immagini di sfondo. Attualmente, solo Apple Mail 10, Outlook per Mac e Thunderbird sono pienamente compatibili, mentre gli altri client per desktop offrono un supporto parziale o nullo.
Si veda la tabella sottostante per una panoramica più dettagliata della compatibilità di fondo tra i diversi client di posta elettronica.
Vantaggi dell'immagine di sfondo
Uno dei principali vantaggi delle immagini di sfondo è che consentono di inserire contenuti HTML aggiuntivi sopra di esse. Questo perché, a differenza delle immagini normali, le immagini di sfondo possono contenere livelli aggiuntivi di informazioni. Ad esempio, è possibile inserire altre immagini, testo o inviti all’azione all’interno dello stesso spazio.
Dai un'occhiata all'e-mail promozionale di Salesforce per vedere come funziona la tecnica del layering:
Un altro vantaggio dell'utilizzo di immagini di sfondo, anziché inserire il testo direttamente nell'immagine, è che qualsiasi contenuto HTML sovrapposto all'immagine rimane leggibile anche se le immagini vengono disattivate dal client di posta elettronica. In altre parole, le immagini di sfondo sono un ottimo modo per rendere le tue e-mail più accessibili.
Come inserire immagini di sfondo nelle e-mail
Esistono due metodi principali per inserire un'immagine di sfondo nel contenuto di un'e-mail:
- Impostazione degli attributi HTML per una tabella o una cella di tabella (rispettivamente gli elementi `table` e `td`)
- Aggiunta di stili CSS a un elemento tabella o cella
Utilizzo degli attributi delle tabelle HTML
L'utilizzo dell'attributo `background` su una tabella o su una cella di una tabella è il metodo più antico per implementare la funzionalità dell'immagine di sfondo. Sebbene gli sviluppatori considerino ormai questo metodo antiquato e deprecato, funziona ancora grazie alla retrocompatibilità dell'HTML. In sostanza, si indica al client di posta elettronica di visualizzare un'immagine di sfondo memorizzata all'URL specificato. Ecco un esempio di codice:
Uno degli attributi di sfondo più utili è `background-size`, che consente di specificare come l'immagine debba essere ridimensionata rispetto allo spazio disponibile. Ciò risulta particolarmente utile sui dispositivi mobili con spazio limitato. Invece di lasciare che sia il dispositivo a rimpicciolire l’immagine (spesso si tratta di un comportamento predefinito), è possibile utilizzare valori come `cover` o `contain` per visualizzare l’immagine in modo più armonioso.
Aggiunta di proprietà CSS
Un metodo più aggiornato e flessibile consiste nell'utilizzare la proprietà CSS `background-image` in linea su un contenitore `div` o `td`. Anche in questo caso, la proprietà `background-image` utilizza un URL come fonte dell'immagine di sfondo.
È importante sapere che, indipendentemente dal metodo scelto (attributi HTML o proprietà CSS), non sarà possibile modificare le dimensioni né cambiare la posizione dell'immagine di sfondo. Inoltre, se la dimensione dell'
Se il contenitore è più grande dell'immagine stessa, l'immagine verrebbe ripetuta. Tuttavia, è possibile evitare queste situazioni:
- impedire la ripetizione dell'immagine di sfondo (proprietà `background-repeat: no-repeat`),
- Specificare la posizione dello sfondo (proprietà background-position)
Scrivere il codice HTML per i contenuti delle e-mail non è certo una cosa alla portata di tutti. Ecco perché abbiamo integrato la configurazione delle immagini di sfondo direttamente all’interno di JungleMail interfaccia. Basta selezionare una sezione di contenuto, attivare l'opzione "Immagine di sfondo della sezione" sulla destra, scegliere un'immagine, spuntare alcune caselle per migliorare l'impaginazione e il gioco è fatto.
Punti chiave
- Nella programmazione delle e-mail, si consiglia generalmente di utilizzare proprietà consolidate da tempo. Più una regola HTML o CSS è datata, maggiore è la probabilità che funzioni. Tenendo presente questa linea guida, non sorprende che l’attributo “background” applicato a una tabella goda del massimo supporto tra i client di posta elettronica.
- Per andare sul sicuro, è sempre bene inserire un testo alternativo (ALT) per le immagini. Includi anche la larghezza e le dimensioni dell'immagine: in questo modo il testo alternativo avrà uno spazio dedicato in cui essere visualizzato quando le immagini sono disattivate. Se non specifichi le dimensioni, alcuni client di posta elettronica comprimono quell'area insieme al testo alternativo.
- Consigliamo inoltre di specificare un colore di riserva utilizzando l'attributo `bgcolor`. In questo modo, anche se l'immagine di sfondo non venisse visualizzata, il contenuto dell'e-mail risulterà comunque leggibile sullo sfondo del colore di riserva.
Porta la tua comunicazione interna a un nuovo livello
Prova gratuitamente lo strumento per newsletter JungleMail!
Inizia gratis