Modello di newsletter: quattro esempi da scaricare gratis
Un buon template per newsletter è una sola colonna larga al massimo 600 pixel, con il tuo logo in alto, una chiara gerarchia di titoli e testo, un pulsante principale, testi alternativi su ogni immagine, il tuo messaggio in testo vero, un link di disiscrizione e l'indirizzo del mittente in fondo. Chi fissa quegli otto elementi in un template riutilizzabile deve poi sostituire solo il contenuto a ogni edizione.
Qui sotto trovi prima i quattro template di partenza di 2Mail come esempio di modello di newsletter, ciascuno scaricabile gratis in HTML e con la situazione a cui il layout è destinato. Poi che cosa deve contenere ogni template, dove le cose vanno storte in modalità scura, su mobile e in Outlook, e come costruire un modello del genere nel builder drag & drop di 2Mail.
Quattro modelli di newsletter in HTML
Questi sono i quattro template di partenza con cui inizi nel template builder di 2Mail. Ne scegli uno, sostituisci testo, colori e immagini e salvi il risultato come tuo template. Preferisci partire da zero? Allora inizi da una tela vuota.
Newsletter
Un titolo con sotto una linea colorata, una breve introduzione, due articoli affiancati, un pulsante e un piè di pagina con link di disiscrizione. Il layout per una newsletter con una cadenza fissa.
Scarica in HTML
Annuncio ("Announcement")
Una grande immagine in alto, un titolo, un breve testo, tre punti con un segno di spunta e un solo pulsante ben chiaro. Per un lancio, un nuovo servizio o un'offerta.
Scarica in HTML
Invito ("Event Invitation")
Un titolo, un blocco data in evidenza, il nome dell'evento e, sotto, luogo e programma affiancati. Il pulsante porta all'iscrizione.
Scarica in HTML
Testo semplice ("Simple Text")
Niente immagini e nessun pulsante: un saluto iniziale, il tuo testo, una firma e un piè di pagina con link di disiscrizione. Si legge come una mail personale.
Scarica in HTMLLe immagini sono schermate dei template di partenza veri e propri, e ogni download è lo stesso file: l'HTML che il builder di 2Mail genera per quel template. Il testo di esempio è in inglese; lo sostituisci con i tuoi contenuti. Sei già cliente? Allora scegli "Start from template" nel builder: lo stesso layout, ma modificabile a blocchi. Un file scaricato si carica da Templates → "Upload HTML" e poi si modifica nell'editor di codice.
Modello, template, layout o formato?
Queste quattro parole vengono usate come sinonimi e nella pratica significano la stessa cosa: l'impaginazione fissa in cui inserisci ogni edizione. "Template" e "modello" indicano il file riutilizzabile, "layout" e "formato" piuttosto la sua disposizione.
Il layout di una newsletter
Il layout è l'ordine e il ritmo dei blocchi: che cosa sta in alto, quanti argomenti seguono e dove va il pulsante. Una sola colonna è la scelta sicura; due colonne vanno bene per una griglia di prodotti, a patto che su mobile si dispongano una sotto l'altra.
L'header di una newsletter
L'header è la fascia sopra il primo titolo: il tuo logo, con il link al tuo sito, ed eventualmente un link per vedere la mail nel browser. Tienilo basso e sobrio. Un menu di navigazione con sei link sta bene su un sito, non in una mail, e spinge il contenuto verso il basso.
Formato e dimensioni
Il formato più diffuso è largo 600 pixel, con immagini fornite a larghezza doppia perché restino nitide su un telefono. La lunghezza è libera, ma mantieni leggero l'HTML: Gmail tronca un messaggio non appena il codice supera circa 100 kB, e a quel punto sparisce anche il tuo link di disiscrizione.
Impaginazione della newsletter: gli otto elementi di un buon template
Non preferenze estetiche, ma elementi che prevengono ciascuno un problema concreto: illeggibilità, filtri antispam, reclami o un obbligo di legge dimenticato.
Una colonna, 600 pixel di larghezza
Una sola colonna si legge ovunque allo stesso modo, da uno schermo largo a un telefono. 600 pixel è la larghezza che praticamente ogni client di posta mostra senza barra di scorrimento orizzontale.
Il tuo logo in alto
Il destinatario deve capire a colpo d'occhio da chi arriva la mail. Il logo rimanda al tuo sito e sta nell'intestazione, sopra il primo titolo — non come grande banner che spinge il contenuto verso il basso.
Una gerarchia chiara
Un titolo principale, sottotitoli per argomento e paragrafi brevi. Chi scorre deve capire in cinque secondi di che cosa parla la mail. Usa corpi di testo che restino leggibili anche su uno schermo piccolo.
Un pulsante principale
Ogni newsletter ha una cosa che vuoi far fare al lettore: ordinare, iscriversi, leggere. Dai a quell'azione un pulsante realizzato come testo e non come immagine, così resta visibile anche senza immagini.
Testi alternativi su ogni immagine
Diverse caselle di posta mostrano le immagini solo dopo un clic. Il testo alternativo è allora ciò che il lettore vede. Senza testi alternativi, di una newsletter ricca di immagini resta solo spazio bianco.
Il tuo messaggio in testo vero
Metti ciò che hai da dire in blocchi di testo, non in un'unica grande immagine. I filtri antispam diffidano di un'e-mail fatta solo di immagini, e chi ha le immagini bloccate non vede nulla. Il testo vero resta sempre leggibile.
Un link di disiscrizione
Obbligatorio, e nel tuo interesse: chi non riesce a disiscriversi clicca su 'spam', e ciò pesa più di una disiscrizione. Metti il link ben visibile in fondo, in parole semplici.
L'indirizzo del mittente
La tua ragione sociale e il tuo indirizzo postale in fondo a ogni newsletter. È un obbligo di legge e allo stesso tempo un segnale di fiducia: un'azienda reale, a un indirizzo reale.
Modalità scura, mobile e Outlook
Un template che nel tuo browser appare bene non è ancora pronto. Tre ambienti causano la maggior parte delle sorprese.
Modalità scura
I client di posta in modalità scura invertono o adattano i tuoi colori. Un logo scuro su sfondo trasparente sparisce; il testo bianco in un pulsante colorato diventa illeggibile. Usa logo con uno sfondo proprio e prova in modalità scura prima di inviare.
Mobile
Gran parte dei tuoi destinatari legge su un telefono. Una sola colonna si adatta da sé, ma i pulsanti devono essere abbastanza grandi da essere toccati con un pollice e i corpi di testo sotto i 14 pixel su mobile vengono ingranditi o ignorati.
Outlook
La versione desktop di Outlook usa un motore di rendering proprio che non conosce molto CSS moderno: immagini di sfondo, angoli arrotondati e alcune spaziature vengono ignorati. Costruisci il tuo template su tabelle, mantieni semplice l'impaginazione e invia un test a un account Outlook.
Provare in caselle di posta reali non è quindi una formalità. Crea in 2Mail un piccolo gruppo di prova con i tuoi indirizzi e invia la campagna prima lì, ad almeno tre caselle di posta reali: una webmail, un telefono e Outlook su un pc. Ciò che appare bene lì appare bene quasi ovunque.
Il template builder di 2Mail
Non devi scrivere HTML. Il template builder drag & drop nella dashboard trasforma gli otto elementi qui sopra in blocchi che trascini, riempi e salvi.
Trascinare i blocchi
Testo, immagine, pulsante, linea di separazione e colonne: trascini i blocchi nell'ordine che vuoi e li riempi. Il builder mantiene in ordine larghezza e struttura e costruisce l'HTML su tabelle, con accorgimenti per Outlook.
Template riutilizzabili
Salva la tua struttura come template e riutilizzala per ogni edizione. Logo, colori, piè di pagina e link di disiscrizione restano fissi; sostituisci solo il contenuto. Così ogni newsletter resta riconoscibile e non dimentichi alcun elemento obbligatorio.
Anteprima live su desktop e mobile
Mentre costruisci, vedi la mail in un'anteprima live e passi con un clic dalla vista desktop a quella mobile. Se vuoi vederla nella vera casella di posta, invia la campagna prima a un piccolo gruppo di prova con i tuoi indirizzi e quelli dei tuoi colleghi, e solo dopo alla tua lista.
Costruire un template in cinque passaggi
Calcola mezza giornata per la prima versione. Dopodiché una nuova edizione ti costa solo il tempo di scrivere il contenuto.
Scegli la struttura
Parti da una colonna di 600 pixel e stabilisci l'ordine: logo, titolo principale, introduzione, due o tre argomenti, pulsante, piè di pagina. Abbozzalo su carta prima di aprire il builder; è più rapido che trascinare avanti e indietro.
Inserisci gli elementi fissi
Nel builder inserisci i blocchi che tornano a ogni edizione: il logo, i colori, il piè di pagina con la tua ragione sociale e il tuo indirizzo postale e il link di disiscrizione. È la parte che non toccherai più.
Inserisci il contenuto e il pulsante principale
Scrivi per ogni argomento un titolo e due o tre frasi, aggiungi un'immagine con testo alternativo e metti un solo pulsante ben chiaro. Controlla nell'anteprima live come appare l'insieme su desktop e su mobile.
Prova in caselle di posta reali
Crea un piccolo gruppo di prova con i tuoi indirizzi e invia la campagna prima lì: a una webmail, a un telefono e a un account Outlook. Guardala anche in modalità scura. Correggi ciò che si sposta o sparisce e riprova.
Salvalo come template
Salva la struttura testata come template riutilizzabile. L'edizione successiva la inizi da quel template e ne sostituisci solo il contenuto, così il design e gli elementi obbligatori restano intatti.
Checklist prima di inviare
Passa in rassegna questi sei punti a ogni edizione. Costano due minuti ed evitano gli errori che non puoi più annullare una volta partita la campagna.
