e-mail marketing
in pillole
consigli tecnici per l’impostazione
di newsletter e dem efficaci
Indice
Di cosa parliamo ........................................................................................................................... 2
01 Impaginazione. .......................................................................................................................... 2
02 Formattazione del testo................................................................................................. 4
03 Mobile ................................................................................................................................................ 6
04 Curiosità .......................................................................................................................................... 7
05 Link utili ........................................................................................................................................ 10
white paper
e-mail marketing
in pillole
Di cosa parliamo
Impostare una newsletter o una DEM richiede competenza tecnica e molta attenzione. Ci sono alcuni particolari che non vanno tralasciati per evitare che le campagne
di e-­mail marketing perdano efficacia. I contenuti delle mail non devono essere confusi o difficilmente reperibili, il layout deve avere caratteristiche specifiche, bisogna
progettare strutture “mobile-oriented” e prestare attenzione alle regole imposte da
alcuni browser, client o webmail. In questo white paper ci sono i nostri tips, i suggerimenti di e-­spresso per impostare campagne newsletter e DEM efficaci.
2
white paper
e-mail marketing
in pillole
Impaginazione
1.1Struttura
Lasciate che respiri. Allo stato attuale della tecnologia, il testo può essere renderizzato in modo diverso su client di posta differenti, così come sullo stesso client in
sistemi operativi differenti: evitare le strutture fortemente ingabbiate e privilegiare soluzioni in cui il testo sia libero di ingrandirsi senza pregiudicare l’impaginazione.
1.2Gerarchia
Ogni cosa al proprio posto. Ogni
elemento inserito
in una newsletter/
dem deve avere
una gerarchia precisa e guidare il lettore, con un unico
colpo d’occhio, alla
visualizzazione dei
messaggi più importanti.
notizia principale
rubriche fisse
box
1.3Rubriche Una guida alla
lettura. Soprattutto in caso di news­
letter periodiche, è
utile organizzare i
contenuti suddividendoli in rubriche (fisse, periodiche o alternate), per instradare il
lettore verso le informazioni per lui più interessanti.
1.4Tabelle
Un’impostazione rigorosa aiuta. L’utilizzo delle tabelle agevola una più solida
configurazione dei layout: per definirne le dimensioni non è necessario impostare il CSS. Per la realizzazione di layout più complessi è consigliabile usare tabelle
semplici nidificate, anziché tabelle con fusione di celle e colonne.
3
white paper
e-mail marketing
in pillole
Formattazione del testo
2.1Colori
Quando il nero non è gradito. Il testo principale non deve mai essere
scritto in nero. Su un fondo bianco è
meglio un grigio scuro, sia per attenuare
l’eccessivo contrasto (e consentire una
lettura meno faticosa), sia perché alcuni sistemi di antispam talvolta associano il nero predefinito alle mail di
spam. Se è necessario utilizzare il nero,
specificarlo esplicitamente nelle regole
CSS.
2.2Paragrafi
Una formattazione minimalista. È
poco indicato creare strutture testuali
eccessivamente articolate: l’uso di paragrafi (<p>) con valori di interlinea diversi
da quelli predefiniti può portare a risultati
spiacevoli poiché, a seconda del client di posta, questi vengono interpretati diversamente (ad es. spaziature eccessive, nel caso dei paragrafi) o ignorati completamente.
2.3Enfasi 4
Può capitare che sia necessario formattare il testo per dare enfasi ad
alcune parole, come nell’esempio qui
a fianco. L’effetto può essere ottenuto
in modo semplice, applicando ad uno
<span> o altro tag analogo lo stile desiderato, ad esempio:
<strong style=“font-­size:18px; text-­transform:uppercase;”>trendy</strong>
white paper
e-mail marketing
in pillole
5
In questo modo il testo si allineerà sempre alla base del testo circostante. Attenzione però: se il testo in questione è contenuto in una cella e a questa viene
assegnato un allineamento del contenuto, ad esempio <td valign=”top”> , l’allineamento sulla cella avrà effetti disastrosi sul testo. Mentre Outlook 2007 non presenta
problemi, ecco come appare il testo su Hotmail, Gmail e Libero.
Hotmail
Gmail, Libero
La line-­height su Hotmail
Nello screenshot di Hotmail l’effetto disastroso sul testo non è dovuto solo all’allineamento in alto, ma ad un CSS impostato di default su tutti gli elementi della DEM dalla
webmail di Hotmail. Il CSS in questione, * {line-­height: 130%;} reimposta indiscriminatamente tutte le line-­height di tutti gli elementi della Dem al 130%. Attenzione
quindi agli effetti che può avere questa regola!!!!
white paper
e-mail marketing
in pillole
Mobile
3.1Cliccabilità
Spazio alle immagini. È sempre necessario progettare attentamente le dimensioni delle aree
cliccabili sui dispositivi touch-­screen: per tutti
gli elementi di interazione è buona norma non scendere mai sotto le dimensioni di 50x50 pixel. Se
ci sono elementi cliccabili affiancati, spaziarli di almeno 10 pixel l’uno dall’altro.
3.2Font
Occhio all’effetto zoom. Il testo
della newsletter deve avere una dimensione minima di 14px. Dimensioni inferiori vanno evitate
perché gli smartphone applicano uno zoom automatico che rischia di far saltare l’impaginazione.
3.3Leggibilità Il bon ton del mondo mobile. I device su cui le newsletter vengono ricevute e
consultate si sono evoluti più rapidamente delle “buone regole” in base alle quali
costruire una newsletter.
Attenzione ai problemi di leggibilità che tablet e smartphone impongono di valutare:
>Impostare layout molto semplici, che abbiano buona visibilità
anche in ambiente mobile.
>Possono sicuramente essere di aiuto, in CSS3, alcune media queries,
istruzioni che fanno adattare i contenuti in larghezza al dispositivo
su cui la newsletter è visualizzata.
Attenzione però: non tutti i client di posta le accolgono.
6
white paper
e-mail marketing
in pillole
Curiosità
4.1Regola
anti phishing
Dominio versus IP.
Può capitare che una dem venga contrassegnata come e-mail di phishing. Una
delle cause potrebbe essere l’errata gestione dei link. Ad esempio, un link che
punta verso un indirizzo IP anziché ad un nome di dominio, può generare questo problema: da evitare assolutamente!
4.2Il riciclo dei bytes
Per un e-­mail marketing più green. Anche per DEM e newsletter, come per qualsiasi altro prodotto digitale, è importante riutilizzare alcuni pezzi di codice per:
>Ottimizzare i tempi di sviluppo, la standardizzazione (e quindi la pulizia)
del codice su progetti complessi e/o ricorrenti, e l’attuazione dei meccanismi
di “progressive-­enhnancement”.
>Arrecare beneficio all’intero ecosistema di sender e destinatari.
4.3Spazio
tra gli oggetti
L’importanza di un buon codice. La spaziatura degli oggetti che compongono il
layout di una newsletter, fondamentale per consentire una migliore distribuzione delle informazioni e della leggibilità globale della comunicazione, può essere realizzata
in modi diversi:
>il più diffuso si basa sull’uso di immagini trasparenti, ma ha il grosso
svantaggio, nel caso di dem o newsletter con immagini non incorporate,
di presentare un layout pesantemente disallineato prima del download
degli elementi grafici.
>È quindi consigliabile utilizzare sistemi alternativi, che si appoggino direttamente
al codice html/css, quali tabelle nidificate o bordi dello stesso colore
dello sfondo.
>Attenzione però: alcuni client di posta non consentono l’uso di bordi
superiori a 10 pixel di spessore.
7
white paper
e-mail marketing
in pillole
4.5Un problema
di Libero
Sulla mail di Libero tutti i link vengono portati a 12px e il font viene impostato ad Arial.
Tutto dipende da questa regola CSS, propria della loro piattaforma:
body, a, td { font-­family: Arial, Helvetica; font-­size: 12px; }
Bisogna quindi fare attenzione e riportare la dimensione e il tipo di font anche nello
stile di tutti i tag <a>.
4.5I link di Libero
Quando Libero incontra nel testo un
indirizzo
internet
linkato (es. “www.
enter.it” linkato a
http:// www.enter.it), tutti gli stili
ad esso associati
vengono ignorati e
il link viene rappresentato con lo stile di base definito da Libero (Arial 12px con il blu di default).
A questo comportamento NON C’È RIMEDIO, se non quello di modificare il testo
linkato.
8
white paper
e-mail marketing
in pillole
4.6Lo stile barrato
9
Sono soggetti a questo comportamento solo i testi che iniziano con “www.”. Valutare quindi se è proprio necessario riportare l’indirizzo per intero nel testo o se è
possibile trovare una forma differente (es. “Vai sul sito enter.it”).
A prescindere dal fatto che un link sia “valido” in partenza (testo “www.mediashopping.it” linkato a “http://www.mediashopping.it”), Libero elimina e ricrea comunque il link. Basta modificare il testo linkato togliendo il “www.” per aggirare il “sistema
anti-­phishing”.
Può capitare che venga richiesto di inserire nelle DEM un prezzo pre-­promozione,
barrato. Un metodo comodo è usare il tag <del>.
Ma attenzione perché Outlook 2007 ignora gli stili di colore su <del> e lo renderizza sempre in grigio. È quindi opportuno utilizzare in questi casi uno <span> e
assegnargli il CSS text-­decoration:line-­through.
white paper
e-mail marketing
in pillole
Link utili
I nostri suggerimenti non finiscono qui.
Continueremo a dare consigli sull’impostazione di newsletter e Dem
sui diversi canali:
http://www.facebook.com/espressocare
http://www.twitter.com/espressocare
http://www.youtube.com/espressovideo
vai su www.e-spresso.net e
prova la versione Freemium
per inviare mail illimitate ad un massimo di 500 contatti
e-­spresso è la piattaforma per fare e-­mail marketing firmata Enter pensata
su misura dell’utente, con un’interfaccia semplice, accattivante e user friendly. Si tratta di un software completamente web based, localizzato presso i
nostri server, da cui sarà possibile gestire campagne di e-­mail marketing, DEM
e newsletter.
Prova la versione free per sempre
(http://www.e-spresso.net/email-marketing-free-per-sempre/).
10