Editor drag & drop - Parte 6: Ottimizzazione della progettazione di email adatte ai dispositivi mobili

Un'email adatta ai dispositivi mobili è un'email che si adatta e viene visualizzata correttamente su schermi di diverse dimensioni, inclusi smartphone e tablet. Le email non adatte potrebbero essere visualizzate in modo errato, creando confusione nell'utente. Assicurarsi che il design della tua email sia adatto ai dispositivi mobili è fondamentale, poiché circa la metà delle email viene aperta su dispositivi mobili. Ciò garantisce la leggibilità su diversi dispositivi, evitando che gli utenti debbano aumentare o ridurre lo zoom per visualizzare il contenuto. 

Per semplificare questa attività, adattiamo automaticamente i design delle tue email ai dispositivi mobili: elementi come immagini, testo e pulsanti vengono ridimensionati e riorganizzati automaticamente per adattarsi agli schermi dei dispositivi mobili. Tuttavia, puoi sempre ottimizzare questo design di email predefinito per i dispositivi mobili utilizzando le diverse opzioni disponibili nella modalità di anteprima per i dispositivi mobili e seguendo i nostri suggerimenti per offrire un'esperienza ottimale ai tuoi destinatari. 

Buono a sapersi

💡 Suggerimenti per le email adatte ai dispositivi mobili

  • Semplifica con un layout a colonna singola
    Modifica il layout del contenuto per evitare di sovraccaricare il layout dell'email. Gli schermi dei dispositivi mobili hanno uno spazio limitato e la presenza di troppi contenuti può compromettere l'efficacia.
  • Usa un'immagine quadrata o orizzontale
    Per le tue immagini, ti consigliamo di utilizzare il formato quadrato o orizzontale, più piccolo di quello verticale. Inoltre, assicurati che la dimensione in pixel dell'immagine non superi le dimensioni del display del dispositivo mobile.
  • Evita contenuti di grandi dimensioni
    Ridimensiona i tuoi contenuti, soprattutto se hai immagini o loghi di grandi dimensioni da visualizzare su dispositivi mobili. Mantieni la larghezza delle tue immagini tra 400 e 650 pixel; un'immagine larga 400 pixel è la dimensione più piccola richiesta per una visualizzazione a larghezza intera su un dispositivo mobile. Puoi anche aumentare le dimensioni dei tuoi pulsanti per aumentare i clic. Ti consigliamo di testare le tue email prima di inviarle ai destinatari per verificare le dimensioni dei tuoi contenuti e assicurarti che siano adatti ai dispositivi mobili.
  • Implementa il testo alternativo nell'immagine o nel logo
    Ti consigliamo di aggiungere il testo alternativo alla tua immagine, cioè la descrizione testuale che appare quando un'immagine o un logo non viene visualizzato in un'email o se il destinatario ha bloccato l'immagine. È vivamente consigliato anche perché migliora l'accessibilità dei tuoi contenuti per gli utenti che utilizzano strumenti per la lettura dello schermo.
    ➡️ Per ulteriori informazioni, consulta la sezione dedicata nel nostro articolo Come usare i blocchi di contenuto (testo e link, immagine, pulsante, ecc.).

📱 Ottimizzazione del design per dispositivi mobili

Quando progetti la tua email nell'editor drag & drop, puoi visualizzare e modificare il design email predefinito per i dispositivi mobili cliccando sull'icona del dispositivo mobile nell'angolo in alto a destra dello schermo:

blobid1.png

Offriamo diverse possibilità per modificare la versione predefinita per dispositivi mobili del design della tua email e per scegliere come desideri vengano visualizzati i tuoi contenuti sui dispositivi mobili:

Regola il corpo dell'email a larghezza intera

Utilizza l'opzione Full width on mobile (Larghezza intera su mobile) per estendere a larghezza intera le dimensioni del corpo della tua email sui dispositivi mobili. Consigliato per migliorare la leggibilità della tua email:

  1. Clicca sull'icona del dispositivo mobile nella parte superiore dello schermo per accedere alla modalità mobile.
  2. Clicca su Style (Stile) a sinistra dello schermo.
  3. Nella sezione Template (Modello) del pannello a sinistra, attiva l'opzione Full width on mobile (Larghezza intera su mobile).Template_full_width_mobile_en-us.jpg

Modifica del layout del contenuto

Per ogni sezione, puoi scegliere l'allineamento e l'orientamento dei tuoi contenuti. Allinealo verticalmente per migliorare la leggibilità o orizzontalmente per risparmiare spazio. L'orientamento scelto dipenderà dal tipo di contenuto che si desidera visualizzare. Per aiutarti a scegliere come visualizzare i tuoi contenuti sui dispositivi mobili, ecco alcuni esempi di cose da fare e da non fare:

  Cose da fare Cose da non fare
Allineamento verticale Align_vertically_do_en-us.jpg Align_vertically_dont_en-us.jpg
Allineamento orizzontale Align_horizontally_do_en-us.jpg Align_horizontally_dont_en-us.jpg

Se l'orientamento dei tuoi contenuti nella versione mobile predefinita del nostro editor non ti soddisfa, puoi modificarlo:

  1. Clicca sull'icona del dispositivo mobile nella parte superiore dello schermo per accedere alla modalità mobile.
  2. Seleziona la sezione per cui desideri modificare l'orientamento.
  3. Nel pannello a sinistra, seleziona l'orientamento del contenuto desiderato:
    1. Align vertically (Allinea in verticale), clicca sulla freccia rivolta verso il basso.
    2. Align horizontally (Allinea in orizzontale), clicca sulla freccia rivolta verso destra.Mobile_mode__content_orientation_en_us.gif
  4. Se scegli di allineare i tuoi contenuti in verticale, puoi anche scambiarli invertendo l'ordine del contenuto della sezione. In questo modo, ad esempio, il testo verrà mostrato prima dell'immagine o viceversa.
    A tale scopo, attiva l'opzione Swap content (Scambia contenuto) nel pannello a sinistra:
    Mobile_mode_swap_content_en-us.gif

Come nascondere una sezione o un blocco di contenuto

Nascondere una sezione o un blocco di contenuto sui dispositivi mobili aiuta a ridurre i contenuti lunghi, creare un design minimalista ed evitare il sovraccarico di email sui dispositivi mobili.

Puoi scegliere se trasferire ciò che ritieni più utile e importante in modalità mobile e nascondere i contenuti non essenziali.

Per informazioni su come nascondere una sezione o un blocco di contenuto sui dispositivi mobili, consulta il nostro articolo dedicato Come mostrare o nascondere il contenuto in base al tipo di dispositivo.

email-with-display-condition_EN-US.png
💡 Buono a sapersi
In modalità desktop, puoi nascondere i contenuti in base ad attributi di contatto, parametri transazionali o blocchi ripetibili.

Ridimensionamento dei contenuti

💡 Buono a sapersi
La modifica delle dimensioni dei titoli e dei testi in modalità mobile modifica anche le loro dimensioni in modalità desktop.

La velocità di caricamento sui dispositivi mobili è inferiore rispetto ai dispositivi desktop. Ridimensiona i pulsanti o le immagini per caricare più velocemente la tua email sui dispositivi mobili:

  1. Clicca sull'icona del dispositivo mobile nella parte superiore dello schermo per accedere all'opzione della modalità mobile.
  2. Seleziona il pulsante o l'immagine che desideri ridimensionare.
    Resize_image_button_en-us.jpg
  3. Nella sezione Width (Larghezza) del pannello a sinistra, inserisci la larghezza desiderata per i tuoi contenuti. Puoi modificare le dimensioni in percentuale o in pixel cliccando sul menu a discesa accanto a %.
    Ti consigliamo di mantenere la larghezza dell'immagine tra 400 e 650 pixel.

⏭️ E adesso?

🤔 Domande?

In caso di domande, non esitare a contattare il team dell’assistenza creando un ticket dal tuo account. Se ancora non hai un account, puoi contattarci qui.

Se stai cercando aiuto per un progetto che prevede l'utilizzo di Brevo, possiamo metterti in contatto con il giusto partner esperto certificato Brevo.

💬 Questo articolo ti è stato utile?

Utenti che ritengono sia utile: 8 su 52