In questa pagina: scopri come progettare il contenuto delle e-mail in E-mail designer, i passaggi chiave per crearlo da zero, tramite codice o da importando HTML e le best practice per mantenere il rendering delle e-mail corretto su tutti i client.
Per accedere a E-mail Designer e iniziare a progettare il contenuto delle e-mail, devi prima creare un’e-mail in un percorso o in una campagna.
Puoi quindi utilizzare la funzionalità di progettazione e-mail di Journey Optimizer per importare contenuto esistente o iniziare a creare e-mail dinamiche da zero. Ulteriori informazioni
E-mail Designer consente inoltre di:
-
Sfrutta Adobe Experience Manager Assets Essentials per arricchire le e-mail e creare e gestire un tuo database di risorse. Ulteriori informazioni
-
Trova foto Adobe Stock per creare i contenuti e migliorare la progettazione delle e-mail. Ulteriori informazioni
-
Migliora l’esperienza dei clienti creando messaggi personalizzati e dinamici in base ai loro attributi di profilo. Ulteriori informazioni su personalizzazione e contenuti dinamici.
➡️ Scopri questa funzione nel video
Passaggi chiave per la creazione di contenuti e-mail key-steps
Dopo aver creato un’e-mail, puoi iniziare a progettarne il contenuto.
-
Dalla schermata di configurazione del percorso o della campagna, passa alla schermata Modifica contenuto per accedere a E-mail Designer. Ulteriori informazioni
-
Nella pagina home di E-mail Designer, scegli come desideri progettare l’e-mail tra le seguenti opzioni:
-
Progetta l’e-mail da zero tramite l’interfaccia di E-mail designer e sfrutta le immagini da Adobe Experience Manager Assets. Scopri come progettare il contenuto delle e-mail in questa sezione.
-
Codifica o incolla HTML non elaborato direttamente in E-mail designer. Scopri come codificare il tuo contenuto in questa sezione.
note NOTE In una campagna, puoi anche selezionare il pulsante Editor di codice dalla schermata Modifica contenuto. Ulteriori informazioni -
Importa contenuto HTML esistente da un file o da una cartella .zip. Scopri come importare un contenuto e-mail in questa sezione.
-
Converti le progettazioni di immagini in modelli HTML utilizzando il convertitore da immagine a HTML basato sull’IA. Scopri come trasformare le immagini statiche in modelli e-mail modificabili in questa sezione.
-
Seleziona un contenuto esistente da un elenco di modelli incorporati o personalizzati. Scopri come utilizzare i modelli e-mail in questa sezione.
-
-
Una volta definito e personalizzato il contenuto dell’e-mail, puoi verificarlo con controlli automatizzati del contenuto per rilevare problemi HTML e CSS, come tag non supportati, divs vuoti e violazioni dei limiti di dimensione, direttamente nel pannello di authoring prima dell’invio. Ulteriori informazioni
note NOTE Il sistema controlla anche le impostazioni chiave durante la progettazione e visualizza avvisi per avvisi (consigli e best practice) ed errori (problemi di blocco che impediscono il test o l’attivazione). Ulteriori informazioni sugli avvisi e-mail 
-
Puoi anche convalidare la qualità dei contenuti per individuare potenziali problemi di leggibilità, coerenza ed efficacia dei contenuti. Ulteriori informazioni sulla convalida della qualità dei contenuti
-
Infine, puoi esportare il contenuto per la convalida o per un utilizzo successivo. Fai clic su Esporta HTML per salvare sul computer un file zip che includerà il tuo HTML e le tue risorse.
Best practice per la progettazione e-mail best-practices
Quando si inviano le e-mail, è importante tenere presente che i destinatari possono inoltrarle e, a volte, questo può causare problemi con il rendering dell’e-mail. Ciò è particolarmente vero quando si utilizzano classi CSS che potrebbero non essere supportate dal provider di posta elettronica utilizzato per l’inoltro, ad esempio, se si utilizza la classe CSS “is-desktop-hidden” per nascondere un’immagine su dispositivi mobili.
Per ridurre al minimo questi problemi di rendering, ti consigliamo di mantenere la struttura della progettazione e-mail il più semplice possibile. Prova a utilizzare una singola progettazione che funzioni bene sia per il desktop che per i dispositivi mobili ed evita di utilizzare classi CSS complesse o altri elementi di progettazione che potrebbero non essere completamente supportati da tutti i client e-mail.
Seguendo queste best practice, puoi assicurarti che il rendering delle e-mail sia sempre corretto, indipendentemente da come vengono visualizzate o inoltrate dai destinatari.
Per le best practice per la progettazione di e-mail, fai riferimento alla tabella seguente:
- Layout statici basati su tabella per la struttura
- Tabelle HTML e tabelle nidificate per layout coerenti
- Larghezze del modello tra 600 px e 800 px
- CSS semplice e in linea per gli stili
- Font sicuri per il web per compatibilità universale
- Le immagini di sfondo potrebbero non essere visualizzate in alcune piattaforme e-mail.
- I font web personalizzati non sono universalmente supportati.
- I layout larghi possono essere difficili da visualizzare sugli schermi più piccoli.
- Le mappe immagine offrono funzionalità limitate.
- Gli stili CSS incorporati vengono talvolta rimossi durante la consegna delle e-mail.
- JavaScript non è solitamente supportato negli ambienti e-mail.
- I tag
<iframe>vengono bloccati nella maggior parte delle piattaforme. - Flash è obsoleto e non è più supportato.
- L’audio incorporato spesso non viene riprodotto correttamente.
- I video incorporati non sono compatibili con molte piattaforme e-mail.
- I moduli non funzionano nelle e-mail.
- L’utilizzo di più livelli
<div>può causare problemi di rendering.
Guardrail e limitazioni specifici email-guardrails
Anche le e-mail ben strutturate possono essere riprodotte in modo diverso a seconda del client o dell’ambiente in cui vengono aperte. Le sezioni seguenti documentano le limitazioni note e i comportamenti specifici dei clienti da tenere presenti durante la progettazione delle e-mail.
Limitazioni del browser web mobile mobile-web-limitations
Il rendering di e-mail può essere diverso quando i destinatari aprono Gmail o Outlook tramite un browser Web mobile (ad esempio, Chrome su un telefono), anziché utilizzare un’app mobile nativa o un client desktop. Si tratta di una limitazione nota degli ambienti di posta sul web mobile e non è specifica di Journey Optimizer.
Questa differenza di rendering deriva dal comportamento dei client di posta sul web all’interno di un browser mobile. Il browser esegue prima il rendering dell’interfaccia utente completa della posta sul desktop, posizionando l’e-mail a due livelli di profondità, oltre la portata di qualsiasi query CSS o multimediale responsive. Gmail Web inoltre elimina i blocchi CSS <style> e racchiude il contenuto delle e-mail nel proprio <div>, che può sovrascrivere gli stili e creare conflitti di allineamento.
I sintomi tipici includono lo spostamento dell’allineamento del testo (il testo allineato a sinistra appare centrato), linee di separazione bianche supplementari tra le sezioni di contenuto e un layout complessivo diverso dalla struttura del modello.
Questi problemi si verificano solo in Gmail Web e Outlook Web quando si accede tramite un browser mobile. Outlook e le app native per dispositivi mobili Gmail, così come tutti i client desktop, non subiscono modifiche.
-
Utilizza layout semplici basati su tabelle con CSS completamente allineato.
-
Evita di fare affidamento su query multimediali o blocchi
<style>per proprietà di layout critiche come l'allineamento del testo.
Considerazioni sul rendering di Outlook outlook-tips
In Outlook sono disponibili numerosi problemi di rendering che possono influire sul layout dell’e-mail se non vengono considerati durante la progettazione. Per garantire il corretto rendering delle e-mail in Outlook, segui queste best practice:
- Utilizza numeri pari per spaziatura interna, dimensioni dei caratteri e larghezze. In Outlook i pixel vengono convertiti in punti internamente, il che può determinare una spaziatura irregolare e linee bianche indesiderate quando vengono utilizzati numeri dispari.
- Impostare le larghezze delle tabelle in pixel, non in percentuale. Le larghezze basate su percentuali possono interrompere il layout in Outlook. Applica i valori di larghezza direttamente nell’attributo di stile di ogni tabella.
- Impostare sempre le larghezze delle immagini utilizzando l’attributo
width. Outlook ignora le proprietà CSSwidtheheightnelle immagini e utilizza le dimensioni native del file se non è presente alcun attributo HTML. - Includi testo alternativo in tutte le immagini. In questo modo si evitano problemi di visualizzazione e sicurezza quando le immagini sono bloccate.
- Applicare i bordi alle celle di tabella, non all’elemento di tabella stesso. Se il rendering di un bordo non viene eseguito come previsto, spostarlo da
<table>a<td>. - Evitare angoli arrotondati. CSS
border-radiusnon è supportato in modo affidabile in Outlook. Gli angoli quadrati sono l’impostazione predefinita sicura.
Per considerazioni sulla progettazione in modalità scura, tra cui l’utilizzo di query multimediali e tecniche di scambio di immagini specifiche per Outlook.com, fare riferimento a questa pagina.
Video dimostrativi video
Scopri come creare contenuti e-mail con l’editor dei messaggi.
Scopri come configurare gli esperimenti sui contenuti per test A/B ed esplora al meglio i contenuti e-mail per raggiungere gli obiettivi aziendali.