Guida alla creazione di e-mail in HTML: font, colori e css


Le impostazioni di colori e font e l’utilizzo dei css sono elementi di fondamentale importanza nell’impostazione grafica di una newsletter in html.

Per quanto concerne i font bisogna utilizzare i set standard installati di default da tutti i sistemi operativi. In linea di massima è sempre consigliabile utilizzare i font Arial, Time new Roman, Verdana e Tahoma. Se ci sono necessità particolari legate a questioni di immagine e loghi aziendali che richiedono l’utilizzo di caratteri non standard conviene utilizzare delle immagini, tenendo sempre presente che queste spesso non vengono visualizzate.

Le dimensioni dei font possono essere espresse in pixel, punti o dimensioni html. La mia esperienza mi ha insegnato che conviene utilizzare sempre le dimensioni html che vengono supportate da tutti i client e da tutte le web mail. Questo impedisce di impostare la grafica nel migliore dei modi, ma garantisce la perfetta visualizzazione da parte dell’utente. Per quanto riguarda le dimensioni è consigliabile non scendere mai sotto i 10 punti e i 10 pixel e sotto il size 2 di html.

Anche i colori giocano un ruolo importante. In particolare occorre prestare attenzione all’utilizzo di colori di background. Conviene sempre utilizzare dei colori di sfondo chiari che facilitino la lettura del messaggio, abbinandoli a colori dei font scuri. Procedendo in questo modo si evita anche un altro spiacevole inconveniente che si verifica con le web mail: queste tendono ad eliminare i colori di sfondo. In questa situazione, se si usassero dei colori di sfondo scuri abbinati a colori dei font chiari, in caso di eliminazione del background, il testo chiaro rimarrebbe su sfondo bianco risultando illeggibile. Lo stesso problema si può verificare anche con Outlook inoltrando l’e-mail ricevuta.

Per quanto riguarda i colori dei font, come già detto, è consigliabile utilizzare dei font scuri. Assolutamente da evitare il testo bianco, anche su sfondi scuri. Alcuni filtri antispam interpretano il testo bianco come un tentativo di nascondere del contenuto al destinatario del messaggio e marchiano il messaggio come spam.

I fogli di stile rappresentano un vero rompicapo per chi vuole creare una e-mail in html. Le principali webmail tendono ad eliminarli, mentre i client sembrano essere più permissivi. Se si scegli di utilizzare i fogli di stile conviene sempre utilizzarli in linea ed inserirli non nell’head come avviene per le pagine html ma all’interno del tag body. La scelta degli stili in linea dipende dal fatto che se vengono utilizzati stili esterni questi vengono bloccati come le immagini sia dai client che dalle web mail. La scelta di inserirli nel tag body dipende invece dal fatto che i server di posta tendono a tagliare gli header e tutto il loro contenuto.

La tabella di seguito riassume la visualizzazione degli stili da parte delll principali webmail:

Gmail Hotmail Yahoo Libero Outlook
Stili in linea x v v x v
Stili in linea applicati al tag v v v x v
Stili Esterni x x x v v
Font html v v v v v

Come emerge dalla tabella comparativa il modo miglior per non perdere la formattazione dei testi è quella di utilizzare i font html. In alternativa è possibile studiare il modo per integrare degli stili in linea applicati al tag e degli stili esterni.

Se la tabella non è chiara ho fatto un semplice esempio di newsletter inviata alle varie caselle di posta ed eseguito degli screenshot del codice, della visualizzazione corretta e di come viene visualizzata nelle varie webmail.

L’importante è testare al meglio il codice prima di ogni invio per trovare la soluzione più soddisfacente possibile.


11 risposte a “Guida alla creazione di e-mail in HTML: font, colori e css”

  1. ciao ascolta, io ho davvero bisogno del tuo aiuto, io non riesco a sviluppare una pag in html con outlook, cioè io clicco su fotmato testo “html” poi scrivo tutto il codice pero’ quando visulizzo l’email inviata mi fa vedere il codice html ma la sua visualizzazione “grafica” e poi come si inseriscono i css, ?
    Ciao mille grazie

    • Ciao,

      in tutta sincerità ti dico che outlook non è lo strumento ideale per gestire campagne di email marketing.
      In ogni caso NON puoi copiare e incollare il codice html in una finestra di outlook. Il modo più veloce probabilmente è quello di creare un file di firma in html e utilizzare quello per l’invio.

  2. Ciao,
    complimenti per l’articolo, peccato che non sono riuscito a trovarlo prima di diventare matto a sistemare il codice adatto a tutte le webmail.
    Generalmente mi piace sbrigarmele da me.
    Però questa volta ho bisogno di un grosso consiglio.
    Le formattazione nelle newsletter che preparo le uso tutte: link al CSS esterno, stili dichiarati nel head, stili applicati al tag, e in modo particolare impostazione dei font e della loro dimensione direttamente nel font html. Ed è proprio quest’ultimo che risolve ogni problema di compatibilità.
    E’ sorto però un problema, con questo sistema chi riceve la posta sul MAC vede i font piccolissimi. Nella newsletter ho impostato un font size=2 che su tutte le webmail e clienti di posta per windows si visualizza in modo corretto. Su MAC no, font veramente minuscolo.

    Hai consigli da darmi ?
    Grazie mille

  3. totalmente autodidatta sono riuscita a sviluppare il mio piccolo sito web…
    ma ora sono DISPERATA
    ho creato una pagina html da inviare come mail di auguri natalizi: semplice poche immagini pochi link pochi colori insomma basic.
    il problema è che da NESSUNA parte trovo il sistema, lo script, l’abracadrabra per mi faccia capire come cappero la invio sta pagina!!!

    per favore AIUTO

    • Non c’è nessun abracadabra Carmen 🙂
      Ci sono sistemi che si occupano della gestione delle newsletter che puoi gestire online come ad esempio MailUp o ContactLab o il mio Newsletterplus. Puoi farti un’idea di come funzionano questi sistemi iscrivendoti a Mailchimp che ti permette di fare un invio gratuito ad un numero limitato di indirizzi (500 contatti e 3.000 invi/mese).

      Poi ci sono tanti script in PHP gratuiti che puoi installare per gestire l’invio. Di questi non mi sento di consigliarne uno in particolare perchè ce ne sono tanti e io ne ho provati gran pochi (plugin per Joomla e .NetNuke), quindi ti darei una informazione parziale. Basta che cerchi “script invio newsletter” su google e già trovi una serie di informazioni utili.

      Fammi sapere se ti è stata utile questa informazione.

  4. in parte la risposta è positiva…ma non sono riuscita ad ottenere al 100% il risultato che volevo.
    ma dipende dalle mie competenze (scarse e quasi del tutto autodidatte) 🙂
    grazie ancora del suggerimento

  5. Ciao Alessandro,

    Ho creato una newsletter in HTML e CSS (con qualche aggiunta di HTML5) ma ho molti problemi nella visualizzazione, una volta inviata l’e-mail (libero, hotmail e gmail). Ho letto che avrei dovuto usare una tabella, che una parte del linguaggio non viene letta (il colore di fondo e gli allineamenti, ad esempio).
    Ora, deve ricominciare tutto daccapo o c’è un rimedio che non mi porti via un’altra mezza giornata di lavoro?
    Grazie!

    Carla

  6. Ciao, ho spostato sia i css che i js esterni dentro il body ma come è ovvio ho due errori di validazione, “i link ai css non sono consentiti in quella posizione” poiché vanno nell’head, c’è un modo per validare la pagina pur mettendo css e js nel body? Il tuo articolo mi conferma quanto avevo sospettato a mio tempo, ossia le web mail tagliano tutto ciò che si trova nell’head… possibile che nel 2014 non si possa inviare una mail in html senza trovarsi tagliati determinati contenuti? Su Thunderbird le mie mail html con css esterno e nell’head arriva tranquillamente e si vede benissimo, unico neo sono per l’appunto le web mail… ciao e grazie!

    • Devi accettare un compromesso: mettere i css nel body e saltare la validazione.
      Diverso il discorso per i JS: vengono tagliati quasi sicuramente a prescindere dalla posizione e in alcuni casi sono marchiati come elemento di possibile spam. Sono da evitare totalmente.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *