I segreti di una newsletter per tablet e smartphone

 I segreti di una newsletter per tablet e smartphone

responsive_4

[dropcap]S[/dropcap]econdo le statistiche è molto probabile che entro fine anno il 50% delle aperture della posta elettronica avvenga tramite smartphone e tablet e diversi studi dicono inoltre che le conversioni dai dispositivi mobile sono maggiori di quelle provenienti da pc. Per queste ragioni sta diventando sempre più importante avere una newsletter totalmente adattata ad ogni tipo di dispositivo.

Qui entra in gioco il responsive design, tecnica che permette di adattare il contenuto a qualsiasi schermo su cui viene visualizzato. Utilizza HTML5, CSS3 e JavaScript, insieme a Media Queries, l’attributo in CSS che permette di cambiare le proprietà di visualizzazione ed adattamento in relazione al device utilizzato dall’utente.

Un aspetto importante da stabilire prima di creare una newsletter responsive è se si inizierà a lavorare con le dimensioni dello schermo del computer per poi adattarle alle dimensioni dello schermo del cellulare o se si farà al contrario. È una decisione importante dal momento che uno dei punti fondamentali per il successo della visualizzazione di una newsletter da cellulare è quello di evitare che vengano scaricati file che non potranno essere visualizzati.

Elementi necessari per realizzare una newsletter responsive
Le due variabili fondamentali di una newsletter per smartphone e tablet sono la dimensione dello schermo e il fatto che si tratta di dispositivi touch screen. Per questo, i paramentri da cui dipende la corretta visualizzazione sono la larghezza dello schermo, le dimensioni delle immagini e la misurazione delle unità in percentuali relative, non in pixel.
Non dimentichiamo che un modo efficace per garantire la buona riuscita di una newsletter responsive è la semplicità: questo ci porterà ad evitare tutti quegli elementi che possono essere considerati superflui e a lavorare quindi con una struttura lineare basata su una sola colonna.

Dovremmo inoltre optare per una struttura flessibile, con una larghezza che copra il  100% dello schermo posizionando le informazioni più importanti nella parte superiore, dal momento che la limitazione della larghezza, con molta probabilità, farà si che l’email si allunghi. In ogni caso, i messaggi devono essere il più concisi e chiari possibile.

Un altro aspetto da tenere in conto è che le call to action, veicolate da un tasto, devono avere le dimensioni adeguate per essere gestite in touch screen, dal momento che è e differente cliccare con la freccia o con il dito.

La dimensione dei caratteri deve essere abbastanza grande per facilitarne la lettura su smartphone e le immagini sono uno degli scogli più complicati da risolvere dal momento che è necessario lavorare con dimensioni di immagini fluide che abbiano una larghezza del 100%.

In ogni caso fondamentale è l’inserimento del tag viewport nell’ <head> della newsletter con i valori width=device-width, con l’obiettivo che il dispositivo usi la sua larghezza reale e initial-scale=1, per caricare, di default, l’email senza zoom.

Lara Sanfilippo
Responsabile marketing MDirector Italia, gruppo Antevenio

Lara Sanfilippo

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.