Creare una newsletter in html e css. Soluzioni per la visualizzazione su Outlook, Yahoo Mail e Google Mail, Firefox e Internet Explorer (Parte II)

Pagina 2 di 2

Passo 3: Altri accorgimenti necessari

A questo punto bisogna effettuare un po' di test. La domanda da porsi sarà: "Come si visualizza la nostra email sui principali client di posta?"

Innanzitutto bisogna provare a visualizzarla sia in Firefox che in Internet Explorer. Se in entrambi i browsers risulterà bene impaginata, ci sono buone chances che la mail venga bene interpretata sia da Outlook che da Yahoo! mail che da Google Mail. Effettuato questo primo test bisogna provare ad inviare la mail creata a diverse caselle email, ciascuna gestita da client differenti (Yahoo! mail, Google Mail ed Hotmail) e vedere se e come viene ricevuta.

Di seguito ecco altri accorgimenti per aumentare la compatibilità di una mail con i client di posta:

  • può esser utile bloccare la width degli elementi nella mail. Certo, non è la soluzione ideale, dal momento che il lettore potrebbe decidere di ridimensionare la pagina nel momento in cui legge la mail, ma ciò è necessario per aumentare la compatibilità.

  • se si verifica una perdita delle spaziature interne alle tabelle, innanzitutto si devono settate le proprietà cellspacing e cellpadding delle tabelle
  • se le immagini risultano disposte in modo differente rispetto a come gli abbiamo impostato, molto probabilmente è perchè la tag <img> si trova nidificata all' interno della tag <td>. Per correggere dunque sarà necessario prima chiudere la tag con </td> e poi aprire la <img>
  • evitare il più possibile l' utilizzo del JavaScript, che nella maggior parte dei casi è disabilitato sui client email per motivi legati alla sicurezza
  • nel caso un' immagine risulti spezzettata tra le varie righe e colonne di una tabella, si può ovviare al problema creando una nuova tabella che contenga al suo interno tutte le altre ed impostarle come immagine di sfondo quella in questione
  • ricordarsi di usare sempre l' attributo taget=”_blank” in ogni collegamento ipertestuale, perchè nel caso questo non venisse fatto, ogni link clickato dall' utente non aprirebbe alcun collegamento
  • per inserire immagini di sfondo, evitare di ricorrere a codice CSS e piuttosto impostare tale immagine come sfondo della tabella contenente tutte le altre
  • le immagini che si inseriscono nella mail devono trovarsi preferibilmente in un' apposita sotto-cartella dello spazio web, e non dovranno mai esser cancellate: molti utenti potrebbero leggere dopo mesi la mail e, se le immagini non sono più online, non riuscirebbero più a visualizzarle
  • evitare l' inserimento di immagini da 1x1 pixel, in quanto il loro inserimento è diffusissimo nelle email di spam, e questo farebbe catalogare la nostra mail come tale.
  • Per lo stesso motivo, evitare di inserire immagini che occupino l' intero corpo della mail

Già che con gli ultimi due punti siamo entrati in argomento spam, è consigliato effettuare alcuni test per comprendere con quanta facilità la mail possa venir scambiata per una mail-spazzatura. Per far ciò ci viene in aiuto SpamCeck, servizio che analizza l 'HTML della mail ed elenca quali fattori potrebbero farla scambiare per spam.

Terminato tutto ciò, ormai sicuri che la resa visiva della mail sia pressochè identica su ciascun client di posta (a tal proposito si consiglia l' utilizzo del servizio BrowserCam, in grado di mostrare come viene visualizzata una mail nei principali client email), bisogna pensare ai dettagli della mail:

  • L' indirizzo del mittente deve venire visualizzato?
  • Che oggetto inserire?
  • Le informazioni sono ben visibili?
  • Bisogna integrare ad inizio email alcune righe nelle quali si dice “Hai ricevuto questa mail perchè...Ne caso ci si voglia de-registrare dal servizio...”?

Data una risposta a queste domande, si può procedere.

Passo 4: Accorgimenti per Google Mail

Dal momento che i servizi di lettura mail direttamente da browser, come Google Mail, sono in HTML ed a stretto contatto con la programmazione lato server, si potrebbe pensare che questi non diano problemi durante l' interpretazione di mail scritte in HTML. Errato. Infatti il suo provider di posta elettronica, prima di inoltrare la mail al client, effettua una prima analisi al codice delle mail, apportando alcune correzioni che dovrebbero servire a renderle più comprensibili.

Come prima cosa il provider elimina tutti i codice CSS contenuti all' interno di ciascuna tags di stile, e le dichiarazioni di font contenute all' interno delle tag table restituiscono come output scritte di dimensioni maggiori a quelle impostate.

Ecco alcuni trucchi per avere mail migliori su Google Mail:

  • Definire il colore di sfondo tramite l' attributo bgcolor= di una cella td, evitando di impostarlo tramite codice CSS.
  • Stessa cosa per le immagini, da definire all ' interno della cella td.
  • Per controllare i margini di una cella td è preferibile l' utilizzo dell' attributo padding.
  • Se si vuole che la tabella abbia un contorno, bisogna annidarla all' interno della tag <div>, dal momento che solo in questo caso Google Mail le conferisce contorni ben definiti e visibili.
  • Nel caso si vogliano impostare particolari colori ai collegamenti ipertestuali, usare l' attributo color: nella cella td, associandola ad un font particolare.
  • Se si notano differenze, a parità di font, tra quanto scritto in un <p> e quanto in un <a>, provare a nidificare la tag <a> nella <p>.
  • Google Mail, dotato di un' interfaccia grafica, tende ad accentrare gli elementi delle mail posti sulla destra, in quanto tale porzione di schermo deve essere sfruttata per mostrare l' interfaccia grafica del servizio; ciò provoca uno spostamento centrale di tali elementi. Per questo motivo, accertarsi che i paddings contenuti nelle tags <td> siano impostati a 10px.

Conclusioni

Come si è sicuramente potuto notare gli accorgimenti sono molteplici, il creare email in HTML serie comporta pazienza, tempo e precisione. Certo, si potrebbe sviare il problema creando newsletter in formato testuale, ma le statistiche rivelano che le email in HTML riscontrano un successo nettamente maggiore. Insomma, munirsi di buona pazienza e...aprire l' editor HTML!

 



Ti potrebbe interessare anche

commenta la notizia

Ci sono 5 commenti
Anonimo
non ho capito come allego la mia newsletter HTML nella mail in modo che si vedano le immagini contenute

Antonio Scribano
Ciao, mi sto cimentando nella creazione di una newsletter ed ho trovato questo articolo molto utile (e ben fatto).
Volevo chiederti: cosa ne pensi dell'utilizzo di un layout a larghezza fissa? Ho la necessità di allineare in maniera stabile immagini e testo e con il layout variabile ciò non mi è possibile.
Quale dovrebbe essere secondo te la larghezza massima del layout per essere adeguatamente consultabile con i vari servizi di posta?
Grazie ancora per l'ottima guida!
Antonio

Lorenzo Pascucci
Ciao Antonio,

per essere veramente tranquilli e sicuri che si visualizzi correttamente su qualsiasi client non più larga di 500 / 550 px.

Questo per essere compatibile al 100%. C'è da dire che sicuramente con ormai un buon 70/80% dei client email, puoi realizzare layout anche più grandi a 800px.

Lorenzo

IlDuca
... confermo, io non vado mai oltre i 500px e nessuno si è mai lamentato.
Mi associo ai complimenti per l'articolo: ho avuto delle conferme sul problema Gmail che mi ha fatto impazzire e pensavo di essere rimbambito io. Ottimi consigli e trucchi, li applicherò nella prossima newsletter per un cliente.
Complimenti, chiaro e preciso (in questo settore è merce rara!!!)
Luca

DEA DIANA
Anch'io ho trovato molto utile questo articolo; visto che sono alle prime armi con la creazione di newsletter in html ho trovato molte risposte alle mie domande.
Una cosa però non mi è ancora ben chiara: una volta terminata la pagina in htlm come faccio a spedirla con Mail? Ho provato ad inserirla come allegato ma non funziona, come si deve fare?
Grazie mille per le risposte! ;-)
Diana