Show Menu
ARGOMENTI×

Best practice per i modelli e-mail

I componenti e-mail di AEM non sono più disponibili. A causa della natura dell’e-mail, che unisce contenuto e stile, i componenti e-mail forniti out-of-the-box da AEM diventano un utilizzo limitato per i clienti, a causa della necessità di implementare stili personalizzati in qualsiasi componente sia necessario per i progetti.
I componenti e-mail possono essere implementati a livello di progetto, e i componenti e-mail AEM obsoleti illustrano come ottenere questo risultato. Tuttavia, questi componenti obsoleti non devono essere utilizzati per i progetti.
Questo documento descrive alcune delle procedure ottimali per la progettazione delle e-mail e fornisce un modello di campagna e-mail ben sviluppato.
La campagna dimostrativa disponibile in AEM segue tutte queste best practice. Per ogni best practice viene descritto in che modo vengono implementate le best practice nella campagna demo.
Utilizzate queste best practice per la creazione di newsletter.
Tutto il contenuto della campagna deve essere creato sotto una master pagina di tipo cq/personalization/components/ambitpage .
Ad esempio, se la struttura della campagna pianificata è simile a
/content/campaigns/teasers/en/campaign-promotion-global
È necessario assicurarsi che si trovi sotto una master pagina
/content/campaigns/teasers/master/en/campaign-promotion-global
Quando crei un modello di posta elettronica per Adobe Campaign, devi includere la proprietà acMapping con il valore mapRecipient nel nodo jcr:content del modello, oppure non sarai in grado di selezionare il modello Adobe Campaign in Proprietà ​pagina di AEM (il campo è disabilitato).

Modello/componente pagina

/libs/mcm/campaign/components/campaign_newsletterpagina
Best practice Implementazione
Specificate il tipo di documento per garantire un rendering coerente.
Aggiungi DOCTYPE all'inizio (HTML o XHTML)
È configurabile tramite la modifica della proprietà cq:doctype in "/etc/designs/default/jcr:content/campaign_newsletterpage"
Il valore predefinito è "XHTML":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//IT" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Può essere modificato in "HTML_5":
<!DOCTYPE HTML>
Specificate la definizione del carattere per garantire il corretto rendering dei caratteri speciali.
Aggiungi la dichiarazione CHARSET (ad esempio iso-8859-15, UTF-8) a <head>
È impostato su UTF-8.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Codificate tutta la struttura utilizzando l'elemento <table>. Per i layout più complessi, è necessario nidificare le tabelle per creare strutture complesse.
L'e-mail dovrebbe avere un buon aspetto anche senza css.
Le tabelle vengono utilizzate in tutto il modello per strutturare il contenuto. Attualmente è possibile utilizzare un massimo di quattro tabelle nidificate (1 tabella di base + max. 3 livelli di nidificazione)
I tag <div> vengono utilizzati solo in modalità di creazione per garantire la corretta modifica dei componenti.
Utilizzate gli attributi dell'elemento (come Margine di celle, Valore e Larghezza) per impostare le dimensioni della tabella. Questo forza una struttura di modello a scatola.
Tutte le tabelle contengono attributi necessari come bordo , margine celle, spaziatura celle e larghezza .
Per armonizzare il posizionamento degli elementi all'interno delle tabelle, tutte le celle delle tabelle presentano l'attributo valign="top" impostato.
Se possibile, tenete conto della facilità di utilizzo dei dispositivi mobili. Le media query consentono di aumentare le dimensioni del testo sugli schermi di piccole dimensioni e di fornire aree di hit di dimensioni ridotte per i collegamenti.
Se la progettazione lo consente, rendete l'e-mail reattiva.
Per quanto riguarda gli stili CSS utilizzati per illustrare la progettazione demo, le media query vengono utilizzate per offrire una versione semplice per dispositivi mobili.
Il CSS in linea è meglio che mettere tutti i CSS all'inizio.
Per illustrare meglio la struttura HTML sottostante e semplificare la possibilità di personalizzare la struttura della newsletter, sono state allineate solo alcune definizioni CSS.
Gli stili di base e le varianti di modello sono stati estratti in un blocco di stile in <head> della pagina. All’invio finale della newsletter, queste definizioni CSS devono essere allineate nell’HTML. È pianificato un meccanismo automatico di inlinening, ma attualmente non disponibile.
Semplificate il CSS. Evitate dichiarazioni di stile composto, codice abbreviato, proprietà di layout CSS, selettori complessi e pseudo-elementi. Per quanto riguarda gli stili CSS utilizzati per illustrare la progettazione demo, le raccomandazioni CSS vengono seguite.
Le e-mail devono avere una larghezza massima di 600-800 pixel. Questo li renderà più efficienti nelle dimensioni del riquadro di anteprima fornite da molti client. La larghezza della tabella dei contenuti è limitata a 600 pixel nella progettazione demo.

Immagini

/libs/mcm/campaign/components/image
Best practice
Implementazione
Aggiungere attributi alt alle immagini
L’attributo alt è stato definito come obbligatorio per il componente immagine.
Per le immagini, usate jpg invece del formato png
Le immagini saranno sempre servite come JPG dal componente immagine.
Utilizzate <img> un elemento invece delle immagini di sfondo in una tabella.
Nei modelli non vengono utilizzati dati immagine di sfondo.
Aggiungi attribute style="display block" sulle immagini. Consente di visualizzare bene su Gmail.
Tutte le immagini contengono per impostazione predefinita l’attributo style="display block" .

Generico

Best practice
Implementazione
Utilizzate la funzione di convalida W3C per correggere il codice HTML. Accertatevi che tutti i tag aperti siano chiusi correttamente.
Il codice è stato convalidato. Per XHTML Transitional Doctype solo l'attributo xmlns mancante per elemento mancante.
Non preoccupatevi di JavaScript o Flash; tali tecnologie non sono in gran parte supportate dai client e-mail.
Nel modello per newsletter non vengono utilizzati JavaScript né Flash.
Aggiungete una versione di testo normale per l’invio multiparte.
Un nuovo widget è stato creato nelle proprietà della pagina per estrarre facilmente una versione in testo normale dal contenuto della pagina. Può essere utilizzato come punto di partenza per la versione normale finale.

Modelli ed esempi per newsletter per campagne

Con AEM sono disponibili diversi modelli e componenti per la creazione di newsletter per le campagne. Potete usare questi modelli e componenti per creare newsletter personalizzate.

Modelli

Per offrire una base solida e ampliare le possibilità di flusso dei contenuti, sono disponibili tre tipi di modelli leggermente diversi. Potete facilmente utilizzarli per creare una newsletter personalizzata.
Tutti hanno un' intestazione , un piè di pagina e una sezione corpo . Sotto la sezione body, ogni modello è diverso nella struttura delle colonne (1, 2 o 3 colonne).

Componenti

Al momento sono disponibili sette componenti da utilizzare nei modelli delle campagne. Tutti questi componenti sono basati sul linguaggio di marcatura Adobe HTL .
Nome componente
Percorso componente
Intestazione
/libs/mcm/campaign/components/heading
Immagine
/libs/mcm/campaign/components/image
Testo e personalizzazione
/libs/mcm/campaign/components/personalization
Textimage
/libs/mcm/campaign/components/textimage
Collegamento
/libs/mcm/campaign/components/reference
Modello immagini Scene7
/libs/mcm/campaign/s7image
Riferimento mirato
/libs/mcm/campaign/components/reference
Questi componenti sono ottimizzati per il contenuto della posta; in altre parole, aderiscono alle best practice illustrate nel presente documento. L'utilizzo di altri componenti forniti di solito viola tali regole.
Questi componenti sono descritti dettagliatamente nei componenti di Adobe Campaign.