Adobe Summit is here.

Experience keynotes, Sneaks, sessions, and more — all on demand.

Watch now
DocumentationAEM 6.4Guide d’administration

Bonnes pratiques relatives aux modèles d’e-mail

Dernière mise à jour : 4 mai 2023
  • Rubriques :
  • Administering

Créé pour :

  • Admin
CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

Ce document décrit certaines des bonnes pratiques concernant la conception d’emails, ce qui se traduit par un modèle de campagne email 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 oeuvre 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 vous planifiez une structure de campagne, procédez comme suit :
  • /content/campaigns/teasers/en/campaign-promotion-global
Assurez-vous qu’il réside sous un gabarit :
  • /content/campaigns/teasers/master/en/campaign-promotion-global
NOTE
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 Modèle/page

/libs/mcm/campaign/components/campaign_newsletterpage

Bonne pratique
Mise en œuvre

Spécifiez le type de document pour garantir un rendu cohérent.

Ajoutez DOCTYPE au début (HTML ou XHTML).

Configurable en modifiant la conception de 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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Peut être remplacé par « HTML_5 » :

<!DOCTYPE HTML>

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

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

Définie sur UTF-8.

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

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 les 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 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’insertion 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.
La largeur des tableaux de contenu est limitée à 600 pixels dans le design de démonstration.

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 seront 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. Permet d’obtenir un affichage correct dans Gmail.
Toutes les images contiennent par défaut l’attribut style="display block".

Texte et liens

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

Bonne pratique
Mise en œuvre
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 seront rendus sous la forme de balises.
Utilisez des polices de base interplateformes, 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 sera remplacée par une police sans-serif générique si elle est absente.

Générique

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, seul l’attribut xmlns manquant pour l’élément <html> est manquant.
Ne vous préoccupez pas de JavaScript ou de Flash. Il est rare que ces technologies soient prises en charge par les clients de messagerie.
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 Campaign

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 les utiliser 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 diffère en termes de conception des colonnes (1, 2 ou 3 colonnes).

chlimage_1-318

Composants

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

Nom du composant
Chemin du composant
En-tête
/libs/mcm/campaign/components/heading
Image
/libs/mcm/campaign/components/image
Texte et personnalisation
/libs/mcm/campaign/components/personalization
Textimage
/libs/mcm/campaign/components/textimage
Lien
/libs/mcm/campaign/components/reference
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.

Ces composants sont décrits en détail à la section Composants Adobe Campaign.

recommendation-more-help
5ce3024a-cbea-458b-8b2f-f9b8dda516e8