Ce document décrit certaines des bonnes pratiques concernant la conception d’e-mails, ce qui se traduit par un modèle de campagne par e-mail bien développé.
La campagne de démonstration disponible dans AEM observe toutes ces meilleures pratiques. La manière dont les bonnes pratiques sont mises en œuvre dans la campagne de démonstration est décrite pour chaque bonne pratique.
Utilisez ces bonnes pratiques lors de la création de votre propre newsletter.
NOTE
Tout le contenu d’une campagne doit être créé sous une page master de type cq/personalization/components/ambitpage.
Par exemple, si la structure de campagne planifiée ressemble à
Lors de la création d’un modèle d’e-mail pour Adobe Campaign, vous devez inclure la propriété acMapping avec la valeur mapRecipient dans le nœud jcr:content du modèle. Sinon, vous ne pouvez pas sélectionner le modèle Adobe Campaign dans Propriétés de la page d’Experience Manager (le champ est désactivé).
Composant du modèle/de la page template-page-component
Codez toute la structure à l’aide de la fonction <table>élément. Pour des mises en page plus compliquées, vous devez imbriquer les tableaux pour créer des structures complexes.
L’e-mail doit présenter un aspect correct, même sans CSS.
Les tableaux sont utilisés dans tout le modèle pour structurer le contenu. Actuellement, il est possible d’utiliser un maximum de quatre tableaux imbriqués (1 tableau de base + max. 3 niveaux d’imbrication).
Les balises <div> ne sont utilisées qu’en mode création pour garantir la modification correcte des composants.
Utilisez des attributs d’élément (par exemple, cellpadding, valign et width) pour définir les dimensions de table. Vous forcez ainsi une structure boîte-modèle.
Toutes les tables contiennent les attributs nécessaires, tels que border, cellpadding, cellspacing et width.
Pour que le positionnement des éléments dans les tableaux soit harmonisé, toutes les cellules des tableaux doive avoir l’attribut valign="top" défini.
Prenez en compte, si possible, de la convivialité des appareils mobiles. Utilisez les requêtes multimédias pour augmenter la taille du texte sur les petits écrans et fournir des zones actives de la taille d’une vignette pour les liens.
Rendez un e-mail interactif si la conception l’autorise.
Même si les styles CSS sont utilisés pour illustrer le design de démonstration, les requêtes multimédias sont utilisées pour proposer une version conviviale pour les appareils mobiles.
Les styles CSS intégrés sont un meilleur choix que l’insertion de tous les styles CSS au début.
Pour mieux mettre en évidence la structure HTML sous-jacente et faciliter la possibilité de personnaliser la structure de newsletter, seules certaines définitions CSS ont été intégrées.
Les styles de base et les variations de modèle ont été extraits dans un bloc de style dans l’élément <head> de la page. À l’envoi final de la newsletter, ces définitions CSS doivent être intégrées dans la structure HTML. Un mécanisme d’intégration automatique est prévu, mais actuellement pas disponible.
Restez simple avec votre CSS. Évitez les déclarations de style composées, les formes courtes de code, les propriétés de mise en page CSS, les sélecteurs complexes et les pseudo-éléments.
Même si les styles CSS sont utilisés pour illustrer le design de démonstration, les recommandations CSS sont observées.
Les e-mails doivent présenter une largeur maximale de 600 à 800 pixels. Ils auront ainsi un meilleur comportement dans le volet d’aperçu de la plupart des clients et clientes.
La largeur des tableaux de contenu est limitée à 600 pixels dans le design de démonstration.
Images images
/libs/mcm/campaign/components/image
Bonne pratique
Mise en œuvre
Ajoutez des attributs alt aux images.
L’attribut alt a été défini comme obligatoire pour le composant d’image.
Utilisez le format jpg au lieu du format png pour les images.
Les images sont toujours diffusées en tant que JPG par le composant d’image.
Utilisez l’élément <img> au lieu des images d’arrière-plan dans un tableau.
Aucune donnée d’image d’arrière-plan n’est utilisée dans les modèles.
Ajoutez l’attribut style="bloc d’affichage" dans les images. Cela leur permet de bien s’afficher sur Gmail.
Toutes les images contiennent par défaut l’attribut style="display block".
Utilisez du code html <font> plutôt que du style dans CSS (famille de polices).
L’éditeur de texte enrichi (par exemple, dans le composant textimage) prend désormais en charge le choix et l’application de familles de polices et de tailles de police aux textes sélectionnés. Ils sont rendus en tant que balises <font>.
Utilisez des polices de base sur plusieurs plateformes, telles qu’Arial, Verdana, Georgia et Times New Roman®.
Dépend de la conception de la newsletter.
Le design de démonstration utilise la police « Helvetica® », mais celle-ci est remplacée par une police sans-serif générique si elle est absente.
Générique generic
Bonne pratique
Mise en œuvre
Utilisez le validateur W3C pour corriger le code du HTML. Assurez-vous que toutes les balises ouvertes sont correctement fermées.
Le code doit être validé. Pour le composant Doctype de transition XHTML seulement, l’attribut xmlns manquant pour l’élément <html> est manquant.
Évitez d’utiliser JavaScript ou Flash, car ces technologies ne sont souvent pas prises en charge par les clients de messagerie.
JavaScript et Flash ne sont pas utilisés dans le modèle de newsletter.
Ajoutez une version en texte brut pour l’envoi multipartie.
Un nouveau widget a été intégré aux propriétés de page pour extraire facilement une version en texte brut à partir du contenu de page. Vous pouvez l’utiliser comme point de départ pour la version en texte brut finale.
Modèles et exemples de newsletter Campaign campaign-newsletter-templates-and-examples
AEM est fourni avec des modèles et des composants clé en main vous permettant de créer des newsletters de campagne. Vous pouvez utiliser ces modèles et composants pour créer vos newsletters personnalisées.
Modèles templates
Pour offrir une base solide et élargir la variété de possibilités de flux de contenu, trois types de modèles légèrement différents prêts à l’emploi sont disponibles. Vous pouvez facilement utiliser ces trois types pour créer une newsletter personnalisée.
Tous comportent une section en-tête, bas de page et corps. Dans le corps, chaque modèle a une conception des colonnes différente (une, deux ou trois colonnes).
Modèle d’image Dynamic Media Classic (anciennement Scene7)
/libs/mcm/campaign/s7image
Référence ciblée
/libs/mcm/campaign/components/reference
NOTE
Ces composants sont optimisés pour le contenu de courrier électronique. En d’autres termes, ils respectent les meilleures pratiques décrites dans ce document. L’utilisation d’autres composants prêts à l’emploi enfreint généralement ces règles.
