Seleziona una pagina

EMAIL RESPONSIVE

Cosa sono e come crearle

E’ importante utilizzare email responsive? Questa domanda può avere una sola risposta ed è: assolutamente sì!

Oggigiorno è impensabile non inserire l’attività di email marketing nella propria strategia di business. Infatti, l’email marketing viene sempre più impiegata in previsione soprattutto di tre obiettivi: fidelizzazione, lead nurturing e conversione. Se quindi l’email marketing ha acquisito sempre più importanza, come pensi di poter riuscire a raggiungere il tuo scopo senza creare email responsive? 

email responsive

In questa guida parlerò di:

  • Cosa sono;
  • Delle email responsive css medie query;
  • Perché creare e utilizzare degli email responsive template;
  • Suggerimenti utili sull’email design e template;
  • Come crearle? Attraverso html o newsletter editor.

Corso Email Marketing

 

Email responsive: cosa sono

Le email responsive sono quelle email che si adattano a qualsiasi schermo perciò la visualizzazione risulta ottimale su schermi di qualunque dimensione. Il contenuto del messaggio si adatta perfettamente alla larghezza dello schermo, secondo regole dettate dalle medie query CSS, che possono essere considerate delle regole dinamiche. Quest’ultime, se progettate con cura, possono aiutare a rendere le e-mail più leggibili su schermi di diverse dimensioni. 

Il responsive quindi non si preoccupa se il messaggio viene letto su un pc, su un tablet o su uno smatphone: a prescindere dallo schermo, il contenuto riuscirà ad essere visualizzato correttamente. Il termine responsive, coniato per la prima volta da Ethan Marcotte in un post di A List Apart del 2010, deriva dall’inglese e letteralmente significa “adattativo, in grado di adattarsi facilmente al contesto”. Marcotte ha quindi creato il cosiddetto responsive web design, applicato prima sui siti web e successivamente anche alle email: da quel momento i template sono stati creati per adattarsi senza alcun problema a qualsiasi schermo.

 

 

Cosa si intende per medie query CSS

Le medie query, come abbiamo accennato prima, rilevano le dimensioni dello schermo di un dispositivo e a seconda di quest’ultime, attivano differenti regole. Queste medie possono rivelarsi sia molto semplici da implementare sia piuttosto complesse: tutto dipende da ciò che si intende realizzare. Quel che è certo è che richiedono una pianificazione precisa.

I vari tipi di medie query definiscono quali stili CSS usare e per fare questo, si basano appunto sulla dimensione dello schermo. Le medie query sono quindi in grado di indicare una serie di stili specifici che vengono applicati all’email solo quando si verificano determinate condizioni. Un esempio che si potrebbe presentare è il seguente: “Se l’email viene visualizzata su una dimensione dello schermo di 600 pixel o inferiore a questo determinato numero, applicare il seguente CSS”. 

Le proprietà che possono essere specificate grazie alle medie query sono diverse e fra queste vi sono la risoluzione dello schermo e l’orientamento, ma sicuramente la più importante è la dimensione dello schermo (altezza e larghezza). Perciò, a seconda delle indicazioni fornite dalle medie query, alcuni elementi presenti all’interno della email saranno rimpiccioliti o ingranditi, incolonnati o affiancati, nascosti o resi visibili. Tutto questo significa creare una email responsive

 

 

Come si adattano le email responsive? Ecco tutti i segreti 

Come fa l’email ad essere responsive? Quali sono gli aspetti che si modificano quando si cambia lo schermo? Ecco un elenco che ti chiarirà quali sono gli aspetti che si differenzieranno a seconda se ti ritroverai ad osservare un contenuto dallo schermo di un pc piuttosto che da uno smartphone:

  • le dimensioni delle immagini aumenteranno o diminuiranno 
  • la dimensione dei font e delle CTA si modificherà 
  • l’interlinea potrà cambiare
  • gli elementi che prima erano sullo stesso piano, si incolonneranno uno sotto l’altro 
  • le sezioni delle email potranno apparire o scomparire a seconda del device
  • il colore dello sfondo potrà cambiare, sia che questo rigardi le tabelle piuttosto che i testi 

 

 

Perché è così importante creare email responsive?

Rendere tutto responsive è diventato indispensabile. Anni fa la priorità è stata rendere responsive i siti, oggi però anche le email necessitano di aver questo requisito. Il motivo è uno ed è abbastanza deducibile: sempre più le persone utilizzano lo smartphone per aprire le email. Come mostrano i dati di una ricerca condotta da Litmus, coloro che aprono le email da mobile si aggirano intorno al 46%, mentre il restante si divide tra webmail (35%) e desktop (18%).

perchè creare email responsive

 

Un altro dato che indica quanto sia importante rendere un’email responsive è reso noto dallo studio “Impact of Mobile Use on Email Engagement” di Mailchimp nel quale si evince che i click unici fra gli utenti di dispositivi mobile sulle email responsive sono cresciuti dal 2,7% al 3,1%, con un incremento pari al 15%. Inoltre, un altro dato mostra come il ritorno medio sull’investimento dell’email marketing sia di 48 dollari per ogni dollaro speso. Quindi, da questo, è possibile dedurre che più si rendono responsive le email più si può avere un aumento di conversioni, generato da un numero sempre maggiore di click delle campagne. 

 

 

Consigli utili per creare email responsive 

Creare email responsive può anche risultare abbastanza semplice; l’importante è seguire alcune linee guida che ti serviranno per non commettere errori durante la loro costruzione. Gli aspetti da tenere in considerazione sono disparati e vanno dalla scelta del layout, al peso delle immagini, al posizionamento delle CTA. Qui di seguito cercheremo di fornirti alcuni consigli che potrebbero rivelarsi decisamente utili.

 

Tipologia layout

La scelta del layout può essere molto variabile su desktop, ma su mobile questo invece non può verificarsi. La verticalità del mobile impone che si possa scegliere solo fra due tipi di layout: a colonna singola o ibrido. La colonna singola prevede che tutti i moduli siano posizionati uno sopra l’altro occupando l’intero spazio offerto dalla email. L’ibrido invece prevede che ci sia un header principale in alto e che al di sotto siano posizionati, in colonne parallele, i contenuti secondari. 

 

Bottone CTA

Un’attenzione particolare va posta alla posizione e alla dimensione del bottone della call to action. Quando una persona apre un’email deve immediatamente capire che cosa è chiamata a fare e lo strumento che gli consente questo è la CTA. Il bottone quindi deve essere visibile al primo colpo d’occhio. L’ideale sarebbe che il bottone fosse posizionato nella parte alta dello schermo o comunque visibile senza nemmeno fare uno scroll. A tal riguardo, Apple fornisce un’indicazione sui pulsanti della CTA: devono essere di almeno 44 pixel, che corrisponde alla dimensione del dito umano. Se nella fruizione del messaggio una persona non troverà il pulsante o non riuscirà a schiacciarlo, abbandonerà l’email senza pensarci due volte.

 

Scelta delle immagini 

L’ottimizzazione delle immagini è sicuramente fondamentale nella costruzione di email responsive. Il peso di queste deve sempre essere inferiore a 50 KB e la risoluzione deve sempre essere 72 dpi. Se non presti attenzione alle immagini caricate all’interno del messaggio, puoi incorrere in più rischi: l’utente può abbandonare o cancellare la email sia perchè a causa dell’immagine troppo pesante l’email ci ha messo troppo tempo a caricarsi sia perchè è insoddisfatto della fruizione a causa della dimensione e della scarsa qualità dell’immagine. Per quanto riguarda le immagini, devi tener conto anche di altri due fattori. Il primo è il display a retina, che Apple ha introdotto nel 2010 e che si distingue per la notevole densità di pixel, che risulta essere doppia rispetto agli schermi normali. Il secondo è che alcuni utenti non sempre riescono a visualizzare le immagini oppure hanno proprio scelto di disattivare la grafica. In questo caso il problema può essere risolto ricorrendo all’Alt Text (Testo Alternativo), che apparirà al posto dell’immagine.

 

 

Creazione newsletter responsive: HTML o editor 

Esistono due modi di creare email responsive. La prima è utilizzare il codice HTML, ma se vuoi intraprendere questa strada devi sicuramente essere un esperto o per lo meno avere qualche nozione di codice. La seconda opzione invece non implica che tu debba possedere competenze specifiche: basterà affidarti agli editor che nel corso degli anni si sono sempre più diffusi per la realizzazione di newsletter responsive.

 

Email resposive: Mailchimp e MailUp

Gli editor che consentono di realizzare email responsive sono diversi. Fra questi spiccano le piattaforme Mailchimp e MailUp, che hanno integrato editor drag & drop, capaci di creare email e newsletter di grande impatto, che si compongono dinamicamente e soprattutto ottimizzate per il mobile. Questo significa che non dovrai minimamente preoccuparti di dover conoscere e scrivere il codice perchè sarà l’editor stesso a scrivere il codice sottostante le email. 

Creare le email con l’editor sarà più facile di quel che pensi: dovrai semplicemente scegliere la struttura del contenuto, che sarà costruita in blocchi, personalizzare il messaggio selezionando il colore di sfondo e il carattere del testo ed inserendo all’interno un logo, le icone social e il footer. A questo punto, dovrai solo pensare a cosa inserire (testi, immagini e link) e poi verificare come il messaggio apparirà sui vari dispositivi. 

 

Conclusioni

Alla luce di quanto detto, ricordati sempre di costruire in maniera corretta la tua email responsive. Se non farai questo, puoi star sicuro che il messaggio verrà cancellato dall’utente perché non riuscirà a fruire correttamente il contenuto della email. Prima di decidere se la tua email può andar bene, possiamo suggerirti di fare l’A/B test che ti consente di mettere a confronto le versioni del messaggio per poi scegliere quella che ritieni migliore. 

Vorresti approfondire il tema dell’email marketing? Puoi subito scaricare questa miniguida gratuita. 

 

[wprs-box]

Valutazione Digital Coach su Google