Bonnes pratiques relatives aux modèles d’e-mail
Créé pour :
- Administration
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.
master
de type cq/personalization/components/ambitpage
./content/campaigns/teasers/en/campaign-promotion-global
master
/content/campaigns/teasers/master/en/campaign-promotion-global
Composant du modèle/de la page
/libs/mcm/campaign/components/campaign_newsletterpage
Spécifiez le type de document afin d’assurer 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 afin d’assurer le 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.
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.
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.
Images
/libs/mcm/campaign/components/image
<img>
au lieu des images d’arrière-plan dans un tableau.Texte et liens
/libs/mcm/campaign/components/heading, /libs/mcm/campaign/components/textimage
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
<html>
est manquant.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è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).
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.
Ces composants sont décrits en détail dans la section Composants d’Adobe Campaign.