• Programmazione » HTML » Tutorial HTML

Pagina 1 di 2

La newsletter è uno dei "must" deiservizi offerti dai portali seri, in quanto fa sì chegli utenti più affezionati possano ricevere lenovità relative al portale direttamente via mail,senza dover aprire il browser e recarsi sul sito. Ma lanewsletter non è utile solamente agli utenti, maanche a webmaster di un portale, in quanto l' analisi diquanti vi sono iscritti, di quante email vengono lette edapprofondite sul portale sono importanti elementi distatistica, da tener presente in caso di miglioramento delportale.

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

Come primo problema da superare infatti c'è ilfatto che esistono decine e decine di software utilizzati perleggere la posta elettronica (Outlook, Eudora, Thunderbird,AOL, Google Mail, Hotmail, ecc) e ogniuno presenta leproprie caratteristiche, e la newsletter dovrà tenernepresente se vorrà inviare mail compatibili con tutti iprincipali client SMTP.

Passo 1: Usare le tabelle per creare un buonlayout

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

Innanzitutto dobbiamo pensare a quale stile vogliamoconferire alle nostre email. Tra gli stili più usatinelle newsletter troviamo il layout ad una colonna e quello adue, che sono quelli che lavorano meglio in caso di parecchierighe 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 unfooter e, come una normale pagine a due colonne, aggiungonouna piccola colonna dove mostrano i dettagli sul portale, suchi lo gestisce ed altre informazioni.

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

Naturalmente queste diverse strutture le si possonocreare tranquillamente usando un editor HTML ed usando letabelle per suddividere lo spazio nella pagina.

Vediamo come si è soliti procedere nella creazione diemail 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, lacompatibilità tra CSS e client email non èelevata, ed usare molto codice CSS nella mail della nostranewsletter potrebbe facilmente risultare undisastro.Nonostante ciò il loro utilizzo èaccettato una volta che lo stile della mail ègià stato definito tramite tabelle, e noi questol' abbiamo già fatto. Vediamo come integrarealcuni comandi CSS.

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

    <p style=";">

Attenzione a non usare dichiarazioni CSS all' internodella tag <html> in quanto Google Mail leignorerà, così come farà Hotmail elo stesso Google Mail se si tenterà di far riferimentoad uno stile.css esterno.

Per la tabella che ingloba tutte le altre, è beneimpostare l' attributo width a 98%, in quanto Yahoo! mailrichiede un distacco minimo dell' 1% su ogni lato dellamail. Per quanto riguarda la tabelle interne invece la widthpuò restare normalmente a 100%.

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

Un modo per rimediare all' abbondanza dicodice è 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 lemail al client di posta elettronica, controllano i codicidelle mail ed espandono i comandi "compressi" ,come quello nell' esempio sopra riportato. Questo perrendere più facile la vita ai client di posta.

Altro accorgimento è l' usare il blocco<div> solamente se necessario, ad esempio nel caso sivoglia proporre un piccolo box testuale o alcuni linksposizionati o a destra o a sinistra. Da notare che GoogleMail sembra ignorare le dichiarazioni CSS e quindi talvoltarisulta più efficiente scrivere un più completocodice 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 untesto, ma anche per spostarlo da una parte all' altradella pagina.

Continua>>>