trascina

Come impostare la Firma Email HTML: una guida completa

+Indice

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 [email protected]

<!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:[email protected]"  style="color: #333333; text-decoration: none;">[email protected]</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ì:

Esempio firma email html

Quali client e dispositivi supportano la firma HTML?

Dispositivo Client Compatibilità
Android Gmail / Mail
iOS Mail
Mac Mail
Mac Thunderbird
Mac Outlook
Windows Thunderbird
Windows Outlook

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

    Correzione del 11/02/2020: mi sono reso conto lavorando con un cliente che Safari tende a dare problemi quando si incolla il codice HTML nell’editor. Ti consiglio vivamente di usare Google Chrome e non un browser qualsiasi.
  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
Michele

Sono CTO & Tech Alchemist in Graffette, dove trasformo idee in esperienze digitali. Unisco visione e precisione per creare soluzioni innovative. Mi occupo di web development e analytics, sempre alla ricerca di nuovi approcci per fare la differenza online. Lavorare in squadra è il mio punto di forza, perché credo che il miglior design nasca dall'incontro di prospettive diverse.

39 commenti su “Come impostare la Firma Email HTML: una guida completa”

  1. Ciao Michele, grazie a questo tuo post sto riuscendo a creare una firma in html, seppure le mie conoscenze siano veramente basiche! Grazie davvero!!
    Però vedendo il codice che fa riferimento ai link, nello specifico quello denominato src, mi è venuto un dubbio. Dove bisogna caricare le icone? Al momento le ho salvate su pc, ma la firma non è per me, quindi come dovrei fare?
    Ti ringrazio infinitamente se riesci a trovare un momento di rispondermi.
    Grazie ancore per il post fatto molto molto bene! 🙂
    Un caro saluto, Cristina

    Rispondi
    • Ciao Cristina! Troppo gentile. Sono contento tu lo abbia trovato utile!

      Comunque sia, qualora tu non disponessi di un tuo spazio web (o del tuo amico/cliente), ti consiglio di utilizzare Google Drive! È un po’ ingegnoso riuscire a ricavare un URL pubblico però è possibile e mi è già capitato di usarlo con un cliente.

      Ti consiglio di far creare lui/lei una cartella chiamata “firma html”, fargli caricare i file al suo interno e seguire questo tutorial per ottenere un link visibile pubblicamente. L’ho provato e funziona correttamente ?

      Il tuo src finale dovrà avere quindi un aspetto simile a questo:

      src="http://drive.google.com/uc?export=view&id=codiceincomprensibile"

    • Ciao Michele, grazie mille per avermi risposto! Mi hai chiarito il significato di quel src e non c’è stato bisogno di usare Google Drive (mi dispiace averti fatto macchinare!) La firma è venuta proprio come la volevamo e il merito è soprattutto il tuo esempio in html. GRAZIE!

  2. Ciao Michele, sono arrivato al tuo articolo avendo appunto bisogno di inserire l’immagine come firma sotto al testo della firma.
    Ho consultato anche l’articolo per inserire l’immagine della firma su Drive non avendo uno spazio sul web, ma senza il risultato sperato, mi compare solo il codice html e non capisco il perché.
    Riesci a risolvere il mio problema?

    Rispondi
    • Ciao Christian, hai fatto bene a scrivermi. Potresti incollarmi la URL finale che ottieni come risultato così cerco di capire dove sta il problema?

    • Mmm… sai che io visualizzo correttamente il vostro logo se provo ad aprire il link da te fornito?

      Prova ad usare direttamente la URL che si genera successivamente al redirect operato da Google.

      Comunque sia, neanche a farlo apposta, ieri abbiamo pubblicato un articolo che spiega esattamente come fare: https://www.graffette.net/link-diretto-immagine-google-drive/

      Nel caso dovessi riscontrare problemi non esitare ad usare lo spazio web alternativo a Drive. È senz’altro più semplice!

    • Grazie Michele per la risposta, anche io visualizzo l’immagine.
      Il problema è come applicare questa stringa di testo sulla firma di mail di apple.

    • Dunque, se segui questo passaggio dovresti creare un file .html in cui incollare ad esempio questo codice.

      Dopodiché lo dovresti aprire con Chrome, copiare tutto con CMD+A e CMD+C, andare nella sezione firme delle preferenze di Apple Mail e incollare con CMD+V (deselezionando prima la spunta sul font predefinito). Tecnicamente dovrebbe funzionare!

    • Christian puoi creare tranquillamente il file con blocco note o textedit, incollargli il codice che ti ho fornito prima e assegnargli manualmente un nome e l’estensione .html (esempio ‘firma.html’) 😉

  3. Ciao,
    sto seguendo la tua guida per il client Outlook: ho creato un file html con la mia firma non in formato tabellare ma a div: il div, diciamo contenitore, ha un colore di sfondo e seguendo le tue istruzioni, non viene riportato il colore sfondo. Sono obbligato ad usare le tabelle? Invece utilizzando il tuo esempio html, vedo tutto correttamente.
    Però ho un problema con Outlook installato sul mac: facendo Modifica –> Incolla formattazione non incolla nulla, usando Modifica –> Incolla e mantieni lo stile ovviamente copia solo il testo escludendo la formattazione (colori, font, …).
    Potresti cortesemente aiutarmi?
    Grazie mille

    Rispondi
    • Ciao Alberto,
      Tutto chiaro. Sì, ahimè è praticamente obbligatorio usare i tag delle tabelle html per evitare problemi di compatibilità tra i vari client. Devi immaginarti Outlook un po’ come un browser dei primi anni 2000 in quanto a interpretazione di HTML ?

      Per quanto riguarda invece l’altro problema ti consiglio, invece di cliccare su modifica e incolla, di aprire il tuo file HTML su chrome, selezionare tutto con CMD+A, copiare con CMD+C e, una volta posizionato sull’editor della firma Outlook, cancellare il contenuto pre-esistente e incollare con CMD+V.

      Fammi sapere se risolvi!

  4. Ciao Michele,
    innanzitutto grazie per la tua disponibilità.
    Ho anche io il problema della firma da inserire in HTML su Windows live mail; L ho creata io con un file di word ma il logo nella firma viene caricato con una x e non appare; ho usato un logo con estensione png; vorrei provare con blocco note ma non l’ho mai fatto e non so come caricare l’immagine…

    Rispondi
  5. Buongiorno, non riesco a impostare la firma in digitale sulle mie mail di aruba .
    Intendo in html.
    Realizzo la firma su dei siti specifici ma poi non riesco su aruba ad impostarla.
    Grazie

    Rispondi
  6. Ciao, spero di non sbagliarmi ma secondo me questo tutorial spiega solo come creare una firma professionale in html da zero.

    Ma se io ho già creato la mia firma in Illustrator e il cliente me l’ha approvata, come faccio ad inserirla per esempio su gmail così com’è da JPG approvato dal cliente?

    La risposta potrebbe essere “Importa il JPG dentro ed è fatta”. In realtà no, perché quel JPG contiene più link al suo interno (telefono, mail, profilo linkedin, sito web), pertanto è necessario creare un html di questa firma e su questo non ho problemi.
    Ma poi come faccio ad inserire questo html su gmail?

    Grazie se riuscirai ad aiutarmi, spero di essermi spiegata bene.

    Rispondi
    • Ciao Giuditta! È vero, l’articolo si riferisce alla creazione di firme email HTML. Il tuo ragionamento è corretto: si parte da un mockup, poi si traduce in HTML e infine lo si implementa sul proprio client. Se non hai problemi con la scrittura in HTML, quello che ti serve è illustrato esattamente qui. Ho capito bene la tua richiesta?

  7. Mmm, secondo me no.

    Io ho già una firma approvata e il relativo file in HTML della stessa firma.

    Come faccio ad impostarlo come firma su Gmail?

    Grazie mille

    Rispondi
  8. Ciao Michele,
    ho sftuttato il sito Hubspot per creare la mial in formato html.
    Nessuno problema creo la firma e la utilizzo.
    Mi trovo in questa situazione però, siccome sono il Responsabile IT della mia azienda, utilizziamo Office365 con Outlook ovviamente installato per inviare le nostre mail. L’azienda mi chiede ovviamente di parametrizzare una fima uguale per tutti e questo non è un problema, poiché mi eredito i dati da Azure con gli opportuni tag e formatto la mail utilizzando il modulo generato da Hubspot. Il problema che mi viene sollevato è il seguente, siccome utilizzo una regola di Exchange per inviare la mail, quando invio la mail non viene visualizzata la firma da me creata, come se la creassi con lo strumento di firma di Outlook ma venendo generata da una regola la vede solamente il destinatario io non la vedo neanche dopo che l’ho inviata.

    Rispondi
    • mmm… non credo di aver capito perfettamente. Tramite la regolina Exchange che hai impostato invii dei messaggi automatizzati che restano identici? Se sì, perché non scrivi il contenuto del messaggio in HTML, comprensivo di firma? Non ho capito se la firma la vede solo il destinatario ma non tu o se proprio non riesci ad incorporarla nel messaggio.

  9. Ciao, utilizzo mail Aruba, ho fatto fare logo vettoriale per la firma. Ho provato a inserirlo, ma è enorme e non c’è la possibilità di ridurlo. Insomma, sono anni che utilizzo Aruba, ma non sono mai riuscito a risolvere il problema dell’inserimento del logo nella firma. Lo so, sono preistorico e mi vergogno. Mi potete dare assistenza? Grazie mille.

    Rispondi
    • Ciao Giovanni! Dunque, il fatto che tu utilizzi Aruba non c’entra molto, quindi tranquillo. I loghi vettoriali non possono essere incorporati nelle firme HTML (per intenderci i formati .ai, .svg, .pdf, .eps, ecc), ma necessitano di essere convertiti prima in PNG, GIF o JPG. Mi potresti dire esattamente come hai inserito l’immagine nella tua firma?

      Se hai usato un editor testuale e passi nella modalità di scrittura HTML dovresti vedere qualcosa del tipo

      <img src="https://iltuologo.formato">
      

      .
      Ti basterà aggiungere questo tag alla tua immagine:

      <img src="https://iltuologo.formato" width="150">
      

      . Chiaramente il 150 l’ho inserito come segnaposto. Fai qualche tentativo e trova la dimensione che ti soddisfa di più!

  10. Ciao Michele,
    probabilmente sono un pò tordo 😅
    Una e-mail aziendale è registrata su REGISTER … ho creato una firma html con mail-signatures.com , creato il link.
    Ora utilizzo dispositivi Apple e, se provo ad aggiungerli nella firma, non viene formattata … come posso fare per sistemarlo?
    Grazie in anticipo per il tuo aiuto

    Rispondi
    • Ciao Alberto! Su iphone è complicato implementare la firma HTML, ma su macbook assolutamente no! Mi dici che intendi per aver “creato il link”? Dovresti generare un codice come da mio screenshot, creare un file di testo “firma.html” > aprirlo con Google Chrome > copiare tutto e incollare nella sezione apposita del tuo client di posta.

      mail-signature.com

    • Ciao Michele grazie mille per la risposta.
      Ti confermo di aver generato il codice come da tuo screenshot (utilizzando come browser Chrome), l’ho copiato sulle sezione firma all’interno del server di Register e, anche nella sezione apposita del Mac.
      Purtroppo ancora nulla 😅
      comunque sia grazie ancora per il tuo aiuto, proverò a fare a meno di una firma così elaborata.
      buona giornata e buon lavoro.

      Alberto

  11. Buongiorno Michele,

    innanzitutto grazie per il tutorial e per la tua disponibilità.
    Seguendo le indicazioni sono riuscita ad arrivare alla firma finale in html e tutto funziona, fino a che però non mi confronto con Outlook ://
    Ho impostato la firma su Thunderbird, su Spark e tutto funziona. Quando la imposto su Outlook, l’icona di Instagram non rispetta le dimensioni della cella in cui è e appare in dimensioni reali (quindi enormi). Inoltre un ricevente dice di visualizzare le immagini (hostate sul mio sito) con le classiche crocette fino a che non scarica le immagini dal server. Come posso evitare questi due inconvenienti o dove sta il mio errore?

    Grazie mille in anticipo!
    Gabriella

    Rispondi
    • Ciao Gabriella!
      È possibile visionare il codice HTML della tua firma? Forse dovresti provare a rendere il tag immagine in questo modo

      <img src="#" width="20" style="width:20px;height:20px">

      , ovvero inserendo sia il CSS inline che l’attributo width.

      Per quanto riguarda invece le crocette ahimé quella è una misura di sicurezza di Outlook, che di default non scarica le risorse esterne. Ciò è controllabile solo dal tuo destinatario: io per esempio di default scelgo sempre di scaricare le immagini dalle mail che ricevo!

  12. Ciao Michele,

    grazie mille per la risposta!
    Ho messo qui https://tinyurl.com/4t9evhee le due firme html. Mi sembra che nel codice le dimensioni siano date, sia larghezza che altezza – qui l’estratto:

    La cosa strana è che visualizzandolo su browser è sempre in ordine, tranne su Outlook.

    Grazie anche per la delucidazione sulle malefiche “crocette” di Outlook (da un singolo mittente, una volta scaricate si è a posto, o lo chiederà ad ogni mail ricevuta, nel caso il destinatario mantenga di default di non scaricare risorse esterne?)!

    Grazie ancora!

    Gabriella

    Rispondi
  13. Buongiorno Michele,

    ho creato una firma su HUBSPOT da inserire in MAIL (mac) ma non riesco a visualizzarla correttamente.

    Una volta creata la firma ho scelto “copy your signature code” ma quando lo incollo su mail (ho tolto la spunta su “usa sempre il mio font di default” mi viene fuori un lungo codice e niente più di questo.
    Ho usato chrome per fare il procedimento.
    Come posso risolvere ?

    Ti ringrazio in anticipo
    Andrea

    ps Questo è il codice che copia da HUBSPOT.

    Andrea SchenatoROV SUPERVISOR – SENIOR PILOT +393391795295[email protected]Create Your Own Free Signature

    Rispondi
    • Buondì Andrea!
      Perdona il ritardo. Purtroppo mi sembra un po’ povero il codice HTML che hai copiato da Hubspot. Questo è completamente privo di stile (dunque di CSS). Possibile tu stia dimenticando qualcosa? Hai provato per curiosità a copiare da Hubspot e creare da Bloc notes un file vergine, incollare tutto e salvarlo come firma.html per esempio? Se lo fai e apri questo file con Chrome cosa vedi?

  14. Ciao Michele,
    io lavoro su Mac e con il nuovo Monterey ci sono molti tool personalizzabili davvero validi per ottimizzare il lavoro.
    Ho seguito le tue istruzioni per la firma, ma quando la incollo (ho provato anche da iPhone, non si sa mai) continua ad apparire in html nelle preferenze mail e anche in una vera e propria email.
    Hai altri consigli?
    Grazie mille

    Rispondi
    • Ciao Eleonora!
      Strano, su Apple Mail non dovresti proprio incollare codice HTML, bensì salvare la firma come file .HTML,aprirlo con Chrome, selezionare tutto, copiare e solo allora incollare nelle settings del client! È quello che hai fatto? Non è che hai copiato dall’editor di testo il codice HTML e hai incollato quello?

  15. Ciao Michele,
    ho utilizzato il tuo tutorial per creare la mia firma mail aziendale e ha funzionato tutto correttamente.
    Poi ho seguito lo stesso identico procedimento per creare quella di un cliente (l’unica cosa di differente che ho fatto è creare una tabella a due colonne invece che una perchè mi serviva affiancare immagine e dati) e in questo caso se apro le mail dal telefono (sia da Apple mail che dall’app Gmail) non vengono tenuti i font scelti (inseriti all’interno di con il codice @import…..). Tu sai per caso ipotizzare il perchè?

    Grazie mille!

    Rispondi
    • Ciao Marta!
      Sono contento che la mia guida ti sia stata utile.
      Posso chiederti quali font hai voluto integrare nella firma HTML?
      Ti anticipo che purtroppo nelle mail gli unici font affidabili sono font di sistema, in quanto i fogli di stile esterni non vengono elaborati da alcun client.
      Per questo solitamente ci si affida a dei font stack.

    • Ciao Michele, grazie della risposta!
      Ho provato a integrare il google font Roboto Slab inserendo nel tag style @import ecc ma se mi dici che non funziona allora risolto l’arcano 🙂

  16. Ciao Michele,
    grazie, davvero tutto chiaro!
    Io ho però un dubbio, o meglio, un problema: le immagini utilizzate, e salvate sul mio server o su un server qualsiasi, una volta modificate (per restyling logo ad esempio) non sono più aggiornate nelle email.
    Mi spiego meglio.
    Ho creato una firma HTML con al piede un banner che, a seconda dell’evento od occasione, cambia grafica ma non dimensioni.
    Il banner è un .png con un nome univoco per non modificare l’html della firma, lo sostituisco e in teoria dovrebbe cambiarlo.
    Dovrebbe.
    Lo fa con Thunderbird che usa il mio file HTML ma tutti gli altri client, con cui ho fatto copia e incolla come da indicazioni, sembrano ignorare il tutto compreso il link che ho assegnato al banner.
    Perchè non funzionano? Come faccio ad utilizzare l’html con gli altri client?
    Ti ringrazio in anticipo e ti faccio ancora i complimenti.

    Marco

    Rispondi
    • Ciao Marco!
      Sono contento tu abbia trovato l’articolo utile!
      Non capisco: il problema sui client che hai riscontrato (tranne Thunderbird) è che dato un nome file (esempio “banner.png”) questo non si aggiorna automaticamente quando sostituisci la grafica o che proprio non riesci ad utilizzare la firma HTML sui suddetti software? Mi fai un esempio concreto e magari provi a mandarmi una mail così la ispeziono?

  17. Ciao Michele,
    grazie per la velocissima risposta!
    Scusa la mia poca chiarezza. Lo scopo della mia firma era poter aggiornare il banner, che vedi nel mezzo della firma (che ti ho inviato poco fa) e il relativo link senza dover obbligare le persone proprietarie dei relativi account, ad aggiornare la firma.

    Marco

    Rispondi

Lascia un commento