La guida completa alla progettazione per e-mail

Progettare per e-mail significa arrivare al punto e sfruttare al meglio la breve possibilità che hai con i tuoi iscritti. Hai solo una possibilità, quindi vale la pena impiegare più trucchi nel libro per assicurarti che il tuo messaggio arrivi. I principi di base riguardano il rispetto dei tuoi lettori dando loro qualcosa di prezioso in cambio del loro tempo che è, dopo tutto, la ragione per cui si sono registrati per ascoltarti in primo luogo.

Una nota prima di iniziare

Alcuni dei suggerimenti che farò non si applicheranno a tutte le liste, società o prodotti. Come sempre con la posta elettronica, prova qualcosa di nuovo e guarda come funziona per determinare cosa è meglio per i tuoi abbonati.

Regola n. 1: essere trasparenti

Questo è veramente importante. Evitare l'uso di nomi di mittenti enigmatici o criptici, righe di argomenti, intestazioni o copia. Questo confonderà solo i tuoi lettori e renderà più probabile l'eliminazione della tua e-mail o la contrassegnerà come spazzatura.

Dì ai tuoi lettori chi sei, esattamente perché li stai mandando via email, e esattamente quello che stanno per uscire dall'esperienza. Avere tutto questo vicino alla parte superiore della posta elettronica come si può ottenere. Ciò significa che non appena viene aperta la tua email, le tue intenzioni e identità sono chiare e la tua proposta non sarà trascurata.

Assicurati che il nome del mittente, la riga dell'oggetto, l'intestatore e il contenuto "above the fold" siano tutti significativi e pertinenti alla tua ragione di contatto con i tuoi lettori.


Prova questo! Nome del mittente chiaro, evidente, riga dell'oggetto, logo e contenuto di apertura.

Regola n. 2: essere ovvi, convenzione degli abbracci

Può sembrare noioso, ma essere convenzionale è davvero utile con la posta elettronica. Le e-mail sono piccole e vengono aperte per un breve periodo di tempo, quindi la funzione di ogni elemento deve essere cristallina.

Rendi i tuoi collegamenti ovvi

Crea pulsanti belli, grandi, facilmente selezionabili e toccabili per i tuoi link. Sul cellulare, rendili al 100% della larghezza in modo che possano essere facilmente toccati con entrambi i pollici (non è necessario il raggiungimento).

Se desideri anche avere collegamenti testuali all'interno della tua copia, assicurati che siano in grassetto e con un colore a contrasto in modo che risaltino. Cerca di non avere troppi collegamenti ravvicinati, il che potrebbe far sì che un utente tocchi accidentalmente quello sbagliato.

Attualmente circa il 50% degli open sono su dispositivi touch, quindi evita il linguaggio che non ha senso, ad esempio "fai clic qui".


Da Justine Jordan su litmus.com

Non esitare ad aggiungere una freccia: gli studi hanno dimostrato che sono più efficaci, ma, come sempre, testano i tuoi abbonati.

Ottieni i vantaggi di fare clic ovvio

I migliori pulsanti combinano il vantaggio di fare clic con l'azione stessa. Ad esempio, "Inizia a utilizzare il tuo nuovo account" o "Richiedi la prova gratuita".

Regola n. 3: dire di meno

Non scrivere molto. I tuoi destinatari scansioneranno l'e-mail per le cose che li interessano piuttosto che leggere l'intera e-mail, quindi dividerli in pezzi più piccoli che sono il più brevi possibile.

Il tuo obiettivo con l'e-mail di marketing è far sì che le persone facciano clic sul tuo sito web, quindi non c'è bisogno di ritardarlo con un lungo monologo, specialmente se una lunga e-mail sta per sopraffare i tuoi lettori con affaticamento mentale e renderli più probabili per colpire "Elimina".


Prova questo! Morsi brevi e incisivi, con chiari richiami all'azione.

Rendilo visibile

Progetta la tua email per essere incisivo. Il testo dovrebbe apparire in pezzi chiari e delineati che arrivano al punto.

Usa i titoli chiari e lancia i concetti chiave in grassetto in modo che i tuoi lettori di scansione possano ottenere il succo, anche se non leggono tutto (cosa che la maggior parte di loro non vuole).


Prova questo! Frasi brevi e pronunciate con pulsanti evidenti.

Puoi dire di più ... Più tardi

Se sei nel business di inviare contenuti più lunghi di cui i tuoi lettori godono, non sto assolutamente dicendo che non c'è posto per questo nell'e-mail marketing.

Le persone leggono le email in tutti i tipi di scenari diversi. Alcuni saranno "in movimento" e tra riunioni importanti, altri potrebbero essere estremamente annoiati nella sala d'attesa di un dentista, e sono molto dispiaciuto di dirti che altri saranno ancora in bagno. Questi scenari sono tutti molto diversi, ma è facile da soddisfare per tutti attenendosi a una gerarchia logica.

Fornisci prima le informazioni più brevi e più perfide, quindi includi sotto il tuo contenuto più lungo. In questo modo non stai costringendo nessuno a guadare contenuti più lunghi ad eccezione di quelli che stanno attivamente lavorando attraverso la tua email.

Ripeti il ​​tuo invito principale all'azione

Se la tua e-mail è lunga e un utente ha fatto scorrere tutto il suo contenuto, assicurati che abbia un facile accesso a un altro invito all'azione senza dover scorrere fino alla cima della tua e-mail.


Prova questo! Dai priorità alla tua proposizione principale, quindi includi contenuti secondari e / o più lunghi al di sotto.

Email e annunci promozionali

Questi suggerimenti si applicano ai messaggi di marketing in cui ci sono in genere una o due cose principali che stai contattando i tuoi abbonati.

Non diluire il tuo messaggio

Se stai scrivendo ai tuoi lettori su una cosa, prova a non diluire il messaggio aggiungendo molte altre cose sotto o in una barra laterale. Con ogni opzione aggiuntiva aumenti il ​​rischio di deragliarli.

Rimuovi tutti gli elementi non essenziali

Valuta il design della tua email, identifica tutto ciò che non è essenziale per trasmettere il tuo messaggio, quindi rimuovilo. Meno distrazioni significano una comunicazione più chiara.

Non dare troppe scelte

Troppa scelta aumenta il carico cognitivo sui tuoi lettori, rendendoli meno propensi a prendere una decisione.

Pensa a quale sia il requisito minimo per convincere qualcuno a fare clic per accedere al tuo sito Web, quindi introdurre gradualmente più dettagli necessari. Sovraccaricare le persone con troppa scelta all'inizio favorirà solo l'abbandono delle attività.

Se stai cercando di convincere i tuoi abbonati a scegliere un prodotto e ad acquistare, non presentare tutte le opzioni nell'email. Portali sul tuo sito web e inizia a introdurre la complessità necessaria lì.

Prova a coinvolgere gradualmente le persone

A volte è intimidatorio ricevere un'email che dice immediatamente "ACQUISTA! REGISTRATI! IMPEGNA !!"

Cerca invece di portare le persone sul tuo sito in una fase precedente del viaggio, ad esempio "seleziona le dimensioni della scarpa per vedere gli stili disponibili" anziché "acquista queste scarpe".

Avere un punto focale

Rendi la chiamata principale all'azione il punto focale principale della tua email. Assicurati che i tuoi lettori non debbano cercare un invito all'azione in un mare di identità.

Creare un punto focale è facile. Prima di tutto, assicurati di avere un obiettivo primario. Quindi devi solo renderlo più grande di qualsiasi altra cosa, e assicurarti che ci sia abbastanza spazio intorno in modo che l'occhio sia attratto prima da quest'area. Questo si applica più al design del tuo desktop quando un utente vedrà molte e-mail contemporaneamente.

Usa spazi bianchi attorno agli elementi

Se hai molte cose tutte di dimensioni e peso simili senza spazi bianchi intorno a loro, appariranno come un grande blocco amorfo che l'occhio semplicemente salterà. Usa gli spazi bianchi attorno agli elementi per attirare l'attenzione sulle cose che contano.


Prova questo! Un chiaro punto focale e una struttura che guida il lettore.

Suggerimenti universali

Se la gente vuole andarsene, lasciali andare

Non seppellire, nascondere o oscurare le informazioni di annullamento dell'iscrizione. Oltre a essere illegale in molti paesi, è scortese e controproducente. Se qualcuno vuole disiscriversi dalla tua newsletter e tu gli impedisci di farlo, non tornerà ad essere un abbonato felice. Genera solo cattiva volontà nei confronti del tuo marchio in quanto saranno costretti a continuare a elaborare le tue email (o impostare un filtro per inviare i tuoi messaggi al cestino).

Evitare di avere troppe divisioni verticali

Più divisioni verticali ci sono in un layout, più ci distrae l'occhio. Attenersi a due o tre divisioni verticali all'interno di una griglia.

Anche i bordi solidi sono molto distanti dall'occhio, quindi tienili al minimo.


Prova questo! Meno divisioni verticali rendono più facile l'occhio.

Considerazioni pratiche

Keep It Under 600px Wide

Questa è generalmente la larghezza massima più sicura per il tuo desktop design per garantire che gli utenti non debbano scorrere orizzontalmente.

Usa Progressive Enhancement

Prima di dare a ogni casella gli angoli arrotondati e le ombre, pensa a come funzionerà il tuo layout senza questi miglioramenti. Trattalo come il tuo design 'base', a cui aggiungerai angoli e ombre arrotondati come miglioramenti.

La creazione di forme audaci con bordi squadrati sembra altrettanto eccezionale e gli utenti dei nuovi client di posta elettronica potranno vedere i tuoi angoli arrotondati come un ulteriore vantaggio.

Questo approccio ti farà risparmiare un sacco di tempo quando si tratta di costruire la tua email. Se devi creare una casella di testo con angoli arrotondati con un'ombra esterna e deve funzionare su ogni client di posta elettronica, dovrai creare gli effetti usando le immagini, il che può richiedere molto tempo soprattutto quando si creano modelli riutilizzabili.

Dai al tuo disegno qualche camera respiratoria

Abbraccia il fatto che non è sempre possibile ottenere cose identiche in ogni client di posta fino all'ultimo pixel. Progetta con questo in mente per alleviare il mal di testa più in basso lungo la pista.

Crea progetti che hanno un po 'di respiro, dove non importa se un cliente aggiunge 7 pixel di spazio misterioso al di sotto. Per lo meno, astenetevi da dettagli minuscoli extrafini che sembreranno infranti se sono un pixel fuori.

Considerare l'intera esperienza

La tua email è un insieme coerente, quindi pensa a come tutto funziona insieme. Gli utenti vedranno prima l'e-mail nella loro casella di posta e leggeranno il nome del mittente, l'oggetto e l'intestatario. Quindi probabilmente vedranno una versione della tua e-mail con immagini disabilitate, l'impostazione predefinita per la maggior parte dei client di posta elettronica. Alla fine, vedranno la tua email come la intendevi, se abilitano le immagini.

Assicurati che tutto funzioni bene insieme e che gli abbonati possano ancora capire il tuo messaggio, anche con le immagini disattivate.


Nella casella di posta elettronica (a sinistra) e con le immagini disattivate (a destra).

Non includere il tuo messaggio principale in un'immagine. Sarà bloccato per impostazione predefinita e molti client di posta elettronica non visualizzeranno nemmeno i tag alt.

Nell'esempio seguente, puoi vedere come quasi tutto nel messaggio sarebbe mancato senza le immagini attivate, perché tutto il testo è contenuto all'interno delle immagini e il testo alternativo non è stato stilizzato per renderlo leggibile.


Un'email di Velocity Frequent Flyer con immagini disattivate (a sinistra) e immagini su (a destra).

Modella i tuoi tag Alt

Puoi aggiungere stili CSS alle immagini (o alla cella principale o ai tag link) per assicurarti che vengano visualizzati in modo ottimale nei client che supportano i tag alt. Questo può davvero migliorare l'esperienza complessiva per i tuoi abbonati.

Test per Color Blindness

Se stai usando Photoshop, questo è integrato. Ci sono anche molti strumenti che ti permetteranno di vedere come il tuo design guarderà al 10% delle persone con una qualche forma di mancanza di visione del colore.

Collega tutto

Quando costruisci, non limitarti a collegare i tuoi pulsanti. Assicurati di collegare tutto in modo che gli utenti possano fare clic ovunque. Collega l'immagine, il pulsante e il titolo. Diamine, anche collegare il testo se funziona.

Come progettare e-mail mobile-friendly

Esistono alcuni modi per approcciare la creazione di un'e-mail ottimizzata per dispositivi mobili.

1. Colonna singola, design dispositivo-agnostico

Questo è il modo più semplice per avere un'e-mail ottimizzata per i dispositivi mobili. Usando questo metodo, le immagini e il testo sono impostati in modo tale che sia possibile visualizzare l'e-mail su un desktop o su un cellulare, il carattere è leggibile e le immagini sono già abbastanza grandi.

Il vantaggio di questo tipo di design è che è sufficiente codificare un singolo layout. È sicuramente la tua opzione più rapida e semplice. I client per smartphone che supportano il ridimensionamento ridurranno la tua email fino al 100% della larghezza e su quelli che non lo fanno, ci sarà uno scrolling orizzontale molto ridotto.

Il rovescio della medaglia è che la versione desktop è di dimensioni molto grandi (che personalmente non vedo come svantaggio).

Per ottenere questo layout:

  1. Progetta la tua email a circa 450px di larghezza
  2. I titoli dovrebbero essere almeno di 30 px
  3. La copia del corpo dovrebbe essere di almeno 20px

2. Design e-mail completamente reattivo

Un'e-mail HTML reattiva utilizza le query multimediali per visualizzare l'e-mail in un certo modo, a seconda delle dimensioni del dispositivo su cui viene visualizzato. Quasi nessuno dei principali client desktop e webmail supporta le query multimediali, ma molti client di posta per smartphone e tablet lo fanno. Ciò significa che la codifica di e-mail reattive è un po 'retro-frontale rispetto ai siti Web responsive di codifica, in quanto la versione desktop è la versione "base" e si utilizza una query di larghezza massima per regolare il layout su dispositivi più piccoli.

Il vantaggio di questo tipo di design è la possibilità di creare una grande e-mail multi-colonna che si traduce in una versione mobile a colonna singola di facile lettura. Le query multimediali sono anche versatili perché puoi scegliere come target dimensioni dello schermo specifiche e anche schermi con densità di pixel specifici (per la visualizzazione di immagini ad alta risoluzione).

Il lato negativo è che l'app Gmail per Android (il client di posta più popolare su Android) non supporta le query multimediali e può generare risultati insoliti durante il rendering delle build di e-mail completamente reattive. Anche le email pienamente reattive richiedono molto più tempo rispetto ai loro cugini indipendenti dal dispositivo.

3. Progettazione di email completamente fluide

Pensa a questo come una risposta senza le domande dei media.

Questo metodo prevede la creazione di un design fluido, largo al 100%, con una larghezza massima di circa 600 px sul tavolo esterno. Sono richiesti commenti condizionali (per Outlook) e una query multimediale (per Apple Mail che, esilarante, non supporta la proprietà max-width).

Il vantaggio di questo tipo di design è che sarà reattivo in ogni client di posta elettronica, inclusa l'app Gmail per Android. Questo metodo può essere utilizzato anche in combinazione con le query multimediali per perfezionare ulteriormente elementi come le dimensioni del testo e i pulsanti su quei client che li supportano.

Il rovescio della medaglia è che funzionerà bene solo con progetti che sono abbastanza semplici e generalmente non hanno più di una colonna. Il contenuto di due colonne va bene purché sia ​​sufficientemente piccolo da apparire in una stretta colonna sullo schermo dello smartphone.

Devi anche essere in grado di utilizzare le larghezze percentuali per le tue immagini, il che non è sempre possibile quando si creano modelli (spesso le immagini nei modelli devono avere una larghezza di pixel impostata).

Migliorare ulteriormente la tua progettazione di email

E infine, ci sono alcune cose fantasiose che puoi usare per iniziare a creare email davvero fantasiose che si distinguono veramente.

Immagini di sfondo

Le immagini di sfondo erano qualcosa per la pila "Troppo difficile", ma grazie a Stig Morten Myre e ai ragazzi di Campaign Monitor, ora c'è un generatore Bulletproof Emails, che semplifica tutte le seccature. Non è più necessario trattenere l'aggiunta di immagini di sfondo alle tue campagne.

Caratteri Web

L'utilizzo di caratteri Web è anche un ottimo modo per far risaltare il tuo design dal resto. Con un po 'di considerazione in più sul design e un po' di tempo in più per la compilazione, è facile implementare font web che renderanno molto bene un numero sorprendente di client di posta elettronica.

Animazione CSS3

I moderni client di posta elettronica (come Apple Mail e quelli su iPhone e dispositivi Android) supportano effettivamente l'animazione CSS3, il che significa che puoi iniziare a pensare di aggiungere alcune cose davvero interessanti alle tue campagne. Le transizioni, così come le animazioni dei fotogrammi chiave, rendono abbastanza bene e possono essere un'aggiunta fantastica all'e-mail (a patto che si degradino con grazia) perché non aumentano le dimensioni del file tanto quanto una GIF animata.

Conclusione

C'è un lotto prendere in considerazione quando si progetta per la posta elettronica! I suggerimenti elencati in questo articolo ti daranno un buon inizio e cercheranno altri post in questa serie che andranno in vari aspetti (come l'uso di caratteri web e design reattivo) in modo più dettagliato.