AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.
Questo documento descrive alcune delle best practice relative alla progettazione delle e-mail con conseguente modello di campagna e-mail ben sviluppato.
La campagna demo disponibile in AEM segue tutte queste best practice. Per ogni best practice, viene descritto come implementare le best practice nella campagna demo.
Utilizza queste best practice per creare una newsletter personalizzata.
NOTE
Tutti i contenuti della campagna devono essere creati in un master pagina di tipo cq/personalization/components/ambitpage. Ad esempio, se stai pianificando una struttura di campagna si presenta come:
Quando crei un modello di posta per Adobe Campaign, devi includere la proprietà acMapping con il valore mapRecipient in jcr:content nodo del modello, oppure non potrai selezionare il modello Adobe Campaign in Proprietà pagina di AEM (campo disabilitato).
Codifica tutta la struttura utilizzando <table>elemento. Per i layout più complessi, è necessario nidificare le tabelle per creare strutture complesse.
L’e-mail dovrebbe avere un bell’aspetto anche senza css.
Le tabelle vengono utilizzate in tutto il modello per strutturare il contenuto. Attualmente utilizza un massimo di quattro tabelle nidificate (1 tabella base + max. 3 livelli di nidificazione)
<div> I tag vengono utilizzati solo in modalità di authoring per garantire la corretta modifica dei componenti.
Per impostare le dimensioni della tabella, utilizza gli attributi degli elementi (ad esempio spaziatura interna, valori e larghezza). In questo modo si forza una struttura basata su un modello a scatola.
Tutte le tabelle contengono attributi necessari come border, spaziatura interna, spaziatura e larghezza.
Per armonizzare il posizionamento degli elementi all’interno delle tabelle, tutte le celle della tabella hanno l’attributo valign="top" impostato.
Tenete conto, se possibile, della facilità di utilizzo dei dispositivi mobili. Utilizza le query multimediali per aumentare le dimensioni del testo su schermi di piccole dimensioni, fornire aree hit di dimensioni pollici per i collegamenti.
Rendi l’e-mail reattiva se la progettazione lo consente.
Per quanto riguarda gli stili CSS utilizzati per illustrare la progettazione demo, le query multimediali vengono utilizzate per offrire una versione semplice per dispositivi mobili.
I CSS in linea sono migliori 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 nel <head> della pagina. Al momento dell’invio finale della newsletter, queste definizioni CSS devono essere inserite in HTML. È previsto un meccanismo di inlinizzazione automatica, ma al momento non disponibile.
Mantieni il tuo CSS semplice. Evita dichiarazioni di stile composte, codice abbreviato, proprietà di layout CSS, selettori complessi e pseudo-elementi.
Per quanto riguarda gli stili CSS utilizzati per illustrare la progettazione demo, i consigli CSS vengono seguiti.
Le e-mail devono avere una larghezza massima di 600-800 pixel. In questo modo, si comportano meglio con le dimensioni del riquadro di anteprima fornite da molti client.
La larghezza della tabella dei contenuti è limitata a 600 px nella progettazione demo.
Immagini images
/libs/mcm/campaign/components/image
Best practice
Implementazione
Aggiungi alt attributi delle immagini
La alt è stato definito come obbligatorio per il componente immagine.
Utilizzo jpg anziché png formato per le immagini
Il componente Immagine fungerà sempre da JPG per le immagini.
Utilizzo <img> anziché immagini di sfondo in una tabella.
Nei modelli non vengono utilizzati dati immagine di sfondo.
Aggiungi attribute style="display block" sulle immagini. Permette di visualizzare bene su Gmail.
Tutte le immagini contengono per impostazione predefinita il style="display block" attributo.
Utilizza l’html invece dello stile in CSS (font-family)
L'editor RichText (ad esempio nel componente di testo) ora supporta la scelta e l'applicazione delle famiglie di font e delle dimensioni dei font ai testi selezionati. Saranno resi come tag.
Utilizza font di base multipiattaforma come Arial, Verdana, Georgia e Times New Roman.
Dipende dalla progettazione della newsletter.
Per la progettazione demo viene utilizzato il carattere "Helvetica", ma se non presente, torna al carattere generico sans-serif.
Generico generic
Best practice
Implementazione
Utilizza la convalida W3C per correggere il codice HTML. Assicurati che tutti i tag aperti siano chiusi correttamente.
Codice convalidato. Per XHTML Transition Doctype solo l'attributo xmlns mancante per <html> elemento mancante.
Non preoccuparti di JavaScript o Flash: le tecnologie non sono in gran parte supportate dai client e-mail.
Né JavaScript né Flash vengono utilizzati nel modello di newsletter.
Aggiungi una versione di testo normale per l’invio in più parti.
Un nuovo widget è stato creato nelle proprietà della pagina per estrarre facilmente una versione di testo normale dal contenuto della pagina. Può essere utilizzato come punto di partenza per la versione normale finale.
Modelli ed esempi per newsletter di Campaign campaign-newsletter-templates-and-examples
AEM include diversi modelli e componenti pronti all’uso per la creazione di newsletter per le campagne. È possibile utilizzare questi modelli e componenti per creare newsletter personalizzate.
Modelli templates
Per offrire una base solida e ampliare la varietà di possibilità di flusso dei contenuti, sono disponibili tre tipi di modelli leggermente diversi. Puoi utilizzarli facilmente per creare una newsletter personalizzata.
Tutti hanno un header, piè di pagina e corpo sezione . Sotto la sezione corpo, ogni modello differisce in struttura a colonne (1, 2 o 3 colonne).
Modello immagini Dynamic Media Classic (precedentemente Scene7)
/libs/mcm/campaign/s7image
Riferimento mirato
/libs/mcm/campaign/components/reference
NOTE
Questi componenti sono ottimizzati per il contenuto della posta; in altre parole, aderiscono alle best practice descritte nel presente documento. L’utilizzo di altri componenti predefiniti in genere viola queste regole.
