Sur cette page : découvrez comment concevoir le contenu de votre e-mail dans le Concepteur d’e-mail, les étapes clés pour le créer à partir de zéro, de code ou de HTML importé, ainsi que les bonnes pratiques qui assurent un bon rendu de vos e-mails pour vos différents clientes et clients.
Pour accéder au Concepteur d’e-mail et commencer à concevoir le contenu de votre e-mail, vous devez d’abord créer un e-mail dans un parcours ou une campagne.
Vous pouvez ensuite utiliser les fonctionnalités de conception d’e-mail de Journey Optimizer pour importer du contenu existant ou commencer à créer des e-mails réactifs à partir de zéro. En savoir plus
Le Concepteur d’e-mail vous permet également d’effectuer les opérations suivantes :
-
Utiliser Adobe Experience Manager Assets Essentials pour enrichir vos e-mails, créer et gérer votre propre base de données de ressources. En savoir plus
-
Rechercher des photos Adobe Stock pour créer votre contenu et améliorer votre conception d’e-mail. En savoir plus
-
Améliorez l’expérience des clients en créant des messages dynamiques personnalisés en fonction de leurs attributs de profil. En savoir plus sur Personnalisation et Contenu dynamique.
➡️ Découvrez cette fonctionnalité en vidéo.
Étapes clés de création de contenu d’e-mail key-steps
Une fois que vous avez créé un e-mail, vous pouvez commencer à créer son contenu.
-
Dans l’écran de configuration des parcours ou des campagnes, parcourez l’écran Modifier le contenu pour accéder au concepteur d’e-mail. En savoir plus
-
Dans la page d’accueil du concepteur d’e-mail, choisissez la manière de concevoir votre e-mail à l’aide des options suivantes :
-
Concevez votre e-mail à partir de zéro dans lʼinterface du concepteur d’e-mail et utilisez les images provenant dʼAdobe Experience Manager Assets. Découvrez comment concevoir le contenu des e-mails dans cette section.
-
Codez ou collez du code HTML brut directement dans le concepteur d’e-mail. Découvrez comment coder votre propre contenu dans cette section.
note NOTE Dans une campagne, vous pouvez également sélectionner le bouton Éditeur de code à partir de l’écran Modifier le contenu écran. En savoir plus -
Importez du contenu HTML existant à partir d’un fichier ou d’un dossier .zip. Découvrez comment importer un contenu d’e-mail dans cette section.
-
Convertissez des conceptions d’image en modèles HTML à l’aide du convertisseur d’images en HTML optimisé par l’IA. Découvrez comment transformer des images statiques en modèles d’e-mail modifiables dans cette section.
-
Sélectionnez un contenu existant à partir d’une liste de modèles intégrés ou personnalisés. Découvrez comment utiliser des modèles d’e-mail dans cette section.
-
-
Une fois le contenu de votre e-mail défini et personnalisé, vous pouvez le vérifier à l’aide des vérifications de contenu automatisées pour détecter les problèmes HTML et CSS (tels que des balises non prises en charge, des balises div vides et des violations de limite de taille) directement dans le panneau de création, avant l’envoi. En savoir plus
note NOTE Lors de la conception des e-mails, le système vérifie les paramètres essentiels et affiche des alertes liées aux avertissements (recommandations et bonnes pratiques) et aux erreurs (problèmes empêchant les tests ou l’activation). En savoir plus sur les alertes des e-mails 
-
Vous pouvez également valider la qualité de votre contenu pour identifier les problèmes potentiels de lisibilité, de cohésion du contenu et d’efficacité. En savoir plus sur la validation de la qualité du contenu
-
Vous pouvez ensuite exporter votre contenu pour le valider ou l’utiliser ultérieurement. Cliquez sur Exporter le HTML pour enregistrer sur votre ordinateur un fichier zip qui contiendra votre HTML et vos ressources.
Bonnes pratiques en matière de conception d’e-mail best-practices
Lors de l’envoi d’e-mails, il est important de tenir compte du fait que les destinataires peuvent les transférer, ce qui peut parfois entraîner des problèmes de rendu de l’e-mail. Vous risquez de rencontrer ces problèmes si vous utilisez des classes CSS non prises en charge par le fournisseur de messagerie utilisé pour le transfert, comme « is-desktop-hidden », par exemple, pour masquer une image sur les appareils mobiles.
Pour minimiser ces problèmes de rendu, nous vous recommandons de garder votre structure de conception d’e-mail aussi simple que possible. Essayez d’utiliser une conception unique qui fonctionne aussi bien pour les ordinateurs de bureau et les appareils mobiles, et évitez d’utiliser des classes CSS complexes ou d’autres éléments de conception qui ne sont pas entièrement pris en charge par tous les clients de messagerie.
En suivant ces bonnes pratiques, vous aurez l’assurance que vos e-mails sont correctement rendus, quelle que soit la manière dont ils sont affichés ou transférés par les destinataires.
Consultez le tableau ci-dessous pour connaître les bonnes pratiques en matière de conception d’e-mail :
- Mises en page statiques, basées sur des tableaux pour la structure
- Tableaux HTML et tableaux imbriqués pour la cohérence de la mise en page
- Largeurs des modèles comprises entre 600 px et 800 px
- CSS simples et intégrées pour le style
- Polices compatibles web pour une conformité universelle
- Les images d’arrière-plan peuvent ne pas apparaître sur certaines plateformes de messagerie.
- Les polices web personnalisées ne profitent pas d’une prise en charge universelle.
- Les mises en page larges peuvent mal s’afficher sur de petits écrans.
- Les zones cliquables offrent des fonctionnalités limitées.
- Les CSS incorporées sont parfois supprimées lors de la diffusion des e-mails.
- Le code JavaScript n’est généralement pas pris en charge dans les environnements de messagerie.
- Les balises
<iframe>sont bloquées sur la plupart des plateformes. - Les éléments Flash sont obsolètes et ne sont plus pris en charge.
- Les fichiers audio intégrés provoquent souvent un blocage.
- Les vidéos intégrées sont incompatibles avec de nombreuses plateformes de messagerie.
- Les formulaires ne fonctionnent pas dans les e-mails.
- La superposition
<div>peut entraîner des problèmes de rendu.
Mécanismes de sécurisation et limites spécifiques email-guardrails
Même des e-mails bien structurés peuvent présenter un rendu différent en fonction du client ou de l’environnement dans lequel ils sont ouverts. Les sections ci-dessous décrivent les limites connues et les comportements spécifiques au client à garder à l’esprit lors de la conception de vos e-mails.
Limites des navigateurs web mobiles mobile-web-limitations
Le rendu des e-mails peut différer lorsque les destinataires ouvrent Gmail ou Outlook via un navigateur web mobile (par exemple, Chrome sur un téléphone), plutôt que dans une application mobile native ou un client de bureau. Il s’agit d’une limite connue des environnements de messagerie web mobile qui ne concerne pas que Journey Optimizer.
Cette différence de rendu résulte du comportement des clients de messagerie web dans un navigateur mobile. Le navigateur affiche d’abord l’interface d’utilisation complète de la messagerie web de bureau, en plaçant l’e-mail à deux niveaux d’imbrication, hors de portée de toute requête CSS ou média réactive. La version web de Gmail supprime en outre les blocs de <style> CSS et encapsule le contenu de l’e-mail dans ses propres <div>, ce qui peut remplacer vos styles et créer des conflits d’alignement.
Les problèmes suivants peuvent survenir : un décalage de l’alignement du texte (texte aligné à gauche apparaissant centré), des lignes de séparation blanches supplémentaires entre les sections de contenu et une mise en page globale différente de la conception du modèle.
Ces problèmes se produisent uniquement dans les versions web de Gmail et Outlook sur un navigateur mobile. Les applications mobiles natives Outlook et Gmail, ainsi que tous les clients de bureau, ne sont pas concernés.
-
Utilisez des dispositions simples basées sur des tableaux avec un CSS entièrement intégré.
-
Évitez de vous fier aux requêtes de média ou aux blocs de
<style>pour les principales propriétés de disposition telles que l’alignement du texte.
Éléments à prendre en compte avec le rendu dans Outlook outlook-tips
Outlook présente des particularités de rendu qui peuvent affecter la disposition des e-mails si vous ne les prenez pas en compte lors de la conception. Pour vous assurer que vos e-mails s’affichent correctement dans Outlook, suivez les bonnes pratiques suivantes :
- Utilisez des nombres pairs pour les marges internes, les tailles de police et les largeurs. Outlook convertit les pixels en points en interne, ce qui peut introduire un espacement inégal et des lignes blanches indésirables lorsque des valeurs impaires sont utilisées.
- Définissez les largeurs du tableau en pixels, et non en pourcentages. Les largeurs basées sur un pourcentage peuvent altérer la disposition dans Outlook. Appliquez les valeurs de largeur directement dans l’attribut de style de chaque tableau.
- Définissez toujours les largeurs d’image à l’aide de l’attribut
width. En l’absence d’attribut HTML, Outlook ignore les propriétéswidthetheightCSS sur les images et revient aux dimensions natives du fichier. - Ajoutez un texte secondaire à toutes les images. Cela évite les problèmes d’affichage et de sécurité lorsque les images sont bloquées.
- Appliquez des bordures aux cellules du tableau, et non au tableau lui-même. Si le rendu d’une bordure ne s’effectue pas comme prévu, déplacez-la du
<table>vers<td>. - Évitez les coins arrondis. La propriété CSS
border-radiusn’est pas prise en charge de manière fiable dans Outlook : utilisez les coins carrés pour plus de sécurité.
Pour plus d’informations sur la conception du mode sombre, notamment sur l’utilisation des requêtes de média et des techniques de remplacement d’images spécifiques à Outlook.com, consultez cette page.
Vidéos pratiques video
Découvrez comment créer du contenu d’e-mail avec l’éditeur de messages.
Découvrez comment configurer des expériences de contenu pour un test AB et explorer le contenu d’e-mail qui répond le mieux aux objectifs de votre entreprise.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to design email content in the Email Designer — building from scratch, code, or imported HTML — verify it with automated content checks and content quality validation, export it, and follow rendering best practices and client-specific limitations.
Intents:
- Choose how to design an email: from scratch, code/paste raw HTML, import existing HTML, convert image designs to HTML, or select an existing content template
- Verify email content with automated content checks before sending
- Validate content quality for readability, cohesiveness, and effectiveness
- Export email content as a zip file containing HTML and assets
- Apply email design best practices to keep emails rendering well across clients
- Account for mobile web browser and Outlook rendering limitations
Glossary:
- Email Designer: The Journey Optimizer interface used to import content or build responsive emails from scratch, code, or imported HTML (product-specific)
- Automated content checks: A check that catches HTML and CSS issues — such as unsupported tags, empty divs, and size limit violations — directly in the authoring panel, before sending (product-specific)
- Content quality validation: A validation that identifies potential issues with readability, content cohesiveness, and effectiveness (product-specific)
- Image to HTML converter: An AI-powered converter that transforms static image designs into editable email templates (product-specific)
- Export HTML: An action that saves a zip file to your computer including your HTML and assets (product-specific)
Guardrails:
- Recommended template widths are between 600px and 800px (recommended).
- Recommended practices: static, table-based layouts; HTML tables and nested tables; simple, inline CSS; web-safe fonts.
- Use with care (may not render everywhere): background images, custom web fonts, wide layouts, image maps, and embedded CSS (embedded CSS is sometimes removed during email delivery).
- Not recommended (generally unsupported in email): JavaScript,
<iframe>tags, Flash, embedded audio, embedded video, forms, and<div>layering. - Alerts distinguish warnings (recommendations and best practices) from errors (blocking issues that prevent testing or activation).
- Mobile web rendering differences occur only in Gmail Web and Outlook Web when accessed via a mobile browser; Gmail/Outlook native mobile apps and all desktop clients are not affected.
- Outlook rendering: use even numbers for padding, font sizes, and widths; set table widths in pixels not percentages; set image widths using the
widthattribute; include Alt text on all images; apply borders to<td>not<table>; avoidborder-radius(rounded corners).
Terminology:
- Canonical name: Email Designer — Acronym: n/a — variants: message editor, email design capabilities
- Synonyms: “automated content checks” = “content check”
- Do not confuse: “automated content checks” (HTML/CSS issue detection) ≠ “content quality validation” (readability, cohesiveness, effectiveness)
- Do not confuse: “warnings” (recommendations and best practices) ≠ “errors” (blocking issues that prevent testing or activation)
FAQ:
- Q: What options are available for designing an email? — Design from scratch, code or paste raw HTML, import existing HTML from a file or .zip, convert image designs to HTML templates, or select an existing built-in or custom template.
- Q: How can I catch HTML and CSS issues before sending? — Use automated content checks, which flag unsupported tags, empty divs, and size limit violations in the authoring panel.
- Q: What template width is recommended? — Between 600px and 800px.
- Q: Why does my email look different in Gmail or Outlook on a phone browser? — This is a known limitation of Gmail Web and Outlook Web via a mobile browser; use simple table-based layouts with fully inlined CSS and avoid relying on media queries or
<style>blocks for critical layout. - Q: How do I export my content? — Click Export HTML to save a zip file containing your HTML and assets to your computer.