Ottimizzare le e-mail di marketing per i dispositivi mobili

Quando redigi un'e-mail di marketing, puoi nascondere sezioni specifiche sui client di posta elettronica desktop o mobili. Puoi anche modificare la configurazione delle colonne e il layout generale per migliorare l'esperienza dei destinatari che leggono la tua e-mail su dispositivi più piccoli.

Adattare la tua email ai diversi dispositivi può aiutarti ad aumentare il coinvolgimento e a migliorare l'esperienza complessiva degli utenti che leggono le tue email.

Comprendere i limiti e gli aspetti da considerare

• L'impostazione di moduli e stili distinti per desktop e dispositivi mobili può essere effettuata solo nell'editor drag-and-drop. Per le email create utilizzando i modelli del Design Manager, gli sviluppatori dovranno aggiungere manualmente eventuali personalizzazioni per dispositivo.
• I seguenti client di posta elettronica non supportano le email ottimizzate per 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 specifiche per dispositivi mobili saranno ignorate.
• Le impostazioni dei moduli, come la dimensione dei caratteri o il riempimento, non possono essere impostate su valori diversi per dispositivi mobili e desktop. Per utilizzare valori diversi per queste impostazioni, si consiglia di creare moduli separati, uno solo per dispositivi mobili e uno solo per desktop, con lo stesso contenuto.

Nascondere moduli e sezioni su desktop o dispositivi mobili

Per personalizzare quali moduli o sezioni vengono visualizzati dai destinatari su desktop o su dispositivi mobili:

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > E-mail. Se Altro non compare nel tuo account, vai direttamente a Marketing > E-mail.
2. Fare clic sul nome di un'e-mail in bozza oppure su Crea e-mail.
3. In basso a destra nell'editor dell'e-mail, cliccasull'icona per il desktop osull'icona per i dispositivi mobili per configurare le impostazioni per ciascun tipo di dispositivo.

4. Passa il mouse su un modulo o una sezione e cliccasull'icona "Nascondi" per nascondere quel modulo nella versione dell'e-mail che stai modificando.

5. Per visualizzare tutti i moduli nascosti di una versione che stai modificando, clicca sul menu a tendina "Opzioni di visualizzazione " nella parte superiore dell'editor, quindi attiva l'opzione "Mostra nascosti" .
6. Per rendere nuovamente visibile un modulo nascosto in quella versione dell’e-mail, cliccasull’icona di visualizzazione « view » che si trova al posto dell’icona di nascondimento.

Personalizza l’ordinamento dei moduli sui dispositivi mobili

È possibile personalizzare la disposizione dei moduli in una sezione quando vengono visualizzati su un dispositivo mobile.

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > E-mail. Se Altro non compare nel tuo account, vai direttamente a Marketing > E-mail.
2. Fare clic sul nome di un'e-mail in bozza oppure fare clic su Crea e-mail.
3. Nell'editor delle email, clicca su una sezione.
4. Nell'editor della barra laterale, seleziona un'opzione nella sezione "Disposizione ":
   • Mantieni le stesse colonne: l’e-mail visualizzerà lo stesso numero di colonne sia sui dispositivi mobili che sui computer desktop.
   • Sinistra sopra destra: i moduli sul lato sinistro della sezione appariranno per primi sui dispositivi mobili.
   • Destra sopra sinistra: i moduli sul lato destro della sezione appariranno per primi sui dispositivi mobili.

Personalizza lo stile su desktop o su dispositivi mobili

È possibile configurare uno stile diverso per desktop e dispositivi mobili, sia per una singola sezione che per l’intera email di marketing.

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > E-mail. Se Altro non compare nel tuo account, vai direttamente a Marketing > E-mail.
2. Fai clic sul nome di un'email in bozza oppure su Crea email.
3. Nell'editor dell'email, clicca su una sezione per modificarne lo stile oppure cliccasull'icona del design del modello nella barra laterale sinistra per modificare lo stile dell'intera email.
4. Nell’editor della barra laterale, disattiva l’interruttore "Tutti i dispositivi " accanto a una sezione per visualizzare le impostazioni separate per desktop e dispositivi mobili.

5. Modifica le impostazioni di stile per desktop e dispositivi mobili.

Una volta terminate le modifiche alle impostazioni di visibilità e layout dell’e-mail, è possibile visualizzare in anteprima come apparirà l’e-mail nei diversi client di posta elettronica.

Ottimizza le email per i dispositivi mobili

Per migliorare la visualizzazione delle tue email di marketing sui dispositivi mobili, ti consigliamo di seguire queste best practice:

• Utilizza un modello di email responsive: i contenuti responsive si adattano alle dimensioni dello schermo su cui vengono visualizzati. Sebbene i modelli drag-and-drop di HubSpot siano responsive per impostazione predefinita, gli sviluppatori che creano modelli codificati dovranno utilizzare il markup dei modelli di email responsive.
• Riduci le dimensioni dei file immagine: file immagine più piccoli comportano email di dimensioni ridotte e tempi di caricamento più rapidi. Sebbene HubSpot ridimensioni automaticamente qualsiasi immagine con una larghezza predefinita, riducendone così le dimensioni, puoi anche utilizzare un servizio come FastStone Photo Resizer.
• Crea link e pulsanti leggibili: qualsiasi link testuale e pulsante dovrebbe avere almeno 57 pixel di larghezza e altezza.
• Verifica il testo di anteprima dell’e-mail: il testo alternativo delle immagini inserite all’inizio di un’e-mail di marketing può essere inserito nel testo di anteprima dell’e-mail. Rimuovere il testo alternativo dell’immagine dovrebbe risolvere questo problema. Si consiglia di inviare un’e-mail di prova per verificare che il testo di anteprima appaia come previsto.
• Evita gli elementi JavaScript e iframe: gli elementi JavaScript e iframe incorporati non vengono visualizzati dalla maggior parte dei client di posta elettronica. Si consiglia di evitare di aggiungerli ai modelli codificati.
• Riduci le dimensioni dell’e-mail per evitare il troncamento: in Gmail, le e-mail superiori a 102 KB possono avere il contenuto nascosto dietro un link “Visualizza l’intero messaggio”. Scopri di più su come calcolare e ridurre le dimensioni di un’e-mail.