Create un file html vuoto. Es :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no">
<title>Mia Firma</title>
<style></style>
</head>
<body></body>
</html>
IMMAGINI
NON INSERIRE IMMAGINI che siano .jpg, .gif, .bppm o altro. Questo perché creano problemi in fase di ricezione al destinatario e il più delle volte i client moderni bloccano risorse esterne e chiedono di volta in volta il consenso al download.
E’ facile aggirare il problema, preparare l’immagine o le immagini che vogliamo utilizzare con le dimensioni finali che vogliamo e bisogna trasformarle in codice html, ci sono molti convertitori online es: https://html.imageonline.co/ (oppure cercare su Google “image to html converter”).
Verrà restituito il codice o una pagina html contenente il tag che ci interessa, è un tag ‘<img’ molto lungo solitamente. Maggiore è la complessità dell’immagine maggiore sarà la lunghezza del tag ma non preoccupiamocene, copiamolo e incolliamolo all’interno del file .html della firma che stiamo creando.
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAA........................
................." alt="logo.png" style="max-width:100%;">
FONT
utilizzare font generici (sanf-serif ad esempio) installati su tutti i pc (considerare tutti i casi, Windows 7 e 10, Linux, Mac le varie versione, ma anche Android e iOS).
Se si ha necessità di un font particolare o uguale su tutte le piattaforme utilizzare GOOGLE FONT (se si ussero i file dei font caricati in firma ci sarebbero 2 problemi: primo più scomoda messere su firma nei client secondo i client vedrebbero i font come elemento esterno chiedendo di volta in volta il consenso al download).
Andare su https://fonts.google.com/, scegliere il font desiderato ed incorporarlo con il metodo ‘Embed’ ‘@import’.
Esempio:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no">
<title>Mia Firma</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
.firma { color: #104160; font-size:14px; font-size:16px; line-height:22px; font-family: 'Lato', sans-serif; }
</style>
ISTRUZIONI
- La firma deve essere scritta in normale html, il problema viene da Outlook per Windows che utilizza un vecchissimo render hmtl per cui NON conviene utilizzare tabelle complesse o particolari elementi grafici strutturali (piuttosto utilizzare metodo immagini). Testare in ogni modo la funzionalità almeno su thunderbird e outlook per Win (outlook Mac purtroppo utilizza un altro motore html)
- Utilizzare i tag html più comuni (<b>, <a>, <i>, <br />, <span>, <div> ecc ecc) in modo da garantire la compatibilità con tutti gli editor.
NOTE
- Se si utilizzano tag <table> non preoccuparsi se su thunderbird nella fase di scrittura messaggio i contorni delle tabelle sono tratteggiati di rosso, una volta inviati non appaiono, sono solo righe dell’editor in fase di scrittura.
ESEMPIO
Firma semplice, struttura verticale una riga sotto l’altra, una normale firma insomma (tag <img> molto lungo, ma come spiegato prima è la versione html dell’immagine):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no">
<title>Mia Firma</title>
<style> @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
.firma { color: #104160; font-size:14px; font-size:16px; line-height:22px; font-family: 'Lato', sans-serif; }
</style>
</head>
<body>
<div class="firma">
<b>MIA AZIENDA SRL - VENDITA ELETTRONICA </b><br />
40000 Ozzano dell'Emilia (Bologna), via MiaVia4, 7<br />
Tel +39 06 0000000000 Cell +39 335 000000000<br />
<a href="mailto:myemail@miosito.it">:myemail@miosito.it</a><br />
<a href="mailto:myemail.pec@miodito.it">myemail.pec@miodito.it</a><br />
<a href="ttp://www.miosito.it">www.miosito.it</a>
</div>
<br />
<img src="data:image/png;base64,iVBORw0KGgoAAA............
.................. ................." alt="logo.png" style="max-width:100%;">
</body>
</html>
