10 minuti di lettura

Come impostare la Firma Email HTML: una guida completa

Ci siamo. Hai trovato finalmente il logo giusto per dare un’immagine memorabile alla tua azienda. Tutto è pronto: brochure, cataloghi aziendali, sito web, biglietti da visita e carta intestata. Eppure manca ancora un piccolo dettaglio che potrebbe fare la differenza. Ebbene sì! Molto probabilmente ti sarai dimenticato della firma email in formato html.

Firma Email HTML: a cosa serve prima di tutto?

Se la tua agenzia, il tuo consulente in comunicazione o web designer tentano a tutti i costi di rifilarti questa benedetta firma html per la tua mail, sappi che non si tratta affatto di una fregatura!

Noi di Graffette proponiamo SEMPRE ai nostri clienti che lanciano nuovi progetti questo prodotto e sai perché? Perché completa il brand identity kit della tua azienda!

Mi piace considerare la firma html per la mail una versione digitale del biglietto da visita. È uno strumento aggiuntivo per presentarti con professionalità ai tuoi stakeholder che può fare la differenza. Al suo interno infatti possono essere posizionate informazioni di contatto utili, ma soprattutto i link al tuo sito web e ai canali social attivi!

firma email html
La firma HTML di Michele di Graffette

Come creare una firma email professionale

Ti è mai capitato di vedere le firme mail come allegato al messaggio stesso? A me spesso e la cosa mi crea sempre molto turbamento! Un’immagine non è la soluzione! Molti client di posta infatti visualizzano il file come allegato e non incorporato nel testo. Inoltre non è possibile né copiare il testo né inserire più di un link.

Bene, abbiamo già capito come NON creare una firma di qualità.

Esistono online diversi tool per creare con semplicità la tua firma personalizzata. Te ne elenco qualcuno qui sotto:

  • Mail-signatures.com : strumento free, che mette a disposizione diversi template preconfigurati e un’interfaccia dove sostituire i dati demo con i tuoi e aggiungere il tuo logo;
  • MySignature.io : interfaccia molto più moderna e usabile. Permette l’inserimento di campi custom oltre a quelli precostituiti, ma dovrai pagare la versione premium per rimuovere il loro branding dal piede della firma generata;
  • Hubspot : il celebre brand specializzato in CRM e marketing automation, mette a disposizione un comodo e semplicissimo strumento per la creazione di firme HTML. Niente di fantascientifico, ma funziona piuttosto bene.

Se riscontri problemi nell’utilizzo di questi tool o vuoi segnalarne qualcuno di molto più performante non farti scrupoli e lasciaci un commento in coda all’articolo!

OSSERVAZIONE: Occhio solo ad una cosa. Utilizzando questi strumenti, potresti riscontrare alcuni problemi nell’utilizzo delle immagini. Tutte le icone dei social, telefono, mail e i loghi sono file in formato jpg o png e devono necessariamente essere hostate su qualche server. Queste avranno una URL proprio come una pagina web, che al 99% non proverrà dal tuo dominio. Questo può generare due problemi:

1. Il sito di provenienza viene dismesso o vengono eliminati i file dal server. Risultato > da un giorno all’altro ti ritroverai con immagini corrotte

2. Il dominio di provenienza dei file non corrisponde a quello da cui spedirai le mail e la probabilità di essere contrassegnato come spammer diventa maggiore.

Esempi di firma email e suggerimenti

Se padroneggi già abbastanza bene l’HTML e il CSS, invece, potresti pensare di creare a mano la tua firma personalizzata, magari partendo dal codice generato da uno dei tool che ho elencato sopra.

Dovrai tenere a mente solo alcune cose:

  • Le firme HTML non supportano framework esterni come Bootstrap o Foundation
  • Potrai usare solo le tabelle come markup
  • Per evitare problemi di compatibilità dovresti inserire tutto il CSS inline e non in un foglio di stile esterno o nell’head della pagina

Ti mostro un semplicissimo esempio: questo è il markup della firma che ho realizzato per l’account info@graffette.net

<!DOCTYPE HTML PUBLIC>
<HTML><HEAD><TITLE>Firma Email - Graffette | Grafica a fette</TITLE>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</HEAD>
<BODY style="FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif">
<table style="border-top:20px solid #00677B; WIDTH: 400px; FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif" cellpadding="10" cellspacing="0">
    <tbody>
        <tr>
            <th style="border-left:20px solid #00677B; padding-top:15px;border-right:20px solid #00677B; FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif; WIDTH: 400px;vertical-align: middle; text-align: center;" rowspan="" valign="middle" align="center">
                <a href="https://www.graffette.net" target="_blank"><img alt="Logo Graffette" width="200" border="0" align="center" style="border:0; height:auto; width:200px"  src="https://www.graffette.net/wp-content/uploads/2019/02/logo-graffette.png"></a>                          
            </th>
        </tr>

        <tr>
            <td style="border-right:20px solid #F05B61; border-left:20px solid #F05B61; FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif; vertical-align: top; text-align:center;" valign="top">
                <span><strong><a href="mailto:info@graffette.net"  style="color: #333333; text-decoration: none;">info@graffette.net</a></strong></span><br> 
                <span style="FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif;">Via Matteotti 12 - Reggiolo 42046 (RE)<span><br></span></span>
                <span style="FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif; line-height: 20px; color: #333333;">Tel. <strong>0522 1590271</strong></span><br>
                <span><strong><a href="https://www.graffette.net" target="_blank"  style="color: #333333; text-decoration: none;">www.graffette.net</a></strong></span> 
            </td>
        </tr>
        <tr>
            <th style="FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif; width:400; padding-top:20px;padding-bottom:20px; text-align: center; border-left:20px solid #F05B61; border-right:20px solid #F05B61; border-bottom:20px solid #F05B61;" colspan="2" align="center">
                <span><a href="https://www.facebook.com/graffette.agency/" target="_blank"><img border="0" width="20" alt="Facebook icon" style="border:0; height:20px; width:20px; padding-right: 55px;" src="https://www.graffette.net/wp-content/uploads/2019/02/icona-facebook.png"></a></span>
                <span><a href="https://www.instagram.com/graffette.agency/" target="_blank"><img border="0" width="20" alt="Instagram icon" style="border:0; height:20px; width:20px" src="https://www.graffette.net/wp-content/uploads/2019/02/icona-instagram.png"></a></span>
                <span><a href="https://www.linkedin.com/" target="_blank"><img border="0" width="20" alt="Instagram icon" style="padding-left: 55px;border:0; height:20px; width:20px" src="https://www.graffette.net/wp-content/uploads/2019/02/icona-linkedin.png"></a></span>
            </th>
        </tr>

</tbody>
</table>
    
<table style="WIDTH: 400px; FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif;" cellpadding="20" cellspacing="0">
    <tbody>
        <tr>
            <td width="350px" style="font-size:7px; font-family:Trebuchet MS,Arial,sans-serif; color:#959595; line-height:10px; padding-bottom:10px; vertical-align:top; text-align:justify;" colspan="" valign="top">
               Informativa sulla Privacy D.Lgs 196/2003 <br>

               Le informazioni contenute nella comunicazione che precede possono essere riservate e sono, comunque, destinate esclusivamente alla persona o all'ente sopraindicati.<br>

               La diffusione, distribuzione e/o copiatura del documento trasmesso da parte di qualsiasi soggetto diverso dal destinatario è proibita. La sicurezza e la correttezza dei messaggi di posta elettronica non possono essere garantite. Se avete ricevuto questo messaggio per errore, Vi preghiamo di contattarci immediatamente. Grazie.<br>

               Rispetta l'ambiente: prima di stampare la mail assicurati che sia davvero necessario!
        </td>
	   </tr>
    </tbody>
</table>
 
    
    
</BODY>
</HTML>

Il risultato si presenterà graficamente così:

Vuoi salire a bordo?

Iscriviti alla nostra newsletter!
Esempio firma email html

Quali client e dispositivi supportano la firma HTML?

DispositivoClientCompatibilità
AndroidGmail / Mail
iOSMail
MacMail
MacThunderbird
MacOutlook
WindowsThunderbird
WindowsOutlook

Notato niente di strano?

Eh già, hai capito bene: le App più diffuse per android come quelle native di molti brand noti e quella di Gmail non supportano ancora il markup HTML nelle firme. Dovrai quindi usare la tua splendida firma soltanto quando invierai le mail dal tuo computer desktop!

Pare però che utilizzando Maildroid si possa aggiungere del linguaggio HTML anche su Android. Io non l’ho ancora provata, ma credo che lo farò presto.

Come inserire la firma email sui vari client

Bene, abbiamo visto insieme a cosa serve una firma HTML per le tue email, così come poterla creare online con dei tool gratuiti o addirittura comporla a mano.

Ora però cerchiamo di capire come impostare la firma email sui tuoi dispositivi e/o client di posta.

Impostare la firma email su Thunderbird

Anche tu hai deciso di affidarti al fantastico client di posta di casa Mozilla? Ottima scelta. Lo trovo davvero ben costruito, professionale e soprattutto: open source!

Tempo richiesto: 5 minuti.

Per impostare la firma su Thunderbird non dovrai far altro che:

  1. Click con il destro su account

    Dalla schermata principale cliccare con il destro sull’account per il quale vuoi adottare un firma HTMLClick destro su impostazioni account thunderbird

  2. Impostazioni

    Cliccare poi su Impostazioni e individuare sulla destra il campo Testo per firma

  3. Spunta HTML

    Ora accertati di spuntare la checkbox “Utilizza HTML

  4. Copia il codice HTML

    Apri con un editor testuale (bloc notes o text edit) il file della tua firma, seleziona tutto il codice, copia e torna su Thunderbird

  5. Incolla

    Posizionati nel campo testo per firma e incolla!Incolla firma html thunderbird

  6. Fine!

    Ci siamo!

Impostare la firma email su Outlook

Nella versione 2016 è necessario seguire questi passaggi:

  1. Crea un nuovo messaggio di posta
  2. Nella barra degli strumenti seleziona “Firma
  3. Se non hai ancora firme salvate clicca su “Nuovo” e attribuisci un nome che non verrà visualizzato dai tuoi destinatari
  4. Ora apri in una scheda del tuo browser il file della tua firma (ad esempio lamiastupendafirma.html), clicca su un elemento qualsiasi della pagina, seleziona tutto con CTRL + A (o CMD + A) e copia con CTRL + C (o CMD + C)
  5. Torna su Outlook, posizionati sull’editor e incolla dopo aver cliccato con il tasto destro (ricordando di mantenere le opzioni di formattazione originarie).
  6. Fatto! Che te ne pare?
Come incollare firma html su outlook 2016

Impostare la firma email su Apple Mail (Mac)

Se utilizzi Mac OS e sfrutti la sua app nativa Mail segui questi semplici passaggi:

  1. Nel menu in alto a sinistra clicca su Mail > Preferenze
  2. Dal pannello seleziona la penultima voce a destra Firme
  3. Posizionati su tutte le firme e clicca il piccolo pulsante + in basso
  4. Ora apri il tuo file html con il tuo browser preferito, seleziona tutto con CMD + A , copia con CMD + C
  5. Torna su Mail, deseleziona la spunta “Usa sempre il mio font di default”, e incolla con CMD + V
  6. Esci dal pannello e.. fatto! Sei pronto a mandare le mail con la tua magnifica firma HTML!
Aggiungere firma su apple mail

Impostare la firma email su Gmail (Desktop)

Se come milioni di utenti hai una casella postale gratuita di Google, oppure come noi Graffette ti sei affidato al servizio professionale di GSuite, dovrai seguire questi semplici step:

  1. Dalla schermata iniziale clicca sull’ingranaggio in alto a destra da desktop ⚙️
  2. Dalla scheda “Generali” recati in fondo alla pagina e individua il pannello Firma.
  3. Ora apri in un’altra scheda del tuo browser il file della tua firma (ad esempio lamiastupendafirma.html), clicca su un elemento qualsiasi della pagina, seleziona tutto con CTRL + A (o CMD + A) e copia con CTRL + C (o CMD + C)
  4. Torna sulla scheda dove hai aperto Gmail, posizionati sull’editor e incolla con CTRL + V (o CMD + V)
  5. Fatto!
Aggiungi firma su Gmail

Impostare la firma email su Iphone

Sei un felice possessore di iPhone? Benissimo, allora non ti resta che sostituire quella terribile scritta “Inviato da iPhone” in coda a tutte le tue mail che invii mentre sei in treno, per strada o dal parrucchiere!

  1. Apri il menu del tuo iPhone e seleziona Impostazioni
  2. Ora tappa la voce Mail
  3. Scrolla in fondo alla schermata e seleziona Firma
  4. Ora tappa su “Inviato da iPhone”, seleziona tutto e… cancella!
  5. Adesso apri il file html con il browser del tuo smartphone, tieni premuto su un qualsiasi elemento; con pazienza trascina i selettori all’inizio e alla fine della tua firma e copia.
  6. Torna alle settings, tieni premuto sul campo ormai vuoto e incolla!
Michele Grimaldi
Michele Grimaldi

Sono un Web & UX Designer, laureato in Comunicazione Digitale e Creatività d'Impresa. Adoro lavorare in squadra e sono molto meticoloso. In Graffette mi occupo di tutto quello che riguarda il web design, lo sviluppo frontend e la web analytics. Che aspetti a contattarmi?

Lascia un commento

Precedente

Brand manifesto: perché ne hai bisogno e come scriverne uno

La ricetta segreta per creare un’immagine coordinata efficace e colpire il tuo target dritto al cuore.

Successivo

Richiedi un preventivo personalizzato

Contattaci Richiedi un preventivo