Luigi Sabbetti

Il mondo del web a 360 gradi

impostare newsletter html

Come impostare newsletter HTML compatibili con tutti i client di posta elettronica? La guida pratica


di // Pubblicato il: // Ultimo aggiornamento:

Un layout HTML ben strutturato è sempre un ottimo biglietto da visita per una newsletter: un messaggio dall’aspetto professionale – anche quando il download delle immagini è impedito dal blocco dei contenuti remoti – comunica subito affidabilità, invogliando i tuoi destinatari a proseguire nella lettura.

Al contrario, le email contenenti esclusivamente testo sono ormai tristemente associate allo spam o addirittura ai tentativi di truffa (phishing in primis), un fattore che, a priori, le rende meno efficaci.

Indice dei contenuti

Newsletter e template HTML: perché la newsletter non viene visualizzata correttamente su Outlook, Gmail o altri client?

È un problema che accomuna chiunque si occupi dell’invio di newsletter: testando l’invio di uno stesso messaggio basato su un template HTML, il risultato finale varia sulla base del client di posta, del browser o dell’app utilizzata per la lettura.

Purtroppo, l’assenza di uno standard rigoroso, condiviso da tutti i client e gli strumenti per la consultazione della posta elettronica fa sì che non tutti i tag HTML siano interpretati correttamente o in modo uguale. Di conseguenza, non è raro che una newsletter impeccabile su Outlook appaia male impaginata se consultata su Gmail.

Migliorare la compatibilità delle newsletter con i diversi client: i tool

La soluzione più rapida per ottenere una newsletter in formato HTML ottimizzata per tutti i client di posta elettronica consiste nel ricorrere a tool appositi come:

  • Email on Acid (emailonacid.com) – Uno strumento online che consente di testare la resa di un’email su tutti i principali client, software e device, combinandoli tra loro per individuare eventuali problemi e intervenire in maniera mirata.
  • OpenDEM (opendem.it) – Una piattaforma online per l’invio di newsletter che integra nell’editor per la creazione dei messaggi uno strumento ad hoc che individua i tag HTML poco compatibili suggerendone la rimozione.

Nota Bene: è inutile mirare a newsletter compatibili con il 100% dei client, specie nel caso di quelli più datati e oggi meno diffusi (ad esempio Outlook 2003), nonostante Email on Acid e strumenti simili, per completezza, includano anche queste alternative.

Migliorare la compatibilità delle newsletter con i diversi client: tips pratici

Quali accorgimenti adottare nella creazione di un template HTML per newsletter?

Di seguito, alcuni utili spunti:

  • preferire l’utilizzo del CSS in-line ai fogli di stile inseriti con il tag <style> in testa al codice. Molti client, tra cui Hotmail, ignorano queste indicazioni grafiche, con il risultato finale di messaggi visualizzati in modo completamente diverso dal dovuto.
  • Ricorrere esclusivamente a sfondi bianchi. In molti casi, le indicazioni relative al colore dello sfondo vengono ignorate dai client, che prediligono il background bianco di default.
  • Prediligere un colore scuro per il font (grigio scuro/nero) per massimizzare la visibilità del testo (testi bianchi su sfondi neri rappresentano una scelta molto rischiosa, perché il risultato finale potrebbe essere quello di un messaggio apparentemente vuoto).
  • Utilizzare i codici esadecimali per la specificazione dei colori (quindi, al posto di color=”white”, preferire color=”#ffffff”).
  • Impostare la larghezza del layout tra i 550 e i 600 px, così da garantire sempre una visualizzazione completa della newsletter, specie tramite i dispositivi mobile.
  • Limitare il peso complessivo della newsletter, evitando di superare i 50/100 kb.
  • Utilizzare esclusivamente i tag di markup XHTML standard, come <p>, <strong>, <em>, <img>, ecc.
  • Sfruttare gli attributi “title” e “alt” per le immagini e “title” per i link per aggiungere frasi descrittive che saranno mostrate al passaggio del mouse sugli elementi in questione nel caso di problemi di visualizzazione della newsletter.
  • Inserire sempre gli attributi dei link dopo “href” (ad esempio <a href=”www.sitodiesempio.it” title=”Visita il sito di esempio”>).
  • Aggiungere a tutti i link l’attributo target=”_blank” per far sì che la pagina di destinazione si apra sempre all’interno di una nuova finestra.
  • Preferire il ricorso al tag <table> per la creazione di tabelle.
  • Specificare il colore dei link aggiungendo <style=”color: #000001″> per evitare che il blu standard sia sostituito dal viola in alcuni client.
  • Tenere a mente che molti tag potrebbero non essere considerati da alcuni client (ad esempio, <body>, <meta>, <head>, <base>, <link>, <script>, <applet>, <frameset>, <frame>, <iframe>, per citare i principali).
  • Evitare il ricorso a script di qualsivoglia tipologia (JavaScript, Flash, Video, ActiveX, Embedding, ecc.), in genere ignorati dalla maggior parte dei client.

Nota Bene: un codice HTML pulito e validato non solo aumenta le chance che la newsletter sia visualizzata esattamente nel modo desiderato, ma migliora il punteggio dato al messaggio dai filtri antispam che selezionano le email in arrivo scartando quelle ritenute indesiderate.

Come validare l’HTML di una newsletter?

Online sono disponibili vari tool che permettono di validare il codice HTML, ovvero di analizzarlo al fine di evidenziare eventuali errori e problematiche da correggere.

Le piattaforme per la gestione di campagne basate sull’invio di newsletter più complete, inoltre, integrano strumenti di questo tipo all’interno dei loro editor, così da rendere più rapido e agevole il lavoro di impaginazione.

Nel caso del già citato OpenDEM, l’editor per la creazione delle newsletter valida in tempo reale il codice HTML, segnalando in presa diretta eventuali errori e possibili correzioni.

Per attivare la funzione occorre selezionare le voci “newsletter” e, quindi, “Crea nuova newsletter”. Dall’editor, quindi, sarà sufficiente passare alla visualizzazione del codice cliccando su “Sorgente”. Mentre si lavora sul codice, la funzione “HTML validator” è sempre attiva: OpenDEM evidenzia gli errori presenti e, con un semplice click, provvede alla correzione, optando per le soluzioni più indicate per massimizzare la compatibilità della newsletter.


Ti è piaciuto questo articolo?
Vuoi restare aggiornato sul mondo del web attraverso i miei articoli? Iscriviti alla newsletter!
Solo contenuti utili e zero spam, parola di lupetto

Luigi Sabbetti

Mi chiamo Luigi Sabbetti e da circa dieci anni mi occupo di Web Marketing e Web Design. Mi piace scrivere e condividere conoscenze informatiche attraverso il mio sito web. Vuoi chiedermi qualcosa? Contattami su Linkedin