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 una pagina master di tipo cq/personalization/components/ambitpage.
Ad esempio, se la struttura pianificata per la campagna è simile a
Durante la creazione di un modello di posta elettronica per Adobe Campaign, è necessario includere la proprietà acMapping con il valore mapRecipient nel nodo jcr:content del modello. In caso contrario, non è possibile selezionare il modello Adobe Campaign nell'Experience Manager Proprietà pagina (il campo è disabilitato).
Codifica tutta la struttura utilizzando l’elemento <table>. 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)
I tag <div> 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 border, cellpadding, cellspacing e width.
Per armonizzare il posizionamento degli elementi all'interno delle tabelle, tutte le celle di tabella hanno l'attributo valign="top" impostato.
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.
La larghezza della tabella dei contenuti è limitata a 600 pixel nella progettazione demo.
Immagini images
/libs/mcm/campaign/components/image
Best practice
Implementazione
Aggiungi attributi alt alle immagini
L'attributo alt è stato definito come obbligatorio per il componente immagine.
Utilizza il formato jpg invece del formato png per le immagini
Le immagini vengono sempre gestite come JPG-dal componente immagine.
Utilizza l'elemento <img> invece delle 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 l'attributo style="display block".
Utilizza html <font> 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 <font>.
Utilizza font di base multipiattaforma come 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, manca l'attributo xmlns mancante per l'elemento <html>.
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 header, un footer e una sezione body. Sotto la sezione body, ogni modello è diverso nella struttura di colonne (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.
