Passa al contenuto principale

Realizzare l’HTML dell’email

Premessa​

Nel caso si desideri scrivere il proprio messaggio direttamente in linguaggio HTML, sarà utile conoscere le specifiche che permettono una corretta visualizzazione del messaggio stesso sulla maggior parte delle webmail e dei programmi di posta (Outlook, Thunderbird, ecc…). Esse sono state elaborate sulla base dell’esperienza maturata dallo staff di ContactLab nel corso degli anni e delle migliaia di spedizioni inviate dai nostri clienti.

Obiettivo​

Imparare quali sono le specifiche tecniche da tener presente nel realizzare l’HTML da inviare con ContactLab.

Regola generale​

L’HTML di un’email deve essere più "semplice e pulito" rispetto a quello di una pagina di un sito web: le webmail e i programmi di posta hanno infatti difficoltà a gestire determinati elementi (fogli di stile, javascript, flash) che invece un browser gestisce tranquillamente. Nelle specifiche saranno indicati gli elementi da non inserire nel vostro messaggio per evitare problemi di visualizzazione da parte dell’utente finale.

Specifiche​

Impaginazione dei contenuti​

Tutto il contenuto del messaggio va inserito all’interno di una tabella a larghezza fissa (specificando quindi la larghezza nell’attributo width del tag <table>). Per ogni cella dovete inserire la larghezza (es. <td width="121">).

Larghezza consigliata​

La tabella esterna citata nel punto 1 dovrà avere una larghezza fissa. La larghezza consigliata è di 550 pixel: in questo modo si è sicuri che non compaia la barra di scorrimento orizzontale su tutti i principali programmi di posta e webmail. Se si ha invece l’esigenza di un layout con una larghezza maggiore, la larghezza massima che raccomandiamo è di 600 pixel: molti programmi e webmail visualizzeranno il messaggio correttamente e dove invece comparirà la barra di scorrimento orizzontale, sarà comunque uno scorrimento minimo che non dovrebbe creare fastidio all’utente finale.

Lunghezza consigliata​

Non c’è una lunghezza consigliata per motivi tecnici. Ovviamente i messaggi di una newsletter o di una DEM commerciale per essere efficaci non dovrebbero essere troppo lunghi, ma rimandare il più possibile a pagine web attraverso l’inserimento di link nel messaggio.

Tag <title> nella <head>​

Inserire un testo nel tag <title>. Evitare di lasciare il testo di default assegnato dall’editor html (es. "Untitled1" o "Nuova pagina 1") meglio se simile all’oggetto dell’email.

Uso dei fogli di stile​

I fogli di stile (CSS) vanno usati "con parsimonia". Ecco come:

  • Non usare i CSS per determinare la posizione di un elemento (es. allineamento di un’immagine o di una tabella, padding, float, ecc…)

  • All’ interno del HTML della newsletter inserire il CSS:

    • Interno (nel tag <head>), il CSS interno dovrà essere commentato (cioè tutti gli elementi del foglio di stile, esclusi i tag style, devono essere compresi tra i simboli).
    • Esterno (inserire il link al foglio di stile esterno nel tag <body>; il file sarà caricato sul server di Contactsend oppure sul vostro server).
    • In linea (inserire il CSS nelle celle, all’interno del link e del tag <div> – dove si richiama la classe).

    IMPORTANTE: i 3 fogli di stile devono avere le stesse caratteristiche.

Immagini​

Le immagini andrebbero caricate su un server (su quello di Contactsend o su un vostro server) e poi inserite nell’attributo src del tag. Il formato deve essere jpg o gif (può essere anche una gif animata). Si sconsiglia vivamente di inserire immagini mappate. Ogni immagine dovrebbe pesare il meno possibile per rientrare nel limite complessivo di peso consigliato (60 KB).

Immagini di sfondo​

Se all’interno del vostro HTML ci sono immagini di sfondo, evitare di scrivere il testo in bianco (o comunque dello stesso colore dello sfondo del <body>) anche perché chi ha il blocco delle immagini attivato sul suo client di posta non visualizzerà il messaggio. Le immagini di sfondo non si possono inserire nel foglio di stile, dovete inserirle all’interno della cella (es. <td background="bg_ombra_2.gif">). Possibilmente evitare di inserire le immagini di sfondo perché tendono a creare problemi di visualizzazione e non sono supportate da Outlook 2007.

Bilanciamento testo – immagini​

E’ consigliabile evitare di inserire solamente immagini nell’HTML: questo aumenterebbe di molto la probabilità che il messaggio finisca nello SPAM. E’ quindi consigliato l’utilizzo del testo al posto delle immagini. Le immagini molto grandi andrebbero divise in due o più parti e poi composte usando una tabella.

Denominazione immagini​

Assegnare ad ogni immagine un nome significativo di quel che rappresenta. Evitare dunque nomi del tipo: 001.gif, 002.gif o foto1.jpg, foto2.jpg ecc.. Questo accorgimento diminuisce il rischio che il messaggio venga considerato SPAM. Evitare di utilizzare spazi e lettere accentate nell’assegnazione del nome delle immagini. E’ invece possibile utilizzare caratteri come l’underscore (es. foto_vacanza.jpg).

Caratteri​

Fare attenzione ai caratteri di Word (es. le virgolette, i puntini sospensivi, i trattini e gli apostrofi) sono da sostituire con i corrispettivi simboli digitati da tastiera.

Peso consigliato​

Il peso di HTML + immagini non dovrebbe superare i 60 KB.

Elementi da evitare​

  • Immagini mappate: non inserire immagini che contengono una mappa. Piuttosto dividere l’immagine e per poi ricomporla in una tabella linkando i singoli pezzi.
  • Javascript: non inserire javascript nell’HTML del messaggio.
  • Flash: non inserire file flash (.swf) nell’HTML. Se è proprio necessario inserire elementi in movimento, usare le gif animate.
  • Testo linkato: non mettere come testo l’url del link. Ad esempio, evitare link come: <a href="https://www.contactlab.com">www.contactlab.com</a> questo perchè alcuni programmi di posta diffusi, tra cui Thunderbird, effettuano un controllo antiphishing che potrebbe segnalare come sospetto un link del genere. Sostituirlo con del testo, come ad esempio: <a href="https://www.contactlab.com">Contactlab</a>

Consigliamo inoltre:

  • Di inserire ad inizio pagina la frase "se non visualizzi correttamente questo messaggio clicca qui" (con il link che rimandi ad una pagina fissa caricata sul server o il codice ${online_version_url}$ in modo da dare la possibilita’ a tutti gli utenti di visualizzare correttamente il gruppo.
  • Di inserire a fondo pagina il riferimento al Codice per quanto riguarda il trattamento dei dati personali in materia di privacy.
  • Di inserire a fondo pagina il link che dia agli utenti la possibilita’ di disiscriversi dalla newsletter.

Limiti invalicabili​

Le specifiche sopra indicate permettono una corretta visualizzazione nella stragrande maggioranza delle webmail e dei programmi di posta attualmente in uso. Ovviamente ci sono dei limiti indipendenti dalla nostra volontà (politiche dei singoli provider o produttori di software) che non abbiamo modo di risolvere. Attualmente ad esempio sono note politiche di blocco dei fogli di stile da parte di GMail e di Hotmail: su queste webmail quindi il messaggio potrebbe risultare scomposto, pur rispettando le nostre specifiche. Problemi di visualizzazione si segnalano spesso anche con il programma di posta della suite Lotus.

Testare le email prima dell’invio​

Ricordiamo che il modo migliore per controllare la corretta visualizzazione di un’email e il funzionamento dei suoi elementi è inviare un test prima della spedizione effettiva. Contactsend dà la possibilità di creare un filtro di test per ogni database (cfr. "Configura –> DB utenti") e di inviargli una spedizione di test (cfr. "Crea –> Spedizione Email"). E’ sempre consigliabile inserire nel test diversi indirizzi, in modo da poterli controllare con diversi programmi di posta e con diversi webmail.

Immagini incorporate​

Normalmente un’email in html prevede che le immagini contenute nel messaggio siano caricate su un server esterno e poi caricate quando l’utente legge l’email. In alternativa a questo procedimento standard, è possibile "incorporare" le immagini nel messaggio (le immagini diventano incorporate, o "embedded"): quindi non verranno più caricate da un server esterno ma saranno già incluse all’interno dell’email.

Vantaggi e svantaggi​

Il principale motivo per cui si può scegliere di avere immagini embedded nell’email è evitare le funzionalità di blocco delle immagini che la maggior parte dei client di posta e delle caselle webmail attuano. In questo modo si ha il vantaggio che il messaggio sarà subito visualizzato correttamentecon tutte le immagini al loro posto, da tutti gli utenti.

Dall’altro lato però, le immagini embedded portano alcuni svantaggi:

  • Aumenta parecchio il rischio che il messaggio venga considerato spam
  • Aumenta il peso dell’email stessa (il peso delle immagini si somma a quello dell’html)

Notare che l’immagine "spia" usata per tracciare le aperture delle email non può essere incorporata perché viene inserita in automatico dal sistema.

Procedimento​

La base di partenza è un html "standard", in cui le immagini siano linkate e collocate su un server esterno, del tipo: <img src="https://server.it/img/foto.jpg">

A questo punto bisogna:

  • Modificare manualmente i tag inserendo prima dell’indirizzo (URL) dell’immagine @( e subito dopo l’URL )@:
    <img src=https://server.it/img/foto.jpg>
    diventa
    <img src="@(https://server.it/img/foto.jpg)@">
  • Una volta modificati tutti i tag del testo come indicato nel punto 2 qui sopra, salvare l’html modificato sul pc.
  • Andare in Contactsend nella sezione Crea > Nuova spedizione > (nome gruppo) > Contenuto del messaggio.
  • Alla schermata del contenuto del messaggio, caricare il file con l’html modificato utilizzando il pulsante "Carica da: un file sul mio computer".

Ora l’html modificato è stato caricato all’interno di ContactLab. Terminare la creazione spedizione normalmente procedendo col pulsante avanti. Le immagini saranno incluse all’interno del <body> del messaggio.

Effettuare un test per verificare che le immagini embedded si visualizzino correttamente.

informazioni

Se ci si dimentica di modificare dei tag <img> con la sintassi @(https://…)@ non sarà generato alcun errore; semplicemente quelle immagini saranno ancora caricate dal server su cui si trovano, al momento dell’apertura dell’email, e quindi potranno essere bloccate da eventuali dispositivi di blocco-immagini del client o della casella webmail.