CORSO NEWSLETTER #1Design per NL

AGENDA

• Cos’è una Newsletter

• Alcune regole utili (per gli account, ma non solo)

• Alcuni standard da seguire (per i designer, ma non solo)

• Alcune statistiche

• Moltissimi esempi pratici e reali

COS’È UNA NEWSLETTERDefinizione generale

Si definisce con il termine newsletter un messaggio di posta elettronica che viene inviato periodicamente e gratuitamente a coloro che lo hanno richiesto e che contiene informazioni aggiornate su argomenti di loro interesse.

COS’È UNA NEWSLETTERDettagli

La newsletter è uno strumento utile per trasformare potenziali clienti in clienti effettivi e per fidelizzare i clienti attuali; essa può infatti essere utilizzata per comunicare novità commerciali quali, ad esempio, promozioni, variazioni di listini, nuovi prodotti, partecipazioni a fiere oppure approfondimenti ed aggiornamenti su argomenti editoriali.

COS’È UNA NEWSLETTERDettagli

La newsletter può contenere all'interno del messaggio di posta dei link alle pagine del sito aziendale e quindi è un mezzo potente per mantenere ed incrementare il traffico del proprio sito.

L'abbonamento alla newsletter avviene solitamente compilando un modulo di iscrizione (web form) sul sito dell'azienda, anche se ogni occasione di contatto con il cliente attuale o potenziale può essere utilizzata per raccogliere la sua adesione.

COS’È UNA NEWSLETTERModalità di iscrizione

1. Opt-OutL'utente è stato abbonato a sua insaputa senza aver fornito il suo consenso esplicito. Nel messaggio di email che riceve ci sono le istruzioni per l'eventuale cancellazione dalla newsletter. Questa modalità in base alle regole della Netiquette, è da considerarsi spamming.

2. Opt-InLa modalità Opt-In prevede che l'interessato si iscriva alla newsletter fornendo il proprio consenso a ricevere i futuri messaggi.

3. Confirmed Opt-InÈ come il caso precedente ma in più l'abbonato riceve un messaggio via email di conferma di avvenuta iscrizione.

4. Double Opt-InColui che si iscrive riceve un messaggio di posta elettronica al quale deve obbligatoriamente rispondere in modo da perfezionare l'iscrizione; questa modalità garantisce il massimo rispetto della privacy ma in genere è sconsigliata perché la maggior parte degli utenti non porta a termine questa operazione.

ACCOUNT-DESIGNLa cosa più importante da sapere

Tutti i client di posta disabilitano le immagini di ogni e-mail in arrivo. Questo era nato all’inizio per agevolare le connessioni lente e per una protezione contro i virus. Ora è legato anche alla privacy.

Solitamente (ogni client ha la sua procedura) l'utente deve cliccare un link o un bottone per attivare le immagini. Questo è normale e inevitabile, è impossibile da gestire.

Una volta che l'utente inserisce la mail nella rubrica e/o rende attendibile il mittente allora vedrà le immagini senza dover cliccare nulla, le vedrà sempre di default.

ACCOUNT-DESIGNLa cosa più importante da sapere

Questo comporta che la NL deve essere realizzata al meglio anche con le immagini disabilitate. Questo compito è principalmente di chi realizza l’HTML, però seguendo alcune piccole regole nella grafica questo processo diventa più gestibile.

• Prevedere SEMPRE un testo e un titolo in “forma testuale”

• Prevedere sempre un link su un testo o un titolo in “forma testuale”

• Rendere ben visibile il link per la versione web della NL

• Prevedere sempre un breve testo in “forma testuale” con un link in caso di NL realizzata come unica immagine

Vediamo un paio di esempi disabilitando le immagini:

ACCOUNT-DESIGNLa cosa più importante da sapere

Non siamo messi molto bene, ma può andare:• http://assets.newtargetweb.it/mailing/pellicano/2010-08-31/mail.html• http://assets.newtargetweb.it/mailing/grosmarket/2010-09-01/mail.html• http://assets.newtargetweb.it/mailing/iperpellicano/2010-03-25/mail.html

Abbiamo risolto con una soluzione alternativa:• http://assets.newtargetweb.it/mailing/costumenational/online_store_2010-06-03/mail_uk.html• http://assets.newtargetweb.it/mailing/costumenational/online_store_2010-08-24/mail_it.html

Siamo messi bene:• http://assets.newtargetweb.it/mailing/mauri/2010-08-06/mail.html• http://assets.newtargetweb.it/mailing/magicavenezia/2009-07-29/mail_it.html• http://assets.newtargetweb.it/mailing/minitalia/2010-06-03/mail.html• http://assets.newtargetweb.it/mailing/allcart/2010-03-01/mail.html• http://assets.newtargetweb.it/mailing/arifl/2010-05-04/mail.html• http://assets.newtargetweb.it/mailing/ldmarket/2010-09-02/mail.html• http://assets.newtargetweb.it/mailing/grosmarket/2010-07-19/mail.html

ACCOUNT-DESIGNLa seconda cosa più importante da sapere

Un’altra cosa molto importante da sapere è che ci sono decine di client di posta elettronica, sia desktop che web, ed è praticamente impossibile riuscire a realizzare una NL identica per ogni client. Quindi l’utente nel suo client di posta potrebbe vedere la NL non identica alla proposta grafica che ha accettato. E’ inevitabile dover arrivare ad un compromesso.

Una menzione speciale va a quel fantastico client di posta che è Outlook 2007; letteralmente fa quello che vuole visualizzando ogni newsletter diversamente da come dovrebbe. Ovviamente si tenta sempre di fare il meglio ma su Outlook 2007 è molto difficile riuscire a visualizzare la NL come da proposta grafica.Il fratello Outlook 2010 sta seguendo le orme della versione 2007 pertanto il problema sembrerebbe rimanere anche per il futuro.

Per info maggiori vedere esempi di design test sull’account CM.

ACCOUNTDati e info da recuperare per inviare una NL

Per poter inviare una NL si devono recuperare i seguenti dati dal cliente:

• subject della NL• nome ed e-mail del mittente (quello

che comparirà nel client dell’utente come mittente)

• e-mail del reply-to, la e-mail a cui ricevere eventuali risposte alla newsletter

• testo e link presenti nella NL• dati dell’azienda da visualizzare in fondo

alla NL (solitamente li abbiamo già)

ACCOUNTDati e info da visualizzare in una NL

Per poter inviare una NL si devono rendere visibili le seguenti info:

• il link per cancellarsi dalla mailing list. Indicare sempre all’utente un modo semplice e chiaro per cancellare la sua iscrizione

• il link per visualizzare la versione web. Indicare sempre all’utente un modo semplice e chiaro per visualizzare dal browser la NL in caso di problemi

• i dati dell’azienda che invia la NL• eventualmente dove è stato reperito

l’indirizzo e-mail

Spesso questi dati nel layout si danno per scontati ma è bene segnalare al cliente che nel layout finale della NL ci saranno.

ACCOUNTL’elemento più importante: SUBJECT

Il SUBJECT è un elemento molto importante per una NL, perchè viene letto in velocità dall’utente e fa decidere se aprire la NL o cestinarla. Possiamo dire che è più importante della grafica perchè un subject sbagliato può far decidere di non vedere nemmeno la grafica. Inoltre dobbiamo stare molto attenti che la newsletter non vada nello SPAM e spesso questo è legato al subject.Vediamo alcuni piccoli accorgimenti:

• Scrivere una frase che attiri l'attenzione. • Scrivere un subject sempre diverso. Non teniamo lo stesso per tutte le NL.• Scrivere un subject che descriva veramente il contenuto della NL.• Evitare certe parole, tipo: help/aiuto, sale/sconti, percentuali di sconto, reclami palesemente falsi.• Evitare maiuscole e simboli, utilizzare solo lettere (se possibile).• Evitare un subject lungo, perchè verrà troncato, se possibile utilizzare massimo 50 caratteri.

link utile: http://www.mailchimp.com/articles/best_practices_in_writing_email_subject_lines/

ACCOUNTAltri accorgimenti

• Considerare che c'è sempre una versione testuale, che NON coincide con la versione con immagini disabilitate.

• Considerare che JPG / PDF / PSD delle proposte grafiche NON saranno quasi mai uguali alla NL che verrà inviata.

ACCOUNTAltri accorgimenti

• Considerare che si possono personalizzare le NL con i dati recuperati nelle mailing list, ad esempio il nome, ma non solo. Questo è molto utile per fare sentire ancora più a suo agio l’utente nell’aprire la newsletter e nel considerarla una e-mail “familiare”.

• Considerare che si possono segmentare gli invii, decidendo di inviare la NL solo a certi utenti. Ad esempio: agli utenti residenti in una certa città, agli utenti iscritti tramite il Lavora Con Noi, agli utenti degli USA, ecc.

ACCOUNTTestare la preview della NL prima dell’invio

Ecco i passaggi da fare per testare la preview della NL subito prima dell’invio.

Prima di abilitare le immagini:• Verificare tutti i testi della NL con le immagini disabilitate• Verificare subject, nome ed e-mail del mittente e del reply-to

Dopo aver abilitato le immagini:• Verificare tutte le parti testuali• Verificare la descrizione alternativa delle immagini. Basta andare col mouse sopra le immagini e

verificare che il rettangolo giallo (se appare) riporti il testo corretto• Verificare si visualizzi la versione web• Verificare che TUTTI i link funzionino

DESIGNAlcune info per partire

Ci sono delle dimensioni standard da rispettare: 550/600 px (19,4/21,17 cm - 72dpi) per il width.

Per l'altezza ovviamente dipende dai contenuti, ma teniamo a mente che tanti client di posta visualizzano le mail in uno spazio di preview (Outlook) prima di decidere se visualizzare la mail.

La media dello spazio di preview è tra i 300 e i 500 px in altezza, quindi cerchiamo di mettere gli elementi importanti in questa posizione.

La prima impressione è quella che conta!

DESIGNAlcune info per partire

Una delle parti più importanti è l'header. Ovviamente perchè viene vista per prima, il più delle volte, come detto, in uno spazio di preview, e quindi ha il fondamentale ruolo di far decidere all’utente se continuare a vedere o cestinare la newsletter.

Quindi valutiamo bene come fare la parte alta della newsletter, perchè l’utente deciderà in pochissimi secondi cosa fare. Per esempio: usiamo un’immagine o del testo?

La prima impressione è quella che conta!

DESIGNAlcune accortezze

Consideriamo che la newsletter viene quasi sempre visualizzata nel client di posta su uno sfondo bianco e quindi è importante evitare stacchi forti tra la fine della NL e l’inizio dello sfondo bianco del client di posta.

La cosa si può aggirare prevedendo un bordino oppure un colore di sfondo per la NL che stacchi completamente dallo sfondo del client. http://assets.newtargetweb.it/mailing/allcart/2009-11-17/mail.html

DESIGNAlcune accortezze

http://assets.newtargetweb.it/mailing/costumenational/online_store_2010-05-12/mail_it.html

Soluzioni KO

http://assets.newtargetweb.it/mailing/costumenational/online_store_2010-08-03/mail_it.html

DESIGNAlcune accortezze

http://assets.newtargetweb.it/mailing/costumenational/online_store_2010-01-06/mail_uk.html

http://assets.newtargetweb.it/mailing/costumenational/online_store_2010-02-05/mail_it.html

http://assets.newtargetweb.it/mailing/costumenational/online_store_2009-12-03/mail_it.html

Soluzioni OK

DESIGNAlcune accortezze: SFONDO

Il problema SFONDO NL.

Se noi facciamo una NL con un colore di sfondo non c’è nessun problema, ma ricordiamoci che molti client di posta (gmail, Outlook 2007/10, Hotmail) non visualizzano le immagini utilizzate come background.

Se è indispensabile utilizzare un’immagine, e non si può sostituire con un colore piatto, bisogna prevedere che la NL si veda bene anche con quei client che non visualizzeranno l’immagine.

http://www.campaignmonitor.com/css/

DESIGNAlcune accortezze: SFONDO

http://assets.newtargetweb.it/mailing/kimberly/2009-05-18/mail.htmlhttp://assets.newtargetweb.it/mailing/mauri/2010-08-06/mail.html

DESIGNAlcune accortezze: TESTO

Il problema TESTO NL.

Se un testo è realizzato con font particolari non web-safe oppure è utilizzato con effetti particolari tipo ombre o bevel si è costretti a trasformarlo in un’immagine.

Anche se utilizziamo un testo semplice senza effetti intersecandolo con un’immagine, dobbiamo realizzare un’unica immagine.

Cosa evitare (se possibile):

• evitare bevel

• evitare font particolari

• evitari effetti ombra

• evitare accavallamenti con immagini

DESIGNAlcune accortezze: TESTO

http://assets.newtargetweb.it/mailing/minitalia/2010-04-01/mail.html

http://assets.newtargetweb.it/mailing/minitalia/2010-03-12/mail.html

http://assets.newtargetweb.it/mailing/minitalia/2010-06-16/mail.html

DESIGNAlcune accortezze: TESTO

http://assets.newtargetweb.it/mailing/pellicano/2010-01-28/mail.html

http://assets.newtargetweb.it/mailing/grosmarket/2010-09-01/mail.html

DESIGNAlcune accortezze: TESTO

MOLTO IMPORTANTE

All’interno della nl DEVE ESSERCI almeno un testo “in formato testuale” con un LINK al sito o alla risorsa che si intende pubblicizzare. Altrimenti l’utente visualizzando la NL con immagini disabilitate (default) potrebbe non vedere nessun testo e potrebbe non essere in grado di cliccare nulla.

Esempio interessante: http://assets.newtargetweb.it/mailing/costumenational/online_store_2010-08-24/mail_it.html

Cosa evitare (se possibile):

• evitare bevel

• evitare font particolari

• evitari effetti ombra

• evitare accavallamenti con immagini

DESIGNAlcune standard fra di noi

Non sarebbe male definire alcuni standard per migliorare l’intero iter di realizzazione della NL.Ecco alcuni passaggi da seguire:

• La risoluzione della NL è 72dpi quindi non si ha necessità di avere immagini in alta definizione.

• Decidiamo un formato. E' preferibile il PSD a livelli, ma va bene anche un PDF a livelli.

• Prima di mandare la NL da approvare al cliente, bisogna farla revisionare (bastano pochi minuti) a chi si occupa dell’HTML per vedere se ci sono delle limitazioni tecniche, per evitare di spiegare al cliente come mai non si è potuto fare quello che lui ha approvato.

• usiamo uno standard per nominare le NL: NOMECLIENTE_DATAINVIOINVERSA_NL[NUMEROPROGRESSIVO dall’inizio dell’anno]Es: GROSMARKET_20100812_NL05

ACCOUNT-DESIGNAlcune statistiche

Alcune statistiche per permetterci di capire quando è meglio inviare una NL. Che giorno?

ACCOUNT-DESIGNAlcune statistiche

Alcune statistiche per permetterci di capire quando è meglio inviare una NL. A che ora?

ACCOUNT-DESIGNAlcune statistiche

Alcune statistiche per permetterci di capire quando è meglio inviare una NL. Che settore?

ACCOUNT-DESIGNAlcune statistiche

Il vincitore è: MERCOLEDI’ POMERIGGIO

Aggiungo inoltre che ho notato che le NL vengono aperte/cliccate generalmente entro 48 ore, quindi è consigliabile valutare se inviarle molto tempo prima dell'evento/notizia di cui la NL tratta.

ACCOUNT-DESIGNAlcune statistiche

Molto importante è anche capire quali client di posta elettronica vengono maggiormente utilizzati.Ogni client di posta ha le proprie caratteristiche e interpreta a modo suo il codice di una NL. Non è semplice riuscire a far vedere la stessa NL nello stesso modo in tutti i client (ma questa è un’altra storia).

Alcune statistiche sui client di posta:

• CM Statistiche 2009

• CM Trends 2009

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

ALCUNI ESEMPI

GRAZIE MILLE PER L’ATTENZIONE