Banner nella firma email: formati, peso e buone pratiche

Il banner è l’elemento della firma che veicola un messaggio temporaneo: un evento, una campagna di recruiting, una novità. I suoi vincoli tecnici somigliano a quelli del logo, ma i vincoli di progettazione sono quelli di un supporto pubblicitario visto per un secondo.

Le dimensioni

La larghezza del banner è limitata da quella della firma, a sua volta limitata dagli schermi mobili.

Un banner più alto invade il messaggio e dà l’impressione di un inserto pubblicitario. Un banner più stretto della firma crea un disallineamento visivo sgradevole: conviene allinearne la larghezza a quella del blocco.

Come per il logo, l’esportazione si fa al doppio — 1.200 × 200 px per una visualizzazione a 600 × 100 — con le dimensioni indicate dagli attributi HTML width e height, altrimenti Outlook mostra l’immagine alle sue dimensioni native. I dettagli sono in firma email in HTML.

Il peso

Si consiglia di restare sotto i 60 KB per un banner statico e sotto i 150 KB per una GIF animata.

Il problema non è la banda ma la resa percepita. Le immagini di un’email si caricano dopo il testo: un banner pesante compare in ritardo e il destinatario vede prima un riquadro vuoto sotto la firma. L’impressione è quella di un messaggio costruito male.

Una compressione PNG senza perdita dimezza in genere il peso senza differenze visibili. Per un’immagine fotografica, il JPEG con qualità 80 è un buon compromesso.

Le regole di progettazione

Un solo messaggio. È la regola più violata. Un banner che annuncia una fiera e un white paper e una posizione aperta non ne comunica nessuno. Se i messaggi sono tre, meglio fare tre campagne successive.

Un titolo breve. Da cinque a otto parole. Alle dimensioni reali di visualizzazione — spesso ridotte dal client di posta — un titolo lungo diventa illeggibile.

Un’azione esplicita. «Iscriviti», «Scopri le posizioni aperte», «Scarica il report». L’etichetta deve dire che cosa succede al clic.

Un contrasto sufficiente. Il banner viene visto in un secondo, a volte sullo schermo di un telefono all’aperto. Testo scuro su sfondo chiaro, o il contrario, ma niente grigio su grigio.

Spazio intorno al testo. Un margine interno di almeno 16 px. Un testo attaccato al bordo sembra un errore.

L’area cliccabile

L’intero banner deve essere cliccabile, non solo l’area che somiglia a un pulsante. Si tratta di un’immagine racchiusa in un link:

<a href="https://example.com/fiera" style="display:block;text-decoration:none">
  <img src="https://cdn.example.com/banner@2x.png"
       width="600" height="100"
       alt="Vivatech — Padiglione 2, stand B34. Prenota un incontro."
       style="display:block;border:0;width:600px;height:100px" />
</a>

Contano due dettagli. L’attributo alt deve descrivere il messaggio e l’azione: è ciò che vedrà un destinatario il cui client blocca le immagini, ed è ciò che leggerà uno screen reader. E border:0 elimina il bordino blu che alcuni client aggiungono intorno a un’immagine con link.

Da sapere: conviene usare un URL di destinazione tracciabile, diverso per ogni campagna. Altrimenti non sarà possibile attribuire il traffico al banner giusto — vedi misurare il ROI.

Il caso dell’animazione

Una GIF animata attira di più l’occhio, ma alcune versioni di Outlook ne mostrano solo il primo fotogramma. La regola che ne deriva è assoluta: il messaggio essenziale deve comparire nel primo fotogramma, e l’animazione serve solo ad arricchirlo.

L’argomento, comprese le questioni di peso e di numero di cicli, è trattato in banner animato nella firma.

Che cosa distingue un buon banner da una buona pubblicità

Una differenza di registro merita di essere sottolineata. Il banner compare sotto la firma di una persona, in un messaggio professionale indirizzato a qualcuno che la conosce. Un tono pubblicitario marcato stona e si ritorce sul mittente.

I banner che funzionano meglio somigliano meno a una pubblicità che a un’informazione utile: la data di una fiera, una posizione aperta, un report disponibile. Il catalogo dei formati stagionali è in 12 idee di campagne, e il quadro generale del canale in email signature marketing.

Infine, è bene verificare la resa prima della diffusione. Un banner perfetto in uno strumento di grafica può apparire ritagliato o ridimensionato in un client di posta: l’anteprima multi-client dell’editor evita brutte sorprese dopo l’invio a trecento persone.