Vous consultez actuellement l'aide de la version:

Ce document décrit certaines des meilleures pratiques concernant la conception de courrier électronique, qui aboutissent à la création d’un modèle de campagne par courrier électronique bien développé.

La campagne de démonstration disponible dans AEM observe toutes ces meilleures pratiques. La manière dont les meilleures pratiques sont mises en œuvre dans la campagne de démonstration est décrite pour chaque bonne pratique.

Utilisez ces meilleures pratiques pour créer votre propre newsletter.

Remarque :

Lors de la création d’un modèle de courrier pour Adobe Campaign, vous devez inclure la propriété acMapping avec la valeur mapRecipient dans le nœud jcr:content du modèle ou vous ne pourrez pas sélectionner le modèle Adobe Campaign dans Propriétés de la page au sein d’AEM (le champ est désactivé).

Composant de modèle/page

/libs/mcm/campaign/components/campaign_newsletterpage

Meilleurepratique Mise en œuvre

Spécifiez le type de document pour assurer un rendu homogène.

Ajoutez DOCTYPE au début (HTML ou XHTML)

Est configurable en changeant la propriété cq:doctype dans"/etc/designs/default/jcr:content/campaign_newsletterpage"

La valeur par défaut est "XHTML":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Peut être redéfini sur "HTML_5":

<!DOCTYPE HTML>

Spécifiez la définition de caractère pour assurer un rendu correct des caractères spéciaux.

Ajoutez la déclaration CHARSET (par exemple, iso-8859-15, UTF-8) à l’élément <head>

Est défini sur UTF-8.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Codez toute la structure avec l’élément <table>. Pour des mises en page plus compliquées, vous devez imbriquer les tableaux pour créer des structures complexes.

Le courrier électronique doit sembler 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 + 3 niveaux d’imbrication max)

Les balises<div> sont uniquement utilisées en mode création pour assurer une édition du contenu correcte.

Utilisez des attributs d’élément (par exemple, cellpadding, valign et width) pour définir les dimensions de table. Ceci force une structure boîte-modèle.

Tous les tableaux contiennent les attributs nécessaires, comme  bordercellpaddingcellspacing et width.

Pour que le positionnement des éléments dans les tableaux soit harmonisé, toutes les cellules des tableaux comportent l’attribut valign="top" défini.

Tenez compte si possible de la compatibilité avec l’affichage sur les 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 courrier électronique interactif si la conception l’autorise.

Dans la mesure où les styles CSS sont utilisés pour illustrer la conception de démonstration, les requêtes multimédias le sont 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 démontrer la structure HTML sous-jacente et utiliser 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 n’est actuellement pas disponible.

Faites en sorte de garder des styles CSS simples. É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. Dans la mesure où les styles CSS sont utilisés pour illustrer la conception de démonstration, les recommandations CSS sont observées.
Les courriers électroniques doivent présenter une largeur maximale de 600 à 800 pixels. Ils auront ainsi un meilleur comportement dans le panneau d’aperçu de la plupart des clients. La largeur des tableaux de contenu est limitée à 600 pixels dans la conception de démonstration.

Images

/libs/mcm/campaign/components/image

Meilleure 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 seront toujours traitées dans le format JPG par le composant de l’image.
Utilisez l’élément <img> au lieu des images d’arrière-plan dans une table. Aucune donnée d’image d’arrière-plan n’est utilisée dans les modèles.
Ajoutez le style d’attribut="bloc d’affichage" sur les images. Permet d’obtenir un affichage correct dans Gmail. Toutes les images contiennent par défaut l’attribut style="bloc d’affichage" .

Texte et liens

/libs/mcm/campaign/components/heading, /libs/mcm/campaign/components/textimage

Meilleures pratiques Mise en œuvre
Utilisez html <font> au lieu du style dans CSS (famille de polices) Le composant RichTextEditor (par exemple, dans le composant textimage) prend à présent en charge le choix de familles et de tailles de polices et leur application à des textes sélectionnés. Elles seront rendues en tant que balises <font> .
Utilisez des polices de base, utilisables sur toutes les plateformes, comme  Arial, Verdana, Georgia et Times New Roman.

Dépend de la conception de la newsletter.

Pour la conception de démonstration, la police "Helvetica" est utilisée, mais sera remplacée par une police sans-serif générique si elle est absente.

Générique

Meilleure pratique Mise en œuvre
Utilisez le validateur W3C pour corriger le code HTML. Assurez-vous que toutes les balises ouvertes sont correctement fermées. Le code doit être validé. Pour le composant Doctype de transition XHTML, seul l’attribut xmlns manquant pour l’élément <html> est manquant.
Ne vous préoccupez pas de JavaScript ou Flash. Il est rare que ces technologies soient prises en charge par les clients de courrier électronique. Ni JavaScript ni Flash ne sont 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. Ceci peut être utilisé comme point de départ pour la version en texte brut finale.

Modèles et exemples de newsletter de campagne

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

Pour offrir une base solide et élargir la variété de possibilités de flux de contenu, trois types de modèle légèrement différents sont disponibles clé en main. Vous pouvez facilement utiliser ces modèles pour créer une newsletter personnalisée. 

Tous comportent une section en-têtebas de page et corps. Dans le corps, chaque modèle diffère dans la conception des colonnes (1, 2 ou 3 colonnes).

chlimage_1

Composants

Sept composants sont actuellement disponibles dans les modèles de campagne. Tous ces composants sont basés sur le langage de balisage HTL d’Adobe.

Nom du composant Chemin d’accès au composant
En-tête /libs/mcm/campaign/components/heading
Image /libs/mcm/campaign/components/image
Personnalisation&de texte /libs/mcm/campaign/components/personalization
Image de texte /libs/mcm/campaign/components/textimage
Lien /libs/mcm/campaign/components/reference
Modèle d’image Scene7 /libs/mcm/campaign/s7image
Référence ciblée /libs/mcm/campaign/components/reference

Remarque :

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 clé en main va généralement à l’encontre de ces règles.

Ces composants sont décrits en détail dans Composants Adobe Campaign.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne