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

Pagina 1 di 2

La newsletter è uno dei "must" dei servizi offerti dai portali seri, in quanto fa sì che gli utenti più affezionati possano ricevere le novità relative al portale direttamente via mail, senza dover aprire il browser e recarsi sul sito. Ma la newsletter non è utile solamente agli utenti, ma anche a webmaster di un portale, in quanto l' analisi di quanti vi sono iscritti, di quante email vengono lette ed approfondite sul portale sono importanti elementi di statistica, da tener presente in caso di miglioramento del portale.

Il problema mi metter su un servizio di newsletter dove stà? Nella sua non facile creazione.

Come primo problema da superare infatti c'è il fatto che esistono decine e decine di software utilizzati per leggere la posta elettronica (Outlook, Eudora, Thunderbird, AOL, Google Mail, Hotmail, ecc) e ogniuno presenta le proprie caratteristiche, e la newsletter dovrà tenerne presente se vorrà inviare mail compatibili con tutti i principali client SMTP.

Passo 1: Usare le tabelle per creare un buon layout

Leggendo il sottotitolo, si potrebbe pensare: "Ma usare le tabella per l' impaginazione di una pagina web sono ormai roba passata!" verissimo, il fatto è che qui non stiamo parlando di pagine web :-) Ma di email, e solamente i più nuovi e completi client di posta elettronica sono in grado di impaginare le email basate sui CSS, e dal momento che in questo tutorial andremo a cercare una buona compatibilità con tutti i più diffusi client email, direi che è meglio lasciar stare ed usare le buone e vecchie tabelle.

Innanzitutto dobbiamo pensare a quale stile vogliamo conferire alle nostre email. Tra gli stili più usati nelle newsletter troviamo il layout ad una colonna e quello a due, che sono quelli che lavorano meglio in caso di parecchie righe di discorso concentrate nel piccolo spazio di una mail.

Una struttura a colonna singola tipicamente consiste in:

  1. un header, contenente un logo ed il link che rimanda alla home del portale

  2. links che colleghino alle parti più in basso della mail, così da evitare al lettore di scorrere tutta la mail per leggere gli ultimi paragrafi

  3. un footer in fondo alla mail, contenente vari links alla home page del portale, alla mail del supporto tecnico e le istruzioni su come de-registrarsi dalla newsletter

Le email a due colonne usano anche loro un header ed un footer e, come una normale pagine a due colonne, aggiungono una piccola colonna dove mostrano i dettagli sul portale, su chi lo gestisce ed altre informazioni.

Le newsletter promozionali seguono regole simili, ma spesso integrano una grande immagine del prodotto e solamente poche righe di testo che lo promuovano.

Naturalmente queste diverse strutture le si possono creare tranquillamente usando un editor HTML ed usando le tabelle per suddividere lo spazio nella pagina.

Vediamo come si è soliti procedere nella creazione di email in HTML

  •  Per un layout a due colonne, creare una tabella avente una riga per l' header, due colonne centrali per il centro della mail ed un' altra riga per il footer. Queste tabelle (3 in totale fino ad ora) verranno poi racchiuse da una quarta tabella. Stesso discorso per creare una struttura a colonna singola, nella quale però la parte centrale della mail sarà occupata da una colonna e non da due.

  • Bisogna settare gli attributi di ciascuna riga/colonna delle nostre tabelle, ad esempio impostando border="0", valign="top", align="left" (o center), cellpadding="0", cellspacing="0". Queste informazioni saranno un primo aiuto per il client email che dovrà interpretare e mostrare la mail.

  • Nel caso si incappi in errori di visualizzazione può ritornar utile impostare l' attributo border delle nostre tabelle a 1 (border="1") il che renderà più facili le operazioni di debug.

Passo 2: Aggiungere stili CSS e non

Come già detto all' inizio, la compatibilità tra CSS e client email non è elevata, ed usare molto codice CSS nella mail della nostra newsletter potrebbe facilmente risultare un disastro.Nonostante ciò il loro utilizzo è accettato una volta che lo stile della mail è già stato definito tramite tabelle, e noi questo l' abbiamo già fatto. Vediamo come integrare alcuni comandi CSS.

Innanzitutto, iniziamo ad usare codici CSS da immettere direttamente nel codice email, come questo esempio:

    <p style=";">

Attenzione a non usare dichiarazioni CSS all' interno della tag <html> in quanto Google Mail le ignorerà, così come farà Hotmail e lo stesso Google Mail se si tenterà di far riferimento ad uno stile.css esterno.

Per la tabella che ingloba tutte le altre, è bene impostare l' attributo width a 98%, in quanto Yahoo! mail richiede un distacco minimo dell' 1% su ogni lato della mail. Per quanto riguarda la tabelle interne invece la width può restare normalmente a 100%.

Prestare inoltre attenzione ad inserire gli attributi relativi al font di scrittura all' interno della tag <td> di ciascuna tabella.

Un modo per rimediare all' abbondanza di codice è usare la seganografia dei CSS; per esempio, anzichè scrivere:

    style="margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-right: 0;"

può venire più utile la forma compressa:

    style="margin: 10px 5px 10px 0;"

Esistono però alcuni server che, prima di inoltrare le mail al client di posta elettronica, controllano i codici delle mail ed espandono i comandi "compressi" , come quello nell' esempio sopra riportato. Questo per rendere più facile la vita ai client di posta.

Altro accorgimento è l' usare il blocco <div> solamente se necessario, ad esempio nel caso si voglia proporre un piccolo box testuale o alcuni links posizionati o a destra o a sinistra. Da notare che Google Mail sembra ignorare le dichiarazioni CSS e quindi talvolta risulta più efficiente scrivere un più completo codice per ciascuna tabella.

Mentre i blocchi <div> come si è già detto spesso danno problemi, conferiscono grande stabilità quelli <span> , stabili in quanto cosiddetti "inline elements". Essi possono essere utilizzati per colorare e dimensionare un testo, ma anche per spostarlo da una parte all' altra della pagina.

Continua >>>

 



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Francesco
Hai dubbi su questo articolo?