Perché non si può usare flexbox in una firma email?

Il motore di rendering di Outlook per Windows, ereditato da Microsoft Word, non supporta né flexbox né grid. Gli elementi si impilano quindi in verticale, il che distrugge qualsiasi layout a colonne. Le tabelle restano l'unico meccanismo di posizionamento affidabile.

I tag funzionano in una firma?

Non in modo affidabile. Molti client eliminano il blocco durante la pulizia dell'HTML, e una firma incollata in un campo di configurazione perde di solito tutto ciò che non è inline. Gli stili devono essere definiti tramite attributi style su ogni elemento.

Si può usare un font personalizzato?

No, non in modo affidabile: i web font non vengono caricati nella maggior parte dei client di posta. Conviene usare un font di sistema e dichiarare una serie di font alternativi.

Firma email in HTML: le regole di compatibilità da rispettare

L'HTML di una firma non è l'HTML di un sito web. Tabelle, stili inline, dimensioni negli attributi: le regole che fanno sì che una firma si veda allo stesso modo su Outlook, Gmail e smartphone.

L’HTML di un’email non obbedisce alle stesse regole di quello di un sito web. Ciò che funziona in un browser moderno può andare in pezzi in Outlook, e un codice perfettamente valido secondo il W3C può dare un risultato inutilizzabile. Ecco i vincoli reali e le loro ragioni.

Perché esistono questi vincoli

Non tutti i client di posta utilizzano un motore di rendering web. Outlook per Windows — nella sua versione classica, ancora molto presente nelle aziende — visualizza l’HTML con il motore di Microsoft Word. Word non è mai stato progettato per questo, e il suo supporto del CSS si ferma a un sottoinsieme limitato.

Le webmail, dal canto loro, ripuliscono l’HTML in arrivo per ragioni di sicurezza: eliminano gli script, spesso i tag <style>, a volte interi attributi.

Una firma deve quindi essere visualizzata correttamente sul minimo comune denominatore. Il nuovo Outlook migliora la situazione — si veda che cosa cambia nel 2026 — ma finché il vecchio client resta in circolazione nei parchi aziendali, il vincolo rimane.

Regola 1 — Le tabelle per il layout

flexbox e grid non sono supportati dal motore di Word. Gli elementi si impilano quindi in verticale e qualsiasi layout a colonne scompare.

Il posizionamento deve dunque basarsi sulle tabelle:

<table cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td style="padding-right:16px;vertical-align:top">
      <img src="..." width="120" height="40" alt="Azienda" />
    </td>
    <td style="vertical-align:top">
      <div style="font-weight:700">Nome Cognome</div>
    </td>
  </tr>
</table>

Tre dettagli contano. cellpadding="0" cellspacing="0" border="0" neutralizza le spaziature predefinite, che variano da un client all’altro. role="presentation" indica agli screen reader che la tabella serve al layout e non a presentare dati. E vertical-align deve essere esplicito: i valori predefiniti differiscono.

Regola 2 — Tutti gli stili inline

Un foglio di stile esterno non è raggiungibile. Un tag <style> viene spesso eliminato. E quando si incolla una firma nel campo di configurazione di un client, tutto ciò che non è definito da un attributo style scompare.

Ogni proprietà va quindi dichiarata sull’elemento interessato. È prolisso, ridondante e senza alternative.

Regola 3 — Le dimensioni delle immagini negli attributi

Outlook ignora spesso width e height dichiarati nel CSS. L’immagine viene allora visualizzata alle sue dimensioni native: un file da 1.200 px occupa l’intera larghezza del messaggio.

Conviene indicare le dimensioni negli attributi HTML, ripetendole nel CSS per i client moderni:

<img src="https://cdn.esempio.it/logo.png"
     width="180" height="48" alt="Azienda"
     style="display:block;border:0;width:180px;height:48px" />

display:block elimina lo spazio indesiderato sotto l’immagine; border:0 toglie il bordo blu quando è cliccabile. I dettagli sono in inserire un logo senza che si rompa.

Regola 4 — Font di sistema, con font alternativi

I web font non vengono caricati in modo affidabile. Conviene dichiarare una serie realistica:

font-family: Arial, Helvetica, sans-serif;

Scegliere da sé il font sostitutivo è meglio che lasciarlo scegliere al client.

Regola 5 — Unità assolute

Le unità relative — rem, em, percentuali sulle dimensioni del testo — si comportano in modo irregolare. Si usino i pixel per le dimensioni dei caratteri, i margini interni e le dimensioni delle immagini. Le percentuali restano accettabili per la larghezza delle tabelle.

Regola 6 — Link espliciti

Un link deve riportare il protocollo completo, anche per il telefono:

<a href="tel:+390212345678" style="color:#1A1A1A;text-decoration:none">+39 02 1234 5678</a>

Senza uno style esplicito, alcuni client applicano il proprio blu sottolineato, che stonerà con le linee guida del brand.

Regola 7 — Un contenuto fruibile anche senza immagini

Le immagini remote sono bloccate per impostazione predefinita per i mittenti sconosciuti. Se la firma si basa su un’immagine, il destinatario vede un rettangolo vuoto al posto dei recapiti.

Nome, ruolo, telefono e dati legali devono restare testo. E ogni immagine deve avere un alt utile — il nome dell’azienda per il logo, il nome del social network per un’icona.

Da sapere: eseguite sempre un test con le immagini disattivate. È il modo più rapido per capire se la firma resta utilizzabile nel caso peggiore.

Bisogna scrivere questo HTML a mano?

È possibile, ma è un cattivo uso del tempo. Gli errori classici — tabella non chiusa, cellspacing dimenticato, dimensione mancante, stile perso in un copia-incolla — sono difficili da individuare alla lettura e compaiono solo su alcuni client.

Un editor visuale che genera direttamente un HTML conforme a queste regole, e che mostra l’anteprima della resa su Outlook per Windows, Outlook Web, Gmail, Apple Mail e smartphone, elimina gran parte del problema. È ciò che fa l’editor di Signally, il cui accesso è gratuito.

Il vantaggio non è solo di tempo, ma di affidabilità. Un modello centralizzato garantisce che le regole descritte sopra siano rispettate da tutte le firme dell’organizzazione, comprese quelle delle persone che non hanno mai sentito parlare di cellpadding.