Progettazione di email adatte ai dispositivi mobili

Con sempre più persone sui dispositivi mobili, è più importante che mai considerarli durante la creazione delle email. Di seguito sono riportati alcuni suggerimenti e trucchi che è possibile utilizzare durante la creazione dei modelli, in modo da essere all’avanguardia nella progettazione di email per la posta in arrivo dei dispositivi mobili e mantenere interessati i propri abbonati.

Nota: non è possibile modificare un'email solo per dispositivi mobili o solo per desktop. Al contrario, stai creando un’email con un rendering diverso in entrambe le applicazioni.

I client di posta elettronica leggono i messaggi da sinistra a destra
Gli elementi HTML vengono sempre impilati da sinistra a destra. Ciò significa che i tuoi blocchi di contenuti si impileranno da sinistra a destra. Se crei un'email con un'immagine a sinistra, quindi aggiungi un blocco di testo a destra dell'immagine, nei dispositivi mobili l'immagine apparirà sopra quel testo. Inoltre, è sempre consigliabile mantenere il design semplice e pulito, tenendo a mente la schermata più piccola.

Mantieni la larghezza dell’email non oltre i 650 pixel
Questa è la larghezza che funziona per la maggior parte dei client email e dei dispositivi mobili. Se un'email è più larga di 650 pixel, potrebbe essere necessario utilizzare una barra di scorrimento orizzontale per visualizzare il messaggio. Questo non solo rende il tuo messaggio difficile da leggere, ma potrebbe costarti l’annullamento di iscrizioni a causa di un'esperienza poco ottimale.

La larghezza dell'immagine deve essere compresa tra 400 a 650 pixel
Un'immagine larga 400 pixel è il minimo necessario per visualizzarla a larghezza intera su un dispositivo mobile. Per visualizzare le dimensioni dell'immagine, fai clic sull'immagine nel designer e visualizza le dimensioni nella scheda Opzioni:

adjust_image_size.png

Per ridimensionarla, è sufficiente regolarla nella scheda Opzioni oppure ridimensiona il file di immagine effettivo e ricarica l'immagine al suo posto.

Ricorda, è sempre meglio ridurre un'immagine più grande che ingrandire un'immagine più piccola.

Usa testo alternativo
Il testo alternativo è un ottimo strumento da utilizzare poiché questo testo sarà visibile nel caso in cui un abbonato abbia il blocco delle immagini. Per aggiungere testo alternativo all'immagine, fai clic sull'immagine nella campagna e aggiungi 1-2 parole nel campo “Info” della scheda Opzioni:

alt_text_2.png

Utilizza blocchi di immagini invece di inserire un'immagine in un blocco di testo
I blocchi di contenuto di testo con un'immagine e collegamenti inline con tale immagine non saranno selezionabili in Outlook 2007 o Outlook 2013 (vedi l'immagine seguente). Inoltre, il testo potrebbe non andare a capo correttamente intorno all'immagine quando viene visualizzato in dispositivi mobili.

example_link.png

Utilizza il widget spaziatore per creare spazi vuoti intorno a contenuti e immagini
L'uso della spaziatura interna intorno a un'immagine o a un contenuto per creare spazi vuoti forzerà il restringimento del contenuto quando viene visualizzato su alcuni dispositivi mobili. Utilizza invece il widget spaziatore nel designer di trascinamento della selezione e impostalo in modo da nasconderlo sul dispositivo mobile, se richiesto (ulteriori informazioni di seguito).

spacer_widget.png

Sfrutta la funzionalità “Nascondi sul dispositivo mobile”
Questa funzionalità nasconderà gli elementi non essenziali (ossia superflui) nella tua email quando vengono visualizzati su un dispositivo mobile. Questo migliorerà l'esperienza per i tuoi abbonati e li terrà iscritti.

Per nascondere un elemento su dispositivo mobile, è sufficiente fare clic su quel blocco, quindi sull'ingranaggio:

click_cog.png

Fai clic su “Nascondi sui dispositivi mobili”.

hide_on_mobile.png

Quando passi il mouse su quell’elemento nel designer, verrà visualizzato quanto segue:

hide_message.png

Sperimenta con il testo di preintestazione
Distinguiti dal resto delle email nella posta in entrata dei tuoi abbonati e invogliali ad aprire la tua email. Scopri di più qui sull'aggiunta di un testo di preintestazione alla tua email

Testa l’email
Usa l'anteprima del desktop e invia a te stesso e ai tuoi colleghi un'email di test da visualizzare su diversi dispositivi mobili. Puoi anche utilizzare la nostra funzionalità di anteprima di compatibilità per testare la tua email in vari client email.

Altre domande? Invia una richiesta