Quando si redige un'e-mail di marketing, è possibile nascondere sezioni specifiche sui client di posta elettronica desktop o mobili. È inoltre possibile modificare la configurazione delle colonne e il layout generale per migliorare l'esperienza dei destinatari che leggono le e-mail su dispositivi più piccoli.
L'adattamento delle e-mail ai diversi dispositivi può contribuire ad aumentare il coinvolgimento e a migliorare l'esperienza complessiva dell'utente.
Comprendere le limitazioni e le considerazioni
- L'impostazione di moduli e stili separati su desktop e mobile può essere effettuata solo nell'editor drag and drop. Per le email create con i modelli del design manager, gli sviluppatori dovranno aggiungere manualmente le personalizzazioni per i dispositivi.
- I seguenti client di posta elettronica non supportano le email ottimizzate per i dispositivi mobili: Yahoo! Mail su Android, AOL Mail su Android, Gmail IMAP e alcune versioni di Samsung Mail. In questi client, i moduli nascosti saranno visibili e le configurazioni per soli dispositivi mobili saranno ignorate.
- Le impostazioni dei moduli, come la dimensione dei caratteri o il padding, non possono essere impostate su valori diversi per i dispositivi mobili e per quelli desktop. Per utilizzare valori diversi per queste impostazioni, si consiglia di creare moduli separati per soli cellulari e per soli desktop con lo stesso contenuto.
Nascondere moduli e sezioni su desktop o mobile
Per personalizzare quali moduli o sezioni appaiono per i destinatari desktop o mobile:
- Fare clic sul nome di un'e-mail creata, oppure fare clic su Crea e-mail.
- Fare clic sull'icona desktop desktop omobilemobile nella parte superiore dell'editor di e-mail per configurare le impostazioni per ciascun tipo di dispositivo.
- Passare il mouse su un modulo o una sezione e fare clic sull'icona hide hide per nascondere il modulo nella versione dell'email che si sta modificando.
- Per mostrare tutti i moduli nascosti nella versione che si sta modificando, fare clic sul menu a discesa Opzioni di visualizzazione nella parte superiore dell'editor, quindi attivare Mostra nascosti .
- Per riportare un modulo nascosto a essere visibile per quella versione dell'email, fare clic sull'icona di visualizzazione view dove altrimenti si troverebbe l'icona nascosta.
Personalizzare l'impilamento dei moduli sui dispositivi mobili
È possibile personalizzare il modo in cui i moduli di una sezione vengono impilati quando vengono visualizzati su un dispositivo mobile.
- Fare clic sul nome di un'e-mail creata, oppure fare clic su Crea e-mail.
- Nell'editor delle e-mail, fare clic su una sezione.
- Nell'editor della barra laterale sinistra, selezionare un'opzione nella sezione Impilamento :
- Mantieni le stesse colonne: l'email visualizzerà lo stesso numero di colonne su mobile come su desktop.
- Sinistra sopra destra: i moduli sul lato sinistro della sezione appariranno per primi sul cellulare.
- Destra in cima a sinistra: i moduli sul lato destro della sezione appariranno per primi sul cellulare.
Personalizzare lo stile su desktop o mobile
È possibile configurare uno stile desktop e mobile separato per una singola sezione o per l'intera e-mail di marketing.
- Fare clic sul nome di un'email in bozza, oppure fare clic su Crea email.
- Nell'editor delle email, fare clic su una sezione per modificarne lo stile, oppure fare clic sull'icona styles a sinistra per modificare lo stile dell'intera email.
- Nell'editor della barra laterale sinistra, disattivare l'interruttore Tutti i dispositivi accanto a una sezione per visualizzare impostazioni separate per desktop e cellulari.
- Modificare le impostazioni di stile per desktop e mobile.
Una volta terminata la modifica delle impostazioni di visibilità e layout dell'e-mail, è possibile visualizzare un'anteprima di come l'e-mail apparirà nei diversi client di posta elettronica.
Ottimizzare le email per i dispositivi mobili
Per migliorare l'aspetto delle vostre e-mail di marketing sui dispositivi mobili, è consigliabile seguire queste best practice:
- Utilizzare un modello di email responsive: i contenuti responsive si adattano allo schermo su cui vengono visualizzati. Mentre i modelli drag-and-drop di HubSpot sono responsive per impostazione predefinita, gli sviluppatori che creano modelli codificati dovranno utilizzare il markup dei modelli responsive.
- Ridurre le dimensioni dei file di immagine: file di immagine più piccoli si traducono in e-mail più piccole e in tempi di caricamento più rapidi. HubSpot ridimensiona automaticamente qualsiasi immagine con una larghezza impostata, riducendo così le dimensioni del file, ma è anche possibile utilizzare un servizio come FastStone Photo Resizer.
- Creare link e pulsanti leggibili: tutti i link e i pulsanti di testo devono avere una larghezza e un'altezza di almeno 57 pixel.
- Testare il testo di anteprima delle e-mail: il testo alt delle immagini inserite all'inizio di un'e-mail di marketing può essere inserito nel testo di anteprima dell'e-mail. È possibile rimuovere il testo alt dell'immagine per risolvere il problema. Si consiglia di inviare un'email di prova per verificare che il testo di anteprima venga visualizzato come previsto.
- Evitare gli elementi Javascript e iframe: gli elementi Javascript e iframe incorporati non vengono resi dalla maggior parte dei client di posta elettronica. Si consiglia di evitare di aggiungerli ai modelli codificati.
- Ridurre le dimensioni dell'e-mail per evitare il ritaglio: le e-mail di dimensioni superiori a 102 KB possono avere il loro contenuto nascosto dietro il link "Visualizza l'intero messaggio" in Gmail. Per saperne di più sul calcolo e la riduzione delle dimensioni di un'e-mail.