Template gratuito per newsletter responsive

Attenzione! Per poter utilizzare il template di newsletter gratuito, che trovate al termine dell’articolo, è necessaria una conoscenza di base dei linguaggi di programmazione HTML e CSS. Buona lettura!

Con la vastità dei mezzi a nostra disposizione, quanto può essere difficile programmare una newsletter? Beh, con tutte le variabili in gioco vi posso assicurare che è più difficile di quanto sembra.

 

Perché è così difficile programmare una newsletter?

Nel mondo del web design siamo stati partecipi di quella che è stata La guerra dei browser. Il mercato era conteso tra Netscape e Internet Explorer, che non competevano solo a livello economico ma anche nelle logiche di programmazione dei loro sistemi. Grazie al Web Standards Project, i browser odierni si sono conformati ad un unico metodo e la situazione è sicuramente migliorata rispetto a 20 anni fa.

Sfortunatamente, questa standardizzazione non ha toccato quelli che sono gli email clients (Outlook, Lotus Notes…).

Per peggiorare la situazione, alcuni client di posta, invece che migliorare la gestione del codice, sono addirittura tornati indietro. Microsoft, dopo l’uscita di Outlook 2007, ha smesso di utilizzare Internet Explorer per il rendering del codice HTML. A prima vista sembrerebbe una buona notizia, se non fosse che il sostituto che è stato scelto è Microsoft Word (sì, esattamente quel Word).

Outlook è un client piuttosto popolare tra gli utenti, ma non è l’unico problema: costruire il codice per una email significa avere a che fare con 4-5 browser web e con una decina di client di posta differenti, e ognuno possiede una grossa fetta di utenza.

 

Perché ottimizzare la tua email per i dispositivi mobile?

Secondo un sondaggio pubblicato da Litmus nel Marzo di quest’anno, il 55% delle email viene aperto da un dispositivo mobile. Si rende necessario un ulteriore passo in avanti che ci porti, come è stato nel caso dei browser e dei client email, ad ottimizzare la lettura anche sui telefoni e i tablet.

 

Come programmiamo allora una email efficiente?

Il sistema per ottenere delle email, che funzionino (quasi) allo stesso modo attraverso le diverse piattaforme, è quello di lavorare (come si faceva un tempo per i siti web) attraverso tabelle. Anche in questo modo però abbiamo bisogno di stilare alcune regole di base:

Semplifichiamo il layout

Per progettare il layout di una newsletter è necessario conoscere la maggior parte delle limitazioni che impongono le diverse piattaforme in cui verrà visualizzato. Uno dei metodi più semplici per non spendere ore nel processo di testing è quello di affidarsi ad un layout a colonna singola (come ad esempio utilizza InVision). Il template che potete trovare al termine dell’articolo segue proprio questo principio.

newsletter

Usiamo CSS inline

Se volessimo assegnare delle regole di stile a tutti i paragrafi del nostro progetto, dovremmo scrivere nell’head della nostra email:

p {
font-size: 12px;
font-weight: bold;
}

Tuttavia, se il client di posta non leggesse l’head (come fa ad esempio Gmail), ciò che abbiamo appena scritto verrebbe del tutto ignorato. Le regole CSS inline vengono inserite direttamente nel marcatore HTML in questo modo:

<p style="font-size: 12px; font-weight: bold">Contenuto del paragrafo</p>

Le regole inline, pur avendo la priorità su tutte le altre, hanno valore solamente per l’elemento in cui sono inserite. Per non perdere tempo scrivendo CSS per ogni elemento, esistono numerose web app che fanno al caso nostro. Io utilizzo e consiglio inliner.cm, che legge le regole inserite nell’head dell’HTML e le inserisce nei singoli elementi senza inserire contenuti aggiuntivi o pubblicità.

Non affidiamoci completamente all’uso di immagini

Per la creazione di siti web, in passato, ci si affidava al taglio e al preciso posizionamento di immagini all’interno delle tabelle che componevano la struttura delle pagine. Non è raro ritrovare questo metodo nell’impostazione delle newsletter odierne (senza escludere i grandi brand). I tempi di realizzazione sono sicuramente ridotti, ma questo è l’unico pregio di questo sistema. Al contrario dei browser, i client di posta disabilitano le immagini dando all’utente la possibilità di scegliere se abilitarle o meno. Diverse ricerche hanno mostrato che quasi il 40% degli utenti non abilita le immagini nelle email (volontariamente e involontariamente).

Testing, testing, e ancora testing

Non c’è scampo. La fase di testing della vostra newsletter è inevitabile. Dovrete inviarla svariate volte e probabilmente per ottenere il risultato che sperate perderete qualche capello. Ci siamo passati tutti. Per semplificarci la vita però esistono strumenti online come Litmus che ci permettono di compiere test su diverse piattaforme con un singolo invio.

 

A questo punto credo di avervi annoiato abbastanza quindi lascerò che siate voi a studiare il vostro metodo. Qui sotto trovate il link per il download del template. Buon lavoro!

  Scarica il file