L'altro giorno, ho ricevuto la seguente e-mail da Adobe e l'ho aperta sul mio desktop al lavoro:
Questa e-mail di Adobe mi ha dato un'esperienza di posta elettronica di prim'ordine sul desktop. Tuttavia, al momento non ho avuto il tempo di "Ulteriori informazioni", quindi ho contrassegnato l'e-mail come non letto e l'ho salvato per il mio viaggio di ritorno a casa.
Un'ora dopo, sulla T, ho riaperto l'e-mail sul cellulare. Ora, immagina se ho aperto questa e-mail sul mio telefono e l'immagine era di bassa qualità, il testo era troppo piccolo per essere letto e il pulsante di invito all'azione era rotto, poiché qualcuno che preferisce leggere i messaggi di e-mail marketing sul proprio telefono, questo mi frustrerebbe e, alla fine, mi spingerebbe a disdire del tutto dalla lista e-mail.
Non sono l'unico che preferisce leggere le e-mail di marketing sul proprio telefono. In effetti, oltre la metà dei residenti negli Stati Uniti preferisce guardare i messaggi di e-mail marketing sul proprio telefono. L'ottimizzazione delle e-mail per dispositivi mobili è così importante perché è il numero di lettori che accedono ai messaggi di marketing.
Quindi la prova è là fuori, certo, ma come fanno gli esperti di marketing a smettere di inviare email non ottimizzate per più schermi? La risposta è l'e-mail.
Le e-mail reattive sono e-mail che utilizzano immagini e tabelle fluide per rimanere flessibili su schermi di dimensioni diverse. In definitiva, forniscono contenuti progettati per l'esperienza ottimale dell'utente.
Sebbene le e-mail reattive possano essere progettate utilizzando query multimediali CSS, non è necessaria alcuna esperienza di codifica per crearne una. La creazione di un'email reattiva non è solo un lavoro per i programmatori. Qui abbiamo messo a punto alcune best practice, modelli pronti per l'uso e un breve tutorial sui fondamenti delle e-mail reattive.
Ma prima, chiariamo: che cos'è un'e-mail reattiva, comunque?
Che cos'è l'e-mail reattiva?
Un'email reattiva è un'e-mail ottimizzata per qualsiasi dispositivo, incluso un telefono, un desktop o un tablet. Si adattano a più risoluzioni dello schermo, il che è particolarmente utile poiché la domanda di contenuti ottimizzati per i dispositivi mobili continua ad aumentare. Le e-mail reattive sono anche più accessibili, poiché consentono agli abbonati di leggere sul proprio dispositivo preferito o in viaggio.
Per illustrare, ecco come un'e-mail promozionale che ho ricevuto ieri sembrava sul desktop:
Questa e-mail ha immagini fantastiche, icone acquistabili ed è ben formattata. Quando apro l'e-mail sul cellulare, questo è ciò con cui sono accolto:
Ho ancora le stesse informazioni, le stesse foto e le stesse icone acquistabili: l'unica differenza evidente è il formato e-mail. È diverso adattarsi meglio all'esperienza mobile.
Ora, immagina se lo stesso layout desktop è stato applicato ai dispositivi mobili. Dovrei ingrandire il mio telefono per vedere le immagini o il testo. Invece di farlo, annullerei l'iscrizione.
Le email di bassa qualità potrebbero potenzialmente comunicare al sottoscrittore che la qualità di tale interazione non è stata presa in considerazione. In definitiva, le e-mail non responsive possono comportare la perdita di abbonati.
Con la posta elettronica reattiva, è possibile migliorare l'esperienza utente e il ROI della campagna. Pensaci: gli abbonati soddisfatti di un design e-mail mobile ottimizzato si troveranno ad aprire più messaggi di marketing perché sanno che sarà bello.
Quindi, con tutto questo parlare di e-mail reattive, devi essere prurito per crearne uno tuo. Successivamente, esamineremo i modi semplici per creare e-mail reattive, oltre a fornire le migliori pratiche.
Modelli di email reattivi
Un modello reattivo si adatterà automaticamente a qualsiasi dimensione dello schermo, quindi se l'e-mail viene aperta su uno smartphone, un tablet o un computer, sembrerà fantastico e avrà funzionalità complete.
Per quelli con meno background di programmazione o per coloro che desiderano dedicare meno tempo alla progettazione, il mio consiglio è di utilizzare un modello. Sono un modo infallibile per assicurarsi che la tua email sia professionale e sii reattivo.
I modelli di e-mail reattivi ti fanno risparmiare tempo nella progettazione di un'e-mail che potrebbe essere stata scelta da una selezione. Ad esempio, lo strumento di email marketing di HubSpot include oltre 60 modelli solo per email reattive.
Diamo un'occhiata ad alcune opzioni di modelli ora.
1. HubSpot
HubSpot offre un paio di modelli di email reattivi gratuiti. Se sei un cliente HubSpot o un utente gratuito, puoi scaricarlo e provarlo tu stesso. Ad esempio, ecco uno dei modelli di email reattivi: nota la barra laterale, dove puoi visualizzare l'anteprima del modello su più dispositivi.
Fare clic sui tipi di dispositivi e assicurarsi che la posta elettronica sia formattata di conseguenza è uno dei passaggi finali del processo di progettazione ed è il solo passare al processo di posta elettronica reattiva quando si utilizza software come HubSpot.
Facendo clic sul dispositivo smartphone per l'anteprima, ad esempio, puoi vedere se i tuoi contenuti, comprese le dimensioni dei caratteri e la risoluzione dell'immagine, sono formattati in modo piacevole per i dispositivi mobili.
2. CampaignMonitor
I modelli offerti da CampaignMonitor sono simili a molti altri, in cui i risultati di posta elettronica reattivi vengono visualizzati nello strumento di anteprima. Ad esempio, ecco un modello CampaignMonitor:
fonte
Una cosa che mi piace molto di questo set-up è come puoi vedere i diversi dispositivi fianco a fianco in modo da poter confrontare facilmente gli elementi di design. È possibile apportare piccole modifiche per creare la migliore esperienza per tutti gli abbonati.
I modelli CampaignMonitor sono spesso gratuiti, quindi è una buona scelta se hai un budget minimo.
3. Stripo
Stripo offre oltre 300 modelli di email HTML gratuiti. Puoi scegliere i modelli per settore, stagione, tipo e funzione. Ad esempio, ecco un modello dalla sezione del loro settore aziendale:
fonte
Un buon segno di un solido modello di email reattivo è la possibilità di vedere l'anteprima in entrambe le varianti desktop e smartphone, come mostrato nella modalità di anteprima di Stripo. Notare come è stato adottato un layout a colonna singola nell'anteprima mobile per adattarsi alle specifiche dei telefoni.
Mi piace Stripo perché è un sito web che puoi visitare rapidamente per trovare un modello adatto ai tuoi obiettivi. Potresti considerare Stripo se stai cercando di provare e-mail reattive o vuoi un po 'di ispirazione per il design.
4. Contatto costante
Constant Contact offre oltre 200 modelli di e-mail professionali accessibili dopo la registrazione. Dall'esempio che segue, puoi vedere che la piattaforma offre modelli di email reattivi:
fonte
I modelli di Constant Contact hanno funzioni di modifica con trascinamento della selezione, l'opzione per aggiungere sondaggi, funzioni di e-commerce e uno strumento di libreria di foto. Tutte queste funzionalità possono aiutare a creare le email che gli abbonati vogliono vedere.
È utile utilizzare un servizio come Constant Contact perché gli strumenti specifici consentono di mantenere la coerenza, come nell'esempio sopra. Puoi dire che la natura reattiva dell'e-mail non compromette nessuno degli elementi di design.
Ora che abbiamo dato un'occhiata ad alcune opzioni di modello, diamo un'occhiata a un altro modo per far funzionare le e-mail reattive e le migliori pratiche.
Come rendere l'e-mail reattiva
Se si dispone di uno sfondo di programmazione, è possibile rendere reattivo un messaggio di posta elettronica utilizzando il codice.
Alcune best practice durante la codifica di e-mail responsive includono assicurarsi che la tua e-mail reattiva sia scalabile e flessibile. Inoltre, ricorda che le e-mail reattive richiedono query multimediali CSS per modificare i campi fissi su campi fluidi.
Un'altra best practice di progettazione e-mail reattiva è quella di utilizzare caratteri più grandi che saranno facili da leggere su schermi più piccoli. I layout a colonna singola sono anche più facili da ridimensionare, quindi se i layout semplici sono buoni per le tue pagine web, consideralo sicuramente per un'e-mail reattiva.
La prossima volta che crei una campagna e-mail, è una buona idea non finalizzare nessuno dei progetti fino a quando non vedi come appaiono attraverso più risoluzioni dello schermo. Tante persone accedono alle e-mail tramite dispositivo mobile solo per semplicità. Un modo semplice per verificare l'efficacia della tua e-mail è inviarla a te stesso o al team come test: si confronta con le altre e-mail di marketing reattive nella tua casella di posta?
