Questo è il futuro dell'email design

Si è detto molto sul fatto che il design della posta elettronica sia rimasto bloccato in passato. I designer che affrontano i loro primi progetti lamentano l'uso di tabelle e stili in linea. I marketer che pianificano le loro prime campagne si rifiutano di pensare al di là della mentalità batch-and-blast.

Ma alcuni intrepidi mittenti si rifiutano di lasciare che le tecnologie e le mentalità (a volte) obsolete che circondano il design della posta elettronica li trattengano. Stanno spingendo i confini del design della posta elettronica, utilizzando tecniche che si trovano comunemente nel web design avanzato per sorprendere, deliziare e connettersi con i loro abbonati.

Diamo un'occhiata alle sfide associate al design sperimentale della posta elettronica e raccogliamo alcune delle nostre campagne di posta elettronica futuristiche preferite.

E-mail marketing nel 2020 Preparati per il futuro dell'email marketing con le intuizioni di 20 importanti esperti, oltre ai risultati dei sondaggi di migliaia di esperti di marketing e consumatori. Scarica ora

Il design dell'email non deve essere limitante

Quando la maggior parte delle persone pensa all'email marketing, pensa a noiose e noiose newsletter inviate da aziende che cercano di vendere qualcosa. E, se hai il compito di creare una campagna e-mail, probabilmente stai guardando una pila di tabelle HTML e CSS in linea e contando i minuti fino a quando non hai finito di hackerare insieme un'e-mail che funziona bene ovunque.

Anche se è vero che le basi del design della posta elettronica sono un po' vecchie, non c'è davvero alcun limite a ciò che puoi fare con esse, data un po' di creatività, pianificazione e molti test. Sì, i designer di posta elettronica devono utilizzare design basati su tabelle (grazie, Outlook!), CSS in linea e nuotare attraverso un mare di hack ma, come mostrano gli esempi seguenti, puoi comunque ottenere alcune cose incredibili nella posta in arrivo.

Per dimostrare il punto, ecco alcuni dei nostri esempi preferiti di e-mail che infrangono le regole e spingono i confini del design dell'e-mail.

Un carosello in un'e-mail?

Qualche tempo fa, il rivenditore britannico B&Q ha inviato un'e-mail che ha dato fuoco al settore.

In questa campagna, gli utenti possono passare con il mouse sopra o toccare i pulsanti e guardare mentre diverse sezioni di contenuto scorrono senza problemi dentro e fuori l'e-mail. Comunemente definita carosello, questa tecnica è stata ampiamente utilizzata nel mondo del web, ma è rara per le campagne di posta elettronica. Alcuni potrebbero lamentarsi del fatto che i caroselli sono inefficaci e solo per lo spettacolo, ma la campagna B&Q è un ottimo esempio di come utilizzare tecniche all'avanguardia per sorprendere gli abbonati e-mail.

L'e-mail utilizza una serie di proprietà CSS3, insieme a un targeting intelligente, per eseguire la sua magia. Utilizzando transizioni CSS, animazioni, z-index e la proprietà overflow, i designer hanno creato un'e-mail intelligente che chiede solo di essere toccata.

Ciò che è ancora più impressionante è che tutto ricade magnificamente per i client di posta elettronica che non supportano queste tecniche più avanzate.

Colori folli e Star Wars

L'agenzia di posta elettronica britannica Action Rocket ha guidato per un po' di tempo la progettazione della posta elettronica. Con il loro riassunto settimanale di notizie via e-mail dal titolo intelligente, Email Weekly, testano alcune tecniche creative che potrebbero alla fine farsi strada nelle campagne dei clienti.

Uno dei nostri esempi preferiti è la loro e-mail che poneva la domanda "Di che colore è questa e-mail?".

Usando le animazioni dei fotogrammi chiave CSS, animano i colori di sfondo della sezione dell'intestazione, creando un effetto ipnotizzante e allucinatorio. All'inizio è sottile, ma una volta che un abbonato capisce l'animazione, non può più voltare le spalle.

Un altro ottimo esempio di Action Rocket è il loro recente riassunto ispirato a Star Wars che ha utilizzato la proprietà sperimentale -webkit-perspective, insieme alle trasformazioni CSS, per ricreare l'iconica scansione di apertura del film di fantascienza preferito da tutti.

Infografica in una e-mail?

Sebbene il blocco display dell'agenzia di posta elettronica invii costantemente ottime e-mail, è la loro recente e-mail infografica che ha davvero attirato la nostra attenzione.

Simile ai colori di sfondo nell'esempio Email Weekly, il blocco display utilizza le animazioni dei fotogrammi chiave CSS per aggiungere un po' di vita a una campagna già ben progettata. La cosa davvero fantastica è che l'e-mail è meravigliosamente reattiva, impilando bene ogni sezione sui dispositivi mobili. Il design reattivo e le icone animate servono tutti a migliorare alcuni ottimi dati sull'utilizzo della posta elettronica mobile.

Non abbiamo visto molte infografiche come questa in un'e-mail, il che lo rende ancora più impressionante e innovativo. Ci piacerebbe vedere altri esempi di infografica, motivo per cui stiamo organizzando un Community Contest a loro dedicato!

Video HTML5 e tour interattivi

Ci piace mettere in pratica ciò che predichiamo, motivo per cui rendiamo le nostre e-mail piacevoli e reattive, nonostante abbia un pubblico prevalentemente desktop. Questo è anche il ragionamento alla base di alcune delle nostre campagne e-mail all'avanguardia, come il nostro background video HTML5 dell'Email Design Conference dell'anno scorso (che ospiteremo di nuovo quest'estate...).

Il nostro designer, Kevin, ha utilizzato alcuni client di posta elettronica avanzati per migliorare progressivamente un design altrimenti semplice. Se sei curioso di sapere come esattamente ci sia riuscito, ha scritto un post sul blog che descrive in dettaglio il processo.

E, per celebrare il lancio del nostro editor di codici e-mail, Builder, si è spinto ancora oltre creando un tour interattivo direttamente in un'e-mail.

Facendo uso delle animazioni CSS, dell'hack della casella di controllo e dell'uso liberale della proprietà del contenuto CSS, mostra alcune delle funzionalità di Builder direttamente nella posta in arrivo, dando agli abbonati un assaggio del prodotto senza nemmeno dover accedere. di codice che lo alimenta, ma puoi verificarlo direttamente in Builder (un po' come l'e-mail Inception).

Menu e-mail più gustosi

Come l'e-mail del carosello, il designer Jerry Martinez si è ispirato al web per implementare un menu di hamburger per gli abbonati ai dispositivi mobili.

Gli elementi di navigazione sono sempre un trucco per i designer di posta elettronica, specialmente sui dispositivi mobili. Poiché tendono a occupare una notevole quantità di spazio quando impilati, possono distrarre dall'invito all'azione principale di una campagna. Per risolvere il problema, Jerry ha creato un elegante menu di hamburger che consente agli utenti mobili di visualizzare in modo selettivo gli elementi di navigazione.

Siamo rimasti così colpiti dalla soluzione di Jerry, che abbiamo invitato le persone a mostrare altri modelli di navigazione creativi in ​​uno dei nostri concorsi della community...

Concorsi comunitari: la vera avanguardia

I nostri concorsi della community sono il luogo in cui sfidiamo davvero le persone a trovare idee folli. Ogni mese diamo loro un tema e lasciamo che estendano le loro abilità. Il nostro primo concorso, che esaminava gli usi creativi del testo ALT, ha prodotto risultati sorprendenti, come Space Invaders in un'e-mail:

Per il nostro secondo concorso, abbiamo avuto persone che hanno inventato modelli di navigazione interessanti. Siamo rimasti stupefatti da alcuni dei risultati, come il concetto di navigazione appiccicoso di Remi Parmentier:

Stai provando qualcosa di nuovo?

Sebbene sia entusiasmante provare cose nuove nell'e-mail, molte cose possono andare storte se non si testano a fondo le proprie campagne. Le anteprime e-mail semplificano il test di qualsiasi tecnica nei client di posta elettronica desktop, webmail e mobile.

Prova il tornasole →