Consigli per creare email responsive

Tempo di lettura: 6 minuti

Difficoltà: Base

I dispositivi mobile sono ormai entrati nelle nostre vite e parte delle attività che prima potevamo svolgere solo al computer ora possono essere fatte sui nostri smartphone. Tra queste attività vi anche la lettura delle email quindi quando andiamo a creare un'email è sempre bene domandarsi come questa venga visualizzata su mobile. In questa guida vediamo cos'è il design responsive e qualche consiglio per ottimizzare le proprie email per i dispositivi mobile.

In questa guida:

Cosa vuol dire Responsive

Un design è responsive quando il contenuto mantiene la medesima efficacia anche quando viene visualizzato su dispositivi diversi tra loro quali pc, tablet o smartphone. La tua email può dirsi quindi responsive se, riconoscendo automaticamente il dispositivo su cui il tuoi iscritto ha aperto l'email, si adatta a seconda delle dimensioni.

I problemi principali quando si apre un'email da uno smartphone sono:

- Spazio limitato dello schermo
- Velocità di lettura
- Ridotta connessione internet
Grazie all' editor Drag & Drop non è necessario conoscere codice html o css per rendere responsive le proprie email, questo viene infatti prodotto in automatico durante la creazione, tuttavia puoi adottare alcuni accorgimenti quando crei le tue email per ottene risultati sempre migliori. Vediamoli insieme.

Struttura dell'email

Quando crei la tua email imposta una struttura che possa facilmente adattarsi alla visualizzazione da mobile, ovvero a una struttura verticale. Utilizza preferibilmente layout a una colonna, ovvero box i cui contenuti occupino l'intera larghezza della tua tua email.Suddividi per prima cosa quello che vuoi comunicare ai tuoi iscritti in moduli/box quindi strutturarli successivamente in una colonna singola.

Pro

Le struttura a una sola colonna presentano una struttura gerarchica del contenuto molto forte, ovvero il contenuto principale in alto seguito da quelli meno importanti. La tua email risulterà più facile da leggere, darà un senso di continuità e fin dall'apertura mostrerà il clou della tua comunicazione. Inoltre le email a una colonna presentano molti meno problemi da una visualizzazione su mobile.

Puoi utilizzare in alternativa un layout ibrido ovvero una struttura in cui a un contenuto disposto su una colonna fai seguire un contenuto disposto su due colonne. Questa struttura permette di mantenere l'importanza gerarchica del contenuto più in alto, ma di porre i successivi moduli al medesimo livello. I layout a più colonne sono inoltre molto utili quando si vuole dare al lettore più azione da effettuare.

Con l'editor Drag&Drop è possibile creare moduli di più colonne grazie all'elemento "Colonna", tra le impostazioni di questo elemento puoi trovare anche il suo comportamento da mobile. Di default l'elemento è impostato di incolonnare gli elementi verticalmente quando l'email viene aperta su dispositivi mobile, tuttavia è possibile disabilitare l'incolonnamento indicando di mantenere la struttura originaria. In questo caso l'email non sarà più responsive ma scalabile, ovvero i suoi contenuti verranno scalati in base allo spazio disponibile. Un contenuto scalabile sebbene si riadatti alle dimensione dello schermo non può definirsi responsive in quanto immagini, bottoni e testo risulteranno più piccoli e illeggibili perdendo parte della loro efficacia.

Bottoni

La posizione e la grandezza dei bottoni è molto importante quando crei un email. Il bottone che invita all'azione (CTA) è bene che sia visibile sui dispositivi mobile non appena l'email viene aperta, costringere l'utente ad effettuare troppi scroll potrebbe causare una sua perdita di attenzione o interesse.

Come tieni in mano il tuo smartphone?

Rispondi a questa domanda tenendo in mano il tuo dispositivo mobile, pensa a come selezioni le icone delle app, navighi sui social o su internet, apri e interagisci con le email che ti arrivano. Pensa ora a quanto è importante avere tutte le azioni più importanti a portata di pollice. Trova il giusto tempo e compromessi trai i contenuti della tua email e cerca di far si che il tuo bottone nelle versioni mobile sia mostrato in una posizione molto comoda per essere cliccato con il tuo pollice.

Quando crei un bottone è bene inoltre che questo abbia anche la giusta grandezza e un margine adeguato dagli elementi che lo circondano per renderlo facilmente cliccabile e leggibile.

Immagini

Creare un'email responsive non significa solamente prestare attenzione al layout utilizzato ma anche al peso e alle dimensione delle immagini che utilizzi. Quando una tua email viene aperta le immagini devono essere scaricate dal server e inserite nell' email, questo ovviamente richiede più più tempo e più risorse se le immagini risultano essere molto pesanti. Mostrare un' email senza immagini o che richiede troppe risorse dati dalla connessione del mobile possono infastidire il tuo lettore, ecco alcuni consigli per evitare che ciò accada:

- Salva sempre le tue immagini in formato JPG, GIF o PNG.

- Le tue immagini non dovrebbero mai superare i 50 KB di peso.

- Utilizza una risoluzione di 72 dpi.

- Non utilizzare immagini nate per scopi diversi, la cui risoluzione è superiore a 600 x 600 pixel.

- Ritaglia e ottimizza le tue immagini per assicurarti che queste vengano visualizzate ne troppo grandi ne troppo piccole.

- Inserisci sempre il testo alternativo all'immagine nel caso questa non venga visualizzata.

- Non utilizzare mai un'unica immagine contenente testi e bottoni.

Ricapitolando

  • Utilizza l'editor Drag&Drop Drago.
  • Quando crei l'email pensa anche al mobile.
  • Inserisci immagini ottimizzate per le email.
  • Non inviare mai una sola immagini contenente testi e bottoni.
  • Inserisci le CTA nei punti strategici e più facilmente cliccabili da mobile.
Questa guida ti è stata utile? Grazie per il tuo feedback. Si è verificato un problema durante l'invio del tuo feedback. Per favore riprova più tardi.

Hai ancora bisogno di aiuto? Contattaci Contattaci