La guida definitiva al testo ALT con stile nelle e-mail

Una best practice comunemente accettata nel mondo della posta elettronica è l'inclusione di attributi ALT per le immagini. Abbreviazione di testo alternativo, il testo ALT nelle e-mail è ora la pratica standard per gli appassionati di e-mail.

Ci sono alcuni motivi per cui:

• La maggior parte dei client di posta elettronica blocca le immagini per impostazione predefinita. In alcuni casi, invece di mostrare l'immagine, il client di posta elettronica visualizzerà invece il testo ALT. Questo è decisamente utile, soprattutto nei casi in cui il design di un'e-mail è composto prevalentemente da immagini. Il testo ALT può aiutare a comunicare il messaggio anche se le immagini non possono.
• In una situazione in cui le immagini non possono o non si caricano a causa di una cattiva connessione, collegamento interrotto, ecc., apparirà il testo ALT al posto dell'immagine.
• I marketer e i designer sensibili alle esigenze dei lettori ipovedenti comprendono che il testo ALT viene utilizzato dagli screen reader. Poiché questi utenti non sono in grado di visualizzare testo o immagini, il testo ALT serve a descrivere l'immagine tramite lo screen reader.

Verifica che le tue immagini abbiano il testo ALT Con Litmus Checklist, otterrai le anteprime delle tue e-mail con le immagini disattivate e riceverai una notifica se in una delle tue immagini manca il testo ALT. Invia con fiducia ogni volta. Prova il tornasole →

L'impostazione del testo ALT per le immagini in un'e-mail HTML è semplice. Conosciuto come attributo , è una parte standard della sintassi HTML ed è incluso nel tag dell'immagine:

 <img src="logo.jpg" width="400" height="149" alt="Litmus" >

È importante includere i valori di altezza e larghezza in quanto ciò crea una casella segnaposto in cui risiedere il testo ALT quando le immagini sono disabilitate.

Display di testo ALT standard

Ecco come appaiono le immagini disabilitate in un'email senza testo ALT inviato a Gmail:

Rispetto alle immagini disabilitate in un'e-mail con testo ALT :

Quale preferiresti ricevere?

Aggiungere stile al testo ALT

Puoi anche divertirti con il tuo testo ALT, aggiungendo un po' di CSS in linea per cambiare il carattere, il colore, le dimensioni, lo stile e il peso del testo ALT:

 <img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>

Ecco lo stesso esempio sopra, ma con gli stili di testo ALT applicati:

Supporto del testo ALT con stile su tutti i client di posta elettronica

Sebbene sia una tecnica elegante, stiamo ancora parlando di posta elettronica, quindi naturalmente il supporto è un po' sparso tra i diversi programmi di posta elettronica. Ho preso in prestito alcuni elementi dall'impressionante e-mail Dreamforce di Salesforce per testare il testo ALT in stile per i seguenti esempi.

Supporto per testo ALT in stile Webmail

I client di Webmail come Gmail sono i più diversi poiché è possibile accedere a questi programmi di posta in diversi browser. In tutti i client webmail, il supporto per il testo ALT con stile dipende dal browser utilizzato. Il testo ALT con stile è supportato nelle versioni correnti di Firefox, Chrome e Safari.

Ad esempio, il testo ALT in stile sarà visibile a un abbonato che visualizza il proprio Gmail in Firefox, ma funzionerà solo in Internet Explorer. In tal caso, è supportato il colore, ma non il carattere o altri attributi. Internet Explorer sembra essere un browser ostile per il testo ALT in stile in generale. Abbiamo scoperto che mentre il colore era supportato, spesso il carattere non lo era:

• Gmail e G-Suite in Internet Explorer
• GMX.de in Internet Explorer
• Office 365 in Internet Explorer
• Outlook.com in Internet Explorer
• Web.de in Internet Explorer
• Yahoo! Posta in Internet Explorer

Testo ALT con stile in Gmail/Firefox:

Testo ALT con stile in Gmail/IE:

Testo ALT sulle immagini collegate

Il testo ALT per le immagini collegate può essere sottolineato o blu in alcuni client webmail. Yahoo! sottolinea il testo ALT nelle immagini collegate, mentre Gmail sottolinea e ignora i colori specificati, impostando invece per impostazione predefinita su un blu vibrante:

Outlook.com

Piuttosto che bloccare tutte le immagini, Outlook.com afferma di "bloccare il contenuto da mittenti dall'aspetto sospetto", anche se non sono sicuro di come determinano chi sembra sospetto! A caso, alcuni mittenti sono "fidati", visualizzando automaticamente le immagini, mentre altri lanciano un avviso di contenuto bloccato:

Gli utenti hanno la possibilità di bloccare le immagini per chiunque non sia presente nell'elenco dei mittenti attendibili nelle impostazioni di Outlook.com. Outlook.com tratta questi due tipi di filtro dei contenuti in modo diverso, utilizzando un comportamento di blocco delle immagini simile a Gmail per i mittenti "dall'aspetto sospetto" mentre utilizza le caselle grigie di Hotmail per bloccare le immagini per gli utenti che dispongono di impostazioni di blocco dei contenuti più rigide.

Supporto per testo ALT in stile desktop

I client desktop sono un po' più affidabili poiché non sono coinvolte tante variabili:

*Outlook aggiunge un messaggio di sicurezza al testo ALT. Maggiori dettagli di seguito.

Sebbene Apple Mail e Thunderbird non blocchino le immagini per impostazione predefinita, puoi scegliere di farlo nelle preferenze di ciascuna applicazione. Ho abilitato manualmente il blocco delle immagini su questi client per vedere se supportavano il testo ALT con stile.

Ci sono state alcune lievi variazioni a supporto di altre variabili, in particolare relative ai caratteri web:

• Apple Mail non supportava i caratteri con stile, sebbene il colore e altre proprietà fossero ancora inclusi.
• In Outlook 2000-2003, sebbene sia possibile modificare il colore, non è possibile regolare nient'altro con il testo ALT con stile.

Il messaggio di sicurezza di Outlook

Outlook 2003, 2007, 2010, 2013 e 2016 precedono il testo ALT con un lungo messaggio di sicurezza, che afferma "Fare clic con il pulsante destro del mouse qui per scaricare le immagini. Per proteggere la tua privacy, Outlook ha impedito il download automatico di questa immagine da Internet". Sfortunatamente, questo rende il testo ALT in questi client di posta quasi inutile in quanto appare solo alla fine dell'avviso di sicurezza di Outlook:

Questo messaggio appare anche in Windows 10, bloccando completamente qualsiasi testo ALT.

Supporto per testo ALT in stile mobile

I clienti mobili hanno un forte supporto per il testo ALT in stile, che è un'ottima notizia, specialmente per i marketer con un pubblico Android pesante.

Come Apple Mail e Thunderbird, ho aggiornato manualmente le mie impostazioni iOS per bloccare le immagini per osservare come questo sistema operativo mobile gestisce il testo ALT.

Testo ALT con stile in Android (Samsung Galaxy Nexus):

Il testo ALT con stile viene visualizzato in modo identico nelle app di posta elettronica e Gmail in Android.

Testo ALT con stile in BlackBerry OS 6 (Torch 9810):

Testo ALT con stile in iOS (iPhone 5):

Blocco delle immagini in Windows Phone 7.5 (Nokia Lumia 900):

Le proprietà dei caratteri CSS, i collegamenti e la lunghezza sono variabili

Analizzando le specifiche, la maggior parte delle seguenti proprietà dei caratteri sono supportate nei client che visualizzano il testo ALT con stile:

• famiglia di font
• dimensione del font
• carattere-peso
• colore
• stile del font

C'era qualche variazione nei test quando si trattava di proprietà specifiche supportate. Quasi tutti i client supportano le proprietà del colore, ma non il carattere. Questo variava anche tra i browser. Ad esempio, ecco come appariva Gmail/G-Suite in Chrome nel mio test di due caratteri in stile, con colori diversi:

Mentre Gmail/G-Suite in Internet Explorer rispettava il colore ma non il carattere:

Tieni presente che alcuni client potrebbero non supportare tutti i caratteri o le dimensioni nel loro testo ALT con stile, ma ciò non significa che non puoi aggiungere un po' di branding o stile. Dai un'occhiata a questa pratica risorsa La specialista di email marketing Jaina Mistry ha scritto per Campaign Monitor per ricontrollare il supporto dei caratteri web.

Consiglierei anche questo elenco di caratteri comunemente installati su Windows e Mac.

Altri notevoli comportamenti di blocco delle immagini

In molti client di posta elettronica, il testo ALT scompare quando la dimensione o la lunghezza del testo supera la larghezza e/o l'altezza del contenitore dell'immagine. A causa di questo comportamento, probabilmente è meglio attenersi a descrizioni più brevi e dimensioni dei caratteri più piccole per evitare che il testo ALT venga rimosso del tutto.

Quasi tutti i client di posta elettronica consentono di modificare le impostazioni per visualizzare o nascondere automaticamente le immagini (anche se molto spesso nascondere/bloccare è l'impostazione predefinita) e richiederanno agli utenti di attivare le immagini per i singoli messaggi. Alcuni consentono inoltre agli utenti di aggiungere mittenti specifici a una lista consentita o a una rubrica o selezionare "Visualizza sempre immagini da..."

Visualizza l'anteprima della tua email con le immagini disattivate (e attivate!)

Come appare la tua email con le immagini disabilitate? Il rendering del tuo testo ALT è corretto? Visualizza in anteprima la tua email in oltre 50 client desktop, mobile e webmail, incluse le visualizzazioni senza immagini, con Litmus.

Inizia il test →