() translation by (you can also view the original English article)
La progettazione dell'email riguarda l'andare subito al sodo e ottenere il massimo dalla breve occasione che avete con i vostri iscritti. Avete solo una possibilità, quindi vale la pena di impiegare tanti assi nella manica quanto possibile per assicurarvi che il vostro messaggio passi. I principi di fondo riguardano il rispetto dei vostri lettori, dando loro qualcosa di valore in cambio del loro tempo che è, dopo tutto, la ragione per la quale si sono iscritti per avere notizie da voi fin dall'inizio.
Una nota prima di iniziare
Alcuni dei suggerimenti che vi darò non si applicheranno a ogni elenco, azienda o prodotto. Come sempre con le email, provate qualcosa di nuovo e vedete come si comporta per determinare ciò che è meglio per i vostri iscritti.
Regola #1: Essere trasparenti
Questo è davvero importante. Evitate l'uso di nomi mittente, campi oggetto, intestazioni o testi sconcertanti o criptici. Questo confonderà solamente i vostri lettori e li renderà più propensi a eliminare il vostro indirizzo email o contrassegnarlo come posta indesiderata.
Raccontate ai vostri lettori chi siete, esattamente perché gli inviate delle email, ed esattamente cosa uscirà da questa esperienza. Avete tutto questo quanto più vicino possibile alla parte superiore dell'email che riuscite ad avere. Questo significa che non appena la vostra email viene aperta, la vostra identità e le vostre intenzioni sono chiare, e la vostra proposta non viene ignorata.
Assicuratevi che il nome del mittente, l'oggetto, intestazione e il contenuto 'above the fold' sia tutto significativo e rilevante al motivo per cui contattate i vostri lettori.
Regola #2: Essere ovvi, abbracciare le convenzioni
Può sembrare noioso, ma essere convenzionali è molto utile con le email. Le email sono piccole e vengono aperte per un breve lasso di tempo, quindi la funzione di ogni elemento deve essere cristallina.
Rendete evidenti i vostri link
Create pulsanti belli, grandi, facilmente cliccabili e facili da selezionare per i link. Sul cellulare, rendeteli al 100% della larghezza affinché possano essere facilmente selezionati con entrambi i pollici (senza allungarli).
Se desiderate anche avere dei collegamenti di testo all'interno del vostro contenuto, garantite che siano in grassetto e con un colore di contrasto in modo che spicchino. Cercate di non avere troppi collegamenti vicini tra loro, che potrebbero causare a un utente di selezionare accidentalmente quello sbagliato.
Circa il 50% delle aperture avviene sui dispositivi touch in questi tempi, quindi evitate un linguaggio che non ha senso, come "Clicca qui".
Non esitate ad aggiungere una freccia — studi hanno dimostrato che sono più efficaci — ma, come sempre, provate con i vostri iscritti.
Rendete evidenti i benefici del fare clic
I pulsanti migliori combinano il beneficio del fare clic con l'azione stessa. Per esempio, "Iniziate a utilizzare il vostro nuovo account" o "Richiedete la vostra prova gratuita".
Regola #3: Dire meno
Non scrivete molto. I destinatari scansioneranno l'email per le cose che li interessano piuttosto che leggere tutta l'email, quindi dividetela in parti piccole che siano il più breve possibile.
Il vostro obiettivo con l'email marketing è quello di convincere le persone a cliccare sul vostro sito web, quindi non c'è bisogno di ritardarlo con un lungo monologo, soprattutto perché un'email lunga sovraccaricherà i vostri lettori con stress mentale e li renderà più propensi a cliccare "Cancella".
Rendetelo scansionabile
Progettate la vostra email per essere immediata. Testo deve essere visualizzato in blocchi chiari e delineati che vengano subito al dunque.
Utilizzate intestazioni chiare e evidenziate i concetti chiave in grassetto in modo che i vostri lettori fugaci possano afferrare il concetto, anche se non leggono tutto (ciò che la maggior parte di loro non fa).
Potete dire di più — Dopo
Se siete nel settore dell'invio di contenuti più lunghi che piacciono ai vostri lettori, di sicuro non sto dicendo che non c'è nessun posto per loro nell'email marketing.
Le persone leggono le email in tutti i diversi scenari. Alcuni saranno 'di fretta' e tra riunioni importanti, altri possono essere estremamente annoiati nella sala d'attesa del dentista, e mi dispiace molto dirvi che altri ancora saranno in bagno. Questi scenari sono tutti molto diversi, ma è facile soddisfare tutti attenendosi a una gerarchia logica.
Fornite innanzitutto informazioni più brevi e immediate, e poi includete il contenuto più lungo sotto. In questo modo non state costringendo nessuno a sciropparsi i contenuti più lunghi a eccezione di quelli che stanno esaminando attivamente la vostra email.
Ripetete il vostro invito all'azione principale
Se la vostra email è lunga e un utente ha fatto scorrere tutto il tempo il vostro contenuto, assicuratevi che abbiano facile accesso a un'altra chiamata all'azione senza dover scorrere tutto il tempo di nuovo verso la parte superiore della vostra email.
Email e annunci promozionali
Questi suggerimenti valgono per i messaggi di marketing dove ci sono in genere uno o due cose principali per le quali state contattando i vostri iscritti.
Non diluite il vostro messaggio
Se state scrivendo ai vostri lettori di una cosa, cercate di non diluire il messaggio aggiungendo un sacco di altre cose sotto o in una barra laterale. Con ogni opzione aggiuntiva componete il rischio di sviarli.
Rimuovete tutti gli elementi non essenziali
Valutate il design della vostra email, identificate qualsiasi cosa che non sia essenziale per trasmettere il messaggio, quindi rimuovetela. Meno distrazioni significa comunicazione più chiara.
Non date troppe scelte
Troppa scelta aumenta il carico cognitivo dei vostri lettori, rendendoli meno predisposti a prendere una decisione.
Pensate a qual è il requisito minimo per ottenere che qualcuno clicchi il vostro sito web, poi gradualmente introducete un di più dell'informazione richiesta. Sovraccaricare le persone con troppa scelta all'inizio le incoraggerà solo ad abbandonare l'attività.
Se state tentando di ottenere dai vostri iscritti di scegliere un prodotto e comprare, non presentate tutte le opzioni nell'email. Fateli arrivare sul vostro sito web, e iniziate a introdurre lì la complessità necessaria.
Provate gradualmente a coinvolgere le persone
A volte è intimidatorio ricevere un'email che dice subito, "COMPRALO! REGISTRATI! IMPEGNATI!!"
Invece, cercate di indurre le persone sul vostro sito a fare un primo passo del percorso, come "selezionate la taglia delle scarpe per vedere gli stili disponibili" piuttosto che "comprate queste scarpe".
Abbiate un punto focale
Rendete la chiamata all'azione primaria il principale punto focale della vostra email. Garantite ai vostri lettori che non debbano cercare un invito all'azione in un mare di monotonia.
È facile creare un punto focale. Prima di tutto, assicuratevi di avere un obiettivo primario. Poi avete bisogno solo di renderlo più grande di tutto il resto e garantire che c'è abbastanza spazio intorno ad esso in modo che l'occhio sia attratto da questa zona come prima cosa. Questo vale più per il vostro design per il desktop quando un utente vedrà un sacco di email in una sola volta.
Utilizzate uno spazio bianco attorno agli elementi
Se avete molte cose che hanno tutte dimensioni e peso simili con nessun spazio bianco intorno a loro, verranno visualizzate come un blocco grande, amorfo che l'occhio semplicemente salterà piè pari. Utilizzate lo spazio bianco attorno agli elementi per attirare l'attenzione sulle cose che contano.
Suggerimenti universali
Se le persone vogliono lasciare, lasciatele andare
Non coprite, nascondete o oscurate le informazioni per disiscriversi. Oltre che essere illegale in molti paesi, è scortese e controproducente. Se qualcuno vuole cancellarsi dalla newsletter e glielo rendete impossibile, non tornerà ad essere un iscritto felice. Genererà solo rancore verso il vostro marchio poiché saranno costretti a continuare a esaminare le vostre email (o impostare un filtro per inviare i vostri messaggi nel cestino).
Evitate di avere troppe divisioni verticali
Più divisioni verticali ci sono in un layout, più distrae gli occhi. Limitatevi a due o tre divisioni verticali all'interno di una griglia.
Anche i bordi a linea continua sono molto fastidiosi per gli occhi, quindi riduceteli al minimo.
Considerazioni pratiche
Tenetelo sotto una larghezza di 600px
Questa è generalmente la larghezza massima più sicura per il design del vostro desktop per essere sicuri che gli utenti non dovranno scorrere orizzontalmente.
Utilizzate il miglioramento progressivo
Prima di dare a ogni casella angoli arrotondati e ombreggiature, pensate a come il layout funzionerà senza questi miglioramenti. Consideratelo come il vostro disegno 'base', a cui si aggiungerete i vostri angoli arrotondati e le ombre come miglioramenti.
Creare di forme forti con bordi quadrati sembra altrettanto grande, e gli utenti con client di posta elettronica più recenti vedranno i vostri angoli arrotondati come un ulteriore bonus.
Questo approccio vi farà risparmiare un sacco di tempo quando si tratta di costruire la vostra email. Se dovete creare una casella di testo con gli angoli arrotondati con un'ombreggiatura e deve funzionare su ogni client di posta elettronica, dovrete costruire gli effetti utilizzando le immagini, che può richiedere molto tempo, soprattutto durante la creazione di modelli riutilizzabili.
Date al vostro disegno un po' di respiro
Abbracciare il fatto che non è sempre possibile ottenere cose che appaiano identiche in ogni client di posta elettronica fino all'ultimo pixel. Progettate con questo in mente per alleviare i mal di testa più avanti.
Create disegni che abbiano un po' di spazio per respirare, dove non importerà se un client sta aggiungendo sotto uno spazio misterioso di 7 pixel. Perlomeno, astenetevi dai piccoli dettagli extra-schizzinosi che appariranno rotti se fuoriescono di un pixel.
Considerate l'intera esperienza
La vostra email è un insieme coeso, quindi pensate a come tutto funzioni insieme. Gli utenti vedranno prima l'email nella posta in arrivo e leggeranno il nome del mittente, l'oggetto e l'intestazione. Quindi probabilmente vedranno una versione della vostra email con immagini disabilitate, il valore predefinito per la maggior parte dei client di posta elettronica. Infine, vedranno la vostra email come la intendevate — se abilitano le immagini.
Assicuratevi che tutto leghi insieme bene, e che gli iscritti saranno ancora in grado di capire il vostro messaggio, anche con le immagini disattivate.
Non includete il messaggio principale in un'immagine. Verrà bloccato per impostazione predefinita e molti client di posta elettronica non visualizzeranno neanche i tag alt.
Nell'esempio che segue, potete vedere come quasi tutto nel messaggio sarebbe saltato senza le immagini attivate, perché tutto il testo è contenuto all'interno di immagini e il testo di alt non è stato progettato per renderlo leggibile.
Progettate il vostro tag alt
Potete aggiungere gli stili CSS alle immagini (o alla loro cella genitore o tag del collegamento) per garantire che siano ben visualizzati nei client che supportano il tag alt. Questo può davvero migliorare l'esperienza complessiva dei vostri iscritti.
Test per il daltonismo
Se state utilizzando Photoshop, questo è integrato. Ci sono anche un sacco di strumenti che permetteranno di vedere come il vostro progetto apparirà al 10% delle persone con qualche forma di mancanza di percezione del colore.
Collegate tutto
Quando sviluppate, non collegate solo i pulsanti. Assicuratevi di collegare tutto in modo che gli utenti possano fare clic ovunque. Collegate l'immagine, il pulsante e il titolo. Diamine, collegate persino il testo se funziona.
Come progettare un'email compatibile con i cellulari
Ci sono alcuni modi che potete approcciare per creare un'email compatibile con i cellulari.
1. colonna singola, design indipendente dal dispositivo
Questo è senza dubbio il modo più semplice per avere un'e-mail compatibile con i cellulari. Utilizzando questo metodo, le immagini e il testo sono impostate per essere abbastanza grandi in modo che se l'email viene visualizzata sul desktop o su un dispositivo mobile, il font è leggibile e le immagini sono già abbastanza grandi.
Il vantaggio di questo tipo di progettazione è che è necessario programmare solo un singolo layout. È sicuramente l'opzione più semplice e veloce. I client degli smartphone che supportano il ridimensionamento scaleranno la vostra email fino al 100% di larghezza e su quelli che non lo fanno, ci sarà uno scorrimento orizzontale molto piccolo.
L'unico inconveniente è che la versione desktop è molto grande in scala (che personalmente non vedo come un aspetto negativo).
Per ottenere questo layout:
- Progettate la vostra email a una larghezza di circa 450px
- Le intestazioni dovrebbero essere almeno di 30px
- Il testo del body dovrebbe essere almeno di 20px
2. Email design completamente responsive
Un'email HTML completamente responsive utilizza le media query per visualizzare l'email in un certo modo, a seconda delle dimensioni del dispositivo sul quale la si sta osservando. Quasi nessuno dei principali client desktop e webmail supporta le media query, mentre molti client di posta per smartphone e per tablet sì. Ciò significa che programmare email responsive è un po' al contrario rispetto alla programmazione di siti web responsive, in quanto la versione desktop è la versione 'base', e si utilizza una query max-width per impostare il layout per i dispositivi di piccole dimensioni.
Il vantaggio di questo tipo di progettazione è che è possibile creare una fantastica email multi-colonna che si traduce in una versione mobile a colonna singola facile da leggere. Le media query sono anche versatili perché potete scegliere come target specifico le dimensioni dello schermo e anche gli schermi con densità di pixel specifica (per la visualizzazione di immagini ad alta risoluzione).
L'unico inconveniente è che l'app Gmail per Android (il più popolare client di posta su Android) non supporta le media query, e può generare alcuni risultati insoliti quando esegue la vostra email completamente responsive. Le email completamente responsive richiedono anche molto più tempo per essere programmate dei loro cugini indipendenti dal dispositivo.
3. Email design completamente fluido
Pensate a questo come essere responsive senza le media query.
Questo metodo prevede la creazione di un design fluido, 100% di larghezza, con una larghezza massima intorno ai 600px impostati sulla tabella esterna. I commenti condizionali sono necessari (per Outlook) così come una media query (per Apple Mail che, ridicolmente, non supporta la proprietà max-width).
Il vantaggio di questo tipo di progettazione è che sarà responsive in ogni client di posta elettronica, tra cui Gmail per app Android. Questo metodo può essere utilizzato anche in combinazione con le media query per perfezionare ulteriormente le cose come la dimensione del testo e dei pulsanti su quei client che le supportano.
L'unico inconveniente è che funziona solo con design che sono abbastanza semplici e che generalmente hanno non più di una colonna. Il contenuto su due colonne va bene finché è abbastanza piccolo da apparire bene in una colonna stretta sullo schermo di uno smartphone.
Dovete anche essere in grado di utilizzare larghezze in percentuale per le vostre immagini, che non è sempre possibile durante la creazione di modelli (spesso le immagini nei modelli devono avere impostata una larghezza in pixel).
Migliorate ulteriormente il vostro email design
E infine, ci sono alcune cose estrose che potete mettere a frutto per iniziare a creare email davvero originali che spicchino veramente.
Immagini di sfondo
Le immagini di sfondo sono solite essere qualcosa di "troppo difficile", ma grazie a Stig Morten Myre e ai ragazzi di Campaign Monitor, ora c'è un generatore di sfondi per email a prova di proiettile super facile che porta tutti i problemi al di fuori. Non c'è alcun bisogno di trattenersi dall'aggiungere immagini di sfondo alle vostre campagne.
Web font
Utilizzare i web font è anche un modo veramente ottimo per far spiccare il vostro design dal resto. Con un po' di analisi di progettazione supplementare e un po' di tempo supplementare di sviluppo, è facile implementare i web font che si eseguiranno davvero bene in un numero sorprendente di client di posta elettronica.
Animazione CSS3
I client di posta elettronica moderni (ad esempio, Apple Mail e quelli sull'iPhone e sui dispositivi Android) effettivamente supportano le animazioni CSS3, che significa che potete iniziare a pensare di aggiungere della roba veramente forte alle vostre campagne. Le transizioni, come pure le animazioni con fotogrammi chiave, si eseguono abbastanza bene e possono essere una fantastica aggiunta all'email (purché decadano parzialmente) perché non aumentano le dimensioni del file tanto quanto una GIF animata.
Conclusione
C'è molto da prendere in considerazione quando si progetta un'email! I suggerimenti elencati in questo articolo vi daranno un inizio solido, e tenete d'occhi tutti gli articoli di questa serie che discuteranno i vari aspetti più in dettaglio (per esempio utilizzando i web font e il responsive design).
