Passa al contenuto principale

HTML Best Practice

Consigli per un'email di successo​

Immagini incorporate​

Normalmente un'email in HTML prevede che le immagini contenute nel messaggio siano messe su un server esterno e poi caricate quando l’utente legge la comunicazione. In alternativa a questo procedimento standard, è possibile incorporare (da qui immagini embedded) le immagini nel messaggio: non sono più caricate da un server esterno ma sono già incluse all’interno dell’email.

Pro e Contro​

Il principale motivo per cui si può scegliere di avere immagini embedded nell’email è evitare il blocco delle immagini, che la maggior parte dei client di posta e delle caselle webmail attuano. In questo modo il messaggio è subito visualizzato correttamente da chiunque, con tutte le immagini al proprio posto. Dall’altro lato però, le immagini embedded aumentano di parecchio il rischio che il messaggio sia considerato come spam perché aumenta il peso dell'email. Il peso delle immagini si somma infatti a quello dell’html.

Nota: l’immagine spia usata per tracciare le aperture delle email non può essere incorporata perché è inserita in automatico dal sistema.

Come procedere su Send​

  1. La base di partenza è un HTML standard in cui le immagini sono caricate su un server esterno del tipo: <img src="https://server.it/img/foto.jpg">.
  2. A questo punto modificare manualmente i tag inserendo prima dell’indirizzo (URL) dell’immagine @( e subito dopo l’URL )@
  3. Una volta modificati tutti i tag del testo come indicato nel punto 2 qui sopra, salvare l’HTML modificato sul pc
  4. Accedere quindi alla piattaforma e andare su Send nella sezione Crea > Nuova spedizione > (nome gruppo) > Contenuto del messaggio
  5. Arrivati alla schermata del contenuto del messaggio, caricare il file con l’HTML modificato utilizzando il pulsante “Carica da: un file sul mio computer" o incollare direttamente il codice nella Text-Area
  6. Ora l’HTML modificato è stato caricato all’interno di Send. Terminare la creazione della spedizione normalmente, procedendo col pulsante avanti. Le immagini saranno incluse all’interno del <body> del messaggio.
  7. Effettuare un test per verificare che le immagini embedded si visualizzino correttamente.

Nota: se non si modificano i percorsi nei 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.

Come creare un’email responsive​

Esistono diverse tecniche per sviluppare un'email responsive:

  • Con layout fluido, dichiarando i valori delle tabelle in percentuale o utilizzando max-width e min-width.
  • Con layout adaptive, sviluppando un html ad-hoc in modo che la struttura si adatti al viewport (es. con l’incolonnamento stacking dei vari box).
  • Con la dichiarazione CSS: media query che permette di variare stili e dimensioni in base alla dimensione del display sul quale viene visualizzata la newsletter.

Tutte le tecniche hanno dei limiti di supporto imposti dai diversi client/app/device e vanno valutati in base al layout. Di seguito, qualche indicazione di base.

Nell’head aggiungere il seguente codice:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-
scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8″>
<meta name="x-apple-disable-message-reformatting">

Dichiarare nello stile i media query, in questo modo: @media screen and (max-device-width: 568px), screen and (max-width: 568px) { CSS* }

Dove 568px è la larghezza massima del viewport sul quale saranno applicati gli stili *CSS dichiarare le classi utilizzate nell’html utilizzate per la visualizzazione mobile.

Esempio

Per non visualizzare un contenuto su mobile utilizzare la seguente classe:

.onlydesktop {display:none !important; width:0 !important;}

Utilizzare commenti condizionali (if mso) per assicurarsi una corretta visualizzazione su Outlook

Esempio

<!–[if mso]>\</td><td style="padding-top:0;padding-bottom:0;padding-right:0;padding- left:0;vertical-align:top;"><![endif]–>

Inserire in ogni td style="padding: 0px; vertical-align:top;" per prevenire spaziature aggiuntive.

Non dimenticarti l’ottimizzazione mobile​

Il mobile rappresenta oggi uno dei canali maggiormente usati per la comunicazione, e non solo per quanto riguarda SMS e Instant Messaging, ma anche per la ricezione delle email. Assicurarsi sempre che le proprie comunicazioni vengano ricevute in modo corretto, rispettando il design stabilito in fase di progettazione e con un elevato livello qualitativo è quindi oggi fondamentale.

Per sviluppare un layout fruibile su dispositivi mobile occorre ripensare la struttura in ottica “mobile first" e seguire alcuni semplice suggerimenti:

  • Testi superiori ai 14px
  • Bottoni grandi almeno 40px per dispositivi touch
  • Spazio tra i vari elementi cliccabili di almeno 10/15px
  • Immagini di dimensioni doppie e medesime proporzioni per una resa corretta su display retina/hd
  • Elementi fissi non superiori ai 320px
  • Eliminare contenuti di bassa priorità, pesanti e inutili
  • Dare un buon contrasto agli elementi

Limiti invalicabili​

Quanto sopra indicato permette una corretta visualizzazione nella maggioranza delle webmail e dei programmi di posta attualmente in uso. Ovviamente, ci sono dei limiti imposti dalle politiche dei singoli provider o produttori di software, che non si possono risolvere. Problemi di visualizzazione si segnalano spesso anche con il programma di posta della suite Lotus.

Testare le email prima dell’invio​

Il modo migliore per controllare la corretta visualizzazione di un’email e il funzionamento dei suoi elementi è comunque quello di inviare un test prima della spedizione effettiva.

Send dà la possibilità di creare un filtro di test per ogni database (cfr. “Configura –> DB utenti") e di inviare una spedizione di test (cfr. “Crea –> Spedizione Email"). Si consiglia di inserire nel test diversi indirizzi, in modo da poterli controllare con diversi programmi di posta e con diverse webmail.

Quindi, come abbiamo visto tanti e diversi sono gli accorgimenti che si possono o meglio, devono mettere in atto per creare email di successo in grado di essere visualizzate correttamente e scatenare interesse nei tuoi contatti.

Seguendo questi consigli potresti essere in grado di realizzare email di qualità superiore, che si visualizzano in modo chiaro e completo su ogni tipo di browser e per questo motivo di facile lettura.

In caso di dubbi e domande non esitare a contattare il nostro Servizio Clienti, sempre a tua disposizione.