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, ad esempio tag non supportati, div vuoti e violazioni dei limiti di dimensione, direttamente nel pannello di authoring prima dell’invio. Ulteriori informazioni
note NOTE Durante la progettazione, il sistema verifica anche le impostazioni chiave e mostra avvisi relativi ad avvertenze (consigli e best practice) ed errori (problemi critici 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 includa 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 il rendering delle e-mail ben strutturate può essere diverso a seconda del client o dell’ambiente in cui vengono aperte. Le sezioni seguenti documentano le limitazioni note e i comportamenti specifici dei client da tenere presenti durante la progettazione delle e-mail.
Limitazioni del browser web per dispositivi mobili mobile-web-limitations
Il rendering delle e-mail può essere diverso quando i destinatari aprono Gmail oppure Outlook tramite un browser web per dispositivi mobili (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 per dispositivi mobili e non è specifica di Journey Optimizer.
Questa differenza di rendering deriva dal comportamento dei client di posta sul web all’interno di un browser per dispositivi mobili. Il browser esegue innanzitutto il rendering dell’interfaccia utente completa della posta sul desktop, posizionando l’e-mail a due livelli di profondità, al di fuori della portata di qualsiasi CSS reattivo o media query. Inoltre, la versione web di Gmail rimuove i blocchi <style> dei CSS e racchiude il contenuto delle e-mail nel proprio <div>; questa operazione può sostituire i tuoi 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 del contenuto e un layout complessivo diverso dalla progettazione del modello.
Questi problemi si verificano solo nella versione web di Gmail e Outlook quando si accede tramite un browser per dispositivi mobili. Le app mobili native di Outlook e Gmail, così come tutti i client desktop, non sono interessati.
-
Utilizza layout semplici basati su tabelle con CSS completamente in linea.
-
Evita di fare affidamento su media query o blocchi
<style>per proprietà di layout critiche come l’allineamento del testo.
Considerazioni sul rendering di Outlook outlook-tips
Outlook presenta una serie di peculiarità di rendering che possono influire sul layout delle e-mail se non vengono prese in considerazione in fase di progettazione. Per garantire il corretto rendering delle e-mail in Outlook, segui queste best practice:
- Utilizza numeri pari per spaziatura, dimensioni dei font e larghezze. Outlook converte internamente i pixel in punti, il che può causare una spaziatura irregolare e la comparsa di linee bianche indesiderate quando si utilizzano numeri dispari.
- Imposta le larghezze delle tabelle in pixel, non in percentuale. Le larghezze basate su percentuali possono compromettere il layout in Outlook. Applica i valori di larghezza direttamente nell’attributo dello stile di ogni tabella.
- Imposta sempre le larghezze delle immagini utilizzando l’attributo
width. Outlook ignora le proprietàwidtheheightdei CSS nelle 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.
- Applica i bordi alle celle della tabella, non all’elemento della tabella stesso. Se il rendering di un bordo non viene eseguito come previsto, spostalo da
<table>a<td>. - Evita angoli arrotondati. La proprietà
border-radiusdei CSS non è supportata 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 media query e tecniche di scambio di immagini specifiche per Outlook.com, fai 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.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to design email content in the Email Designer — building from scratch, code, or imported HTML — verify it with automated content checks and content quality validation, export it, and follow rendering best practices and client-specific limitations.
Intents:
- Choose how to design an email: from scratch, code/paste raw HTML, import existing HTML, convert image designs to HTML, or select an existing content template
- Verify email content with automated content checks before sending
- Validate content quality for readability, cohesiveness, and effectiveness
- Export email content as a zip file containing HTML and assets
- Apply email design best practices to keep emails rendering well across clients
- Account for mobile web browser and Outlook rendering limitations
Glossary:
- Email Designer: The Journey Optimizer interface used to import content or build responsive emails from scratch, code, or imported HTML (product-specific)
- Automated content checks: A check that catches HTML and CSS issues — such as unsupported tags, empty divs, and size limit violations — directly in the authoring panel, before sending (product-specific)
- Content quality validation: A validation that identifies potential issues with readability, content cohesiveness, and effectiveness (product-specific)
- Image to HTML converter: An AI-powered converter that transforms static image designs into editable email templates (product-specific)
- Export HTML: An action that saves a zip file to your computer including your HTML and assets (product-specific)
Guardrails:
- Recommended template widths are between 600px and 800px (recommended).
- Recommended practices: static, table-based layouts; HTML tables and nested tables; simple, inline CSS; web-safe fonts.
- Use with care (may not render everywhere): background images, custom web fonts, wide layouts, image maps, and embedded CSS (embedded CSS is sometimes removed during email delivery).
- Not recommended (generally unsupported in email): JavaScript,
<iframe>tags, Flash, embedded audio, embedded video, forms, and<div>layering. - Alerts distinguish warnings (recommendations and best practices) from errors (blocking issues that prevent testing or activation).
- Mobile web rendering differences occur only in Gmail Web and Outlook Web when accessed via a mobile browser; Gmail/Outlook native mobile apps and all desktop clients are not affected.
- Outlook rendering: use even numbers for padding, font sizes, and widths; set table widths in pixels not percentages; set image widths using the
widthattribute; include Alt text on all images; apply borders to<td>not<table>; avoidborder-radius(rounded corners).
Terminology:
- Canonical name: Email Designer — Acronym: n/a — variants: message editor, email design capabilities
- Synonyms: “automated content checks” = “content check”
- Do not confuse: “automated content checks” (HTML/CSS issue detection) ≠ “content quality validation” (readability, cohesiveness, effectiveness)
- Do not confuse: “warnings” (recommendations and best practices) ≠ “errors” (blocking issues that prevent testing or activation)
FAQ:
- Q: What options are available for designing an email? — Design from scratch, code or paste raw HTML, import existing HTML from a file or .zip, convert image designs to HTML templates, or select an existing built-in or custom template.
- Q: How can I catch HTML and CSS issues before sending? — Use automated content checks, which flag unsupported tags, empty divs, and size limit violations in the authoring panel.
- Q: What template width is recommended? — Between 600px and 800px.
- Q: Why does my email look different in Gmail or Outlook on a phone browser? — This is a known limitation of Gmail Web and Outlook Web via a mobile browser; use simple table-based layouts with fully inlined CSS and avoid relying on media queries or
<style>blocks for critical layout. - Q: How do I export my content? — Click Export HTML to save a zip file containing your HTML and assets to your computer.