Questo documento descrive alcune delle best practice relative alla progettazione delle e-mail, che si traducono in un modello di campagna e-mail ben sviluppato.
La campagna dimostrativa disponibile nell’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
Tutto il contenuto della campagna deve essere creato in un master pagina di tipo cq/personalization/components/ambitpage.
Ad esempio, se la struttura pianificata per la campagna è simile a
Quando crei un modello di posta per Adobe Campaign, devi includere la proprietà acMapping con il valore mapRecipient nel jcr:content del modello. In caso contrario, non è possibile selezionare il modello Adobe Campaign in Proprietà pagina di Experience Manager (il campo è disabilitato).
Codifica tutta la struttura utilizzando <table>elemento. Per i layout più complessi, è consigliabile 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 in uso un massimo di quattro tabelle nidificate (1 tabella di base + max. 3 livelli di nidificazione)
<div> I tag vengono utilizzati solo in modalità di authoring per garantire la modifica corretta dei componenti.
Utilizzare gli attributi degli elementi (come cellpadding, valign e width) per impostare le dimensioni della tabella. Questo metodo forza una struttura a box-model.
Tutte le tabelle contengono attributi necessari come bordo, cellpadding, cellspacing, e larghezza.
Per armonizzare il posizionamento degli elementi all'interno delle tabelle, tutte le celle delle tabelle hanno l'attributo valign="top" in fase di impostazione.
Conto per la cordialità mobile, se possibile. Utilizza le query multimediali per aumentare le dimensioni del testo su schermi di piccole dimensioni e fornire aree di hit di dimensioni ridotte per i collegamenti.
Se la progettazione lo consente, rendi dinamico un’e-mail.
Per quanto riguarda l’utilizzo degli stili CSS per illustrare la progettazione demo, le query multimediali vengono utilizzate per offrire una versione mobile.
CSS in linea è meglio che inserire tutti i CSS all’inizio.
Per dimostrare meglio la struttura di base dei HTML e facilitare la possibilità di personalizzare la struttura delle 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 sono allineate nel HTML. È pianificato un meccanismo di allineamento automatico, ma al momento non disponibile.
Semplifica il tuo CSS. Evita dichiarazioni di stile composte, codice abbreviato, proprietà di layout CSS, selettori complessi e pseudo-elementi.
Per quanto riguarda l’utilizzo degli stili CSS per illustrare la progettazione demo, vengono seguiti i consigli CSS.
La larghezza massima delle e-mail deve essere 600-800 pixel. Questo ridimensionamento li rende più efficaci all’interno delle dimensioni del riquadro di anteprima fornite da molti client.
Il larghezza della tabella dei contenuti è limitato a 600 pixel nella progettazione demo.
Immagini images
/libs/mcm/campaign/components/image
Best practice
Implementazione
Aggiungi Alt attributi per le immagini
Il Alt L’attributo è stato definito come obbligatorio per il componente immagine.
Utilizzare jpg invece di png formato per le immagini
Le immagini vengono sempre utilizzate come JPG dal componente immagine.
Utilizzare <img> anziché immagini di sfondo in una tabella.
Nei modelli non vengono utilizzati dati immagine di sfondo.
Aggiungi attributo style="display block" sulle immagini. In questo modo possono essere ben visualizzati su Gmail.
Per impostazione predefinita, tutte le immagini contengono style="display block" attributo.
Utilizza html invece dello stile in CSS (font-family)
RichTextEditor (ad esempio, nel componente textimage) ora supporta la scelta e l’applicazione di famiglie e dimensioni di font ai testi selezionati. Vengono visualizzati come tag.
Utilizza font di base multipiattaforma, ad esempio Arial®, Verdana, Georgia, e Times New Roman®.
Dipende dalla progettazione delle newsletter.
Per la progettazione demo viene utilizzato il font "Helvetica®", ma se non presente, viene utilizzato un font sans-serif generico.
Generico generic
Best practice
Implementazione
Utilizza la convalida W3C per correggere il codice HTML. Assicurati che tutti i tag aperti siano chiusi correttamente.
Il codice è stato convalidato. Solo per il Doctype transitorio XHTML, attributo xmlns mancante per <html> elemento mancante.
Evita di utilizzare JavaScript o Flash: queste tecnologie spesso non sono supportate dai client e-mail.
JavaScript o Flash non viene utilizzato nel modello di newsletter.
Aggiungi una versione in testo normale per l’invio in più parti.
Un nuovo widget è stato incorporato nelle proprietà della pagina per estrarre facilmente una versione di testo normale dal contenuto della pagina. È possibile utilizzarlo come punto di partenza per la versione finale del testo normale.
Modelli ed esempi di newsletter di Campaign campaign-newsletter-templates-and-examples
L’AEM viene fornito con diversi modelli e componenti pronti all’uso per la creazione di newsletter di 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 predefiniti leggermente diversi. Puoi utilizzare facilmente questi tre tipi per creare una newsletter personalizzata.
Tutti hanno un intestazione, a footer, e un corpo sezione. Sotto la sezione del corpo, ogni modello differisce in progettazione colonna (una, due o tre colonne).
Modello immagine Dynamic Media Classic (precedentemente Scene7)
/libs/mcm/campaign/s7image
Riferimento di destinazione
/libs/mcm/campaign/components/reference
NOTE
Questi componenti sono ottimizzati per il contenuto della posta, ovvero sono conformi alle best practice descritte in questo documento. L’utilizzo di altri componenti pronti all’uso in genere viola queste regole.
