Meilleures pratiques des modèles de courrier électronique

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

Tout le contenu d’une campagne doit être créé sous une master page 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
REMARQUE

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

Composant de 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.

Ajouter DOCTYPE au début (HTML ou XHTML)

Est configurable en modifiant la conception 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>

Est défini 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.

Les emails devraient avoir l’air bien, 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)

<div> Les balises ne sont utilisées qu’en mode création pour garantir une modification correcte des composants.

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

Toutes les tables contiennent les attributs nécessaires, tels que border, cellpadding, cellspacing et width.

Pour harmoniser le positionnement des éléments dans les tableaux, toutes les cellules du tableau comportent l’attribut valign="top" en cours de définition.

Tenez 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 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.
Le code CSS intégré est préférable à l’insertion de toutes les feuilles 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 <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.

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. Dans la mesure où les styles CSS sont utilisés pour illustrer la conception de démonstration, les recommandations CSS sont observées.
La largeur maximale des emails doit être comprise entre 600 et 800 pixels. Ils auront ainsi un meilleur comportement dans le panneau d’aperçu de la plupart des clients. Le width de la table de contenu est limitée à 600 px dans la conception de démonstration.

Images

/libs/mcm/campaign/components/image

Bonne pratique Mise en œuvre
Ajouter alt Attributs aux images Le alt a été défini comme obligatoire pour le composant d’image.
Utilisation jpg au lieu de png format des images Les images seront toujours diffusées en tant que JPG par le composant d’image.
Utilisation <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" sur les images. Permet d’obtenir un affichage correct dans Gmail. Toutes les images contiennent par défaut la valeur style="bloc d’affichage" attribut.

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

Bonne pratique Mise en œuvre
Utilisez du code html 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 que Arial, Verdana, Géorgie 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 revient à la police sans-serif générique, si elle n’est pas présente.

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 a été validé. Pour la documentation transitoire XHTML, seul l’attribut xmlns manquant pour la propriété <html> élément est manquant.
Ne vous embêtez pas avec JavaScript ou Flash : ces technologies ne sont généralement pas 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 en plusieurs parties. Un nouveau widget a été intégré aux propriétés de la page pour extraire facilement une version en texte brut du contenu de la 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 ont une header, un pied de page et un corps . Sous la section de corps, chaque modèle diffère en conception de colonne (1, 2 ou 3 colonnes).

chlimage_1-318

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 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
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.

Sur cette page