Points clés à retenir

• Le design d’abord, le code ensuite. Créez votre email visuellement dans Canva, peaufinez-le jusqu’à obtenir exactement le rendu souhaité, puis laissez Canva générer le code HTML à votre place. Vous n’avez jamais besoin d’écrire une seule ligne de code.
• Commencez dans l’éditeur d’emails de Canva, pas sur un canvas vierge. Seuls les designs créés dans l’éditeur d’emails peuvent être exportés en HTML. Choisissez un modèle d’email gratuit ou payant, puis personnalisez le texte, les images, le logo et les couleurs.
• Laissez de côté le pied de page de Canva. Benchmark Email ajoute automatiquement un pied de page conforme à chaque envoi, avec les informations de votre entreprise, votre adresse postale ainsi que les liens de désinscription et de signalement d’abus. Supprimez le pied de page de votre modèle Canva pour éviter d’en avoir deux.
• Copiez, collez, prévisualisez. Dans Canva, allez dans Partager > Copier le code HTML. Dans Benchmark Email, choisissez le bloc HTML personnalisé, partez de zéro et collez le code. Votre design s’affiche instantanément et vous pouvez vérifier l’affichage mobile avant l’envoi.
• Personnalisez votre email avant de l’envoyer. Remplacez une salutation générique par un champ de personnalisation avec le prénom, accompagné d’une valeur par défaut. Enregistrez ensuite l’email comme modèle : votre prochaine campagne ne vous prendra qu’une fraction du temps.

 

La plupart des gens envisagent le design d’email dans un seul sens : commencer par le code ou un modèle, puis ajouter le contenu. Mais si vous avez un esprit visuel, il existe une meilleure approche qui inverse cet ordre.

Commencez par concevoir l’email comme vous concevriez n’importe quel autre visuel, dans Canva, où vous voyez exactement ce que vous créez. Peaufinez-le jusqu’à ce qu’il soit parfait : la mise en page, les couleurs, la typographie, les espacements. Confiez ensuite ce design finalisé à une IA dotée de capacités de vision, et laissez-la écrire le code HTML qui correspond à ce que vous avez déjà créé.

Le résultat : un email HTML entièrement fonctionnel, prêt pour la boîte de réception, construit à partir d’un visuel que vous avez réellement validé au préalable. Pas de code écrit à l’aveugle. Pas de boucle « prévisualiser et ajuster » qui prend plus de temps que le design lui-même. Vous le voyez, il vous plaît, puis il devient du code.

Pourquoi la rétro-ingénierie fonctionne

Le processus traditionnel de design d’email place le code entre le travail créatif et le résultat final. Vous esquissez une idée, ouvrez un modèle ou un éditeur de code, puis essayez de faire correspondre le code à votre idée. Cela fonctionne, mais de manière indirecte. Vous passez votre temps à traduire le visuel que vous avez imaginé en balisage que vous écrivez.

La rétro-ingénierie supprime cette étape de traduction. Vous concevez dans l’environnement visuel qui vous semble naturel, vous l’exportez, puis vous demandez à une IA de le traduire. L’IA a vu ce que vous voulez. Elle ne devine pas à partir d’une description textuelle : elle travaille à partir du design finalisé lui-même.

Ce workflow est particulièrement utile pour :

• Les marketers qui conçoivent avec aisance dans Canva mais n’écrivent pas de HTML
• Les équipes où la même personne gère le design et la production des emails
• Les campagnes aux mises en page originales qui ne correspondent pas aux modèles standards
• Toute personne souhaitant aligner le design de ses emails sur les ressources de marque existantes sans partir d’une structure de code

Étape 1 : ouvrez l’éditeur d’emails de Canva

Si vous n’avez pas encore de compte Canva, vous pouvez en créer un gratuitement. Une fois dans Canva, ouvrez le concepteur d’emails au lieu de commencer un design sur une page vierge. C’est important : seuls les designs créés dans le concepteur d’emails peuvent être exportés en HTML, un canvas vierge classique ne vous donnera donc pas l’option de copier-coller dont vous aurez besoin plus tard.

Étape 2 : choisissez un modèle et personnalisez-le

Le concepteur d’emails de Canva propose des modèles gratuits et payants. Choisissez-en un adapté à votre campagne, puis personnalisez-le : modifiez le texte, remplacez les images, ajoutez votre logo et appliquez les couleurs de votre marque.

Quelques bonnes habitudes pour que votre design reste adapté à l’email :

• Gardez le texte dans des zones de texte. Le texte intégré à une image ou à un graphique groupé est exporté comme une image plate : vos abonnés ne peuvent pas le sélectionner et les lecteurs d’écran ne peuvent pas le lire.
• Utilisez des polices compatibles avec l’email. Canva vous avertit si une police ne s’affichera pas correctement dans les boîtes de réception.
• Utilisez de vrais textes et de vrais liens. Ajoutez votre titre, votre corps de texte et les liens de vos boutons définitifs avant l’export.

Étape 3 : supprimez le pied de page Canva

De nombreux modèles d’email Canva comprennent une section de pied de page. N’hésitez pas à la supprimer. Benchmark Email ajoute automatiquement un pied de page conforme à chaque envoi, avec le nom de votre entreprise, votre adresse postale ainsi que les liens de désabonnement et de signalement d’abus exigés pour respecter la réglementation. Si vous conserviez le pied de page de Canva, vous vous retrouveriez avec deux pieds de page.

Étape 4 : copiez le code HTML

Une fois votre design prêt :

1. Sélectionnez Partager dans l’éditeur Canva.
2. Sélectionnez Copier le HTML.
3. Une fois le code généré par Canva, sélectionnez Copier dans le presse-papiers.

Canva vous permet également d’envoyer votre design directement via Gmail. Cela convient pour quelques destinataires, mais si vous envoyez un email à plus d’une dizaine de contacts, passer par une plateforme d’email marketing comme Benchmark vous permet de garder vos données de contacts organisées. Vous bénéficiez aussi de fonctionnalités de conformité et de suivi.

Étape 5 : collez le code HTML dans Benchmark Email

Vous n’avez pas encore de compte Benchmark ? Vous pouvez vous inscrire gratuitement.

1. Depuis votre tableau de bord Benchmark, créez un nouvel email.
2. Choisissez l’option HTML personnalisé (bloc).
3. Ouvrez l’éditeur d’email HTML, choisissez Partir de zéro, puis collez votre code HTML Canva.

Votre design s’affiche immédiatement. Passez à l’aperçu mobile pour vérifier qu’il s’adapte bien aux petits écrans. Vous verrez également le pied de page de Benchmark ajouté en bas.

 

Étape 6 : ajoutez de la personnalisation (facultatif, mais ça vaut le coup)

Les modèles Canva utilisent souvent une salutation générique comme « Bonjour l’amateur de café ». Vous pouvez la transformer en salutation personnalisée dans Benchmark :

1. Repérez le texte de salutation dans le HTML. Utilisez Ctrl+F (Cmd+F sur Mac) pour le trouver rapidement.
2. Supprimez le texte codé en dur.
3. Cliquez sur Personnaliser et choisissez le champ prénom de votre contact.
4. Définissez une valeur par défaut, comme le texte d’origine « l’amateur de café », afin que les contacts dont le prénom n’est pas enregistré voient tout de même une salutation complète.

Désormais, votre email affiche « Bonjour Sarah, » pour la plupart des abonnés, et jamais de champ vide.

Étape 7 : configurez votre envoi

Enregistrez votre email et cliquez sur Suivant. Ensuite :

1. Ajoutez votre objet d’email et votre texte de prévisualisation.
2. Confirmez votre nom d’expéditeur et votre adresse d’expédition.
3. Sélectionnez votre liste de contacts.
4. Envoyez-vous un email de test et vérifiez-le dans Gmail, Outlook et sur votre téléphone.
5. Envoyez.

Une fois qu’il fonctionne, enregistrez-le comme modèle dans Benchmark Email pour que votre prochaine campagne parte de la même mise en page aux couleurs de votre marque.

Quand revenir à Canva et quand rester dans l’IA

Une fois que vous travaillez sur le HTML, les petits ajustements structurels sont plus rapides dans la conversation avec l’IA. Ajustements d’espacement, corrections de couleurs, changements de taille de police : décrivez-les dans le chat et récupérez le code mis à jour.

Les changements visuels importants, comme repenser la mise en page, ajouter un nouveau concept de section ou modifier l’orientation générale du design, sont plus rapides à réaliser dans Canva. Mettez à jour le design, faites une nouvelle capture d’écran et relancez l’IA avec un nouveau prompt. Elle peut soit générer un nouveau modèle, soit comparer la nouvelle capture d’écran au HTML existant et décrire ce qui doit changer.

Les deux outils se complètent. Canva gère le design visuel. L’IA gère le code. Benchmark Email gère l’envoi. Chacun fait son travail.

Questions fréquentes

Questions fréquentes

Ai-je besoin d’un compte Canva payant pour exporter le HTML ?

Non. Vous pouvez créer un compte Canva gratuit et utiliser l’éditeur d’emails, qui comprend des modèles gratuits et payants. L’essentiel est de commencer dans l’éditeur d’emails plutôt qu’à partir d’un design vierge, car c’est ce qui vous donne accès à l’option « Copier le HTML ».

Pourquoi mon email s’affiche-t-il comme une seule grande image ?

Tout ce qui est enregistré dans une image, comme du texte placé sur un bandeau graphique ou des éléments regroupés en un seul design, est exporté sous forme d’image plate au lieu de HTML dynamique. Cela peut nuire à la lisibilité, à l’accessibilité et à l’affichage de votre email dans certaines boîtes de réception. Pour l’éviter, construisez votre design avec les zones de texte, les cadres et les blocs de mise en page de Canva, et gardez le texte important en dehors des images.

Mes polices seront-elles conservées ?

Seules les polices compatibles avec les emails sont conservées. Les polices personnalisées ou les polices d’affichage de votre marque peuvent être remplacées par une police de secours dans les boîtes de réception de vos abonnés. Canva signale les polices non prises en charge : surveillez donc ces avertissements pendant que vous concevez votre design. Envoyez-vous toujours un email de test pour voir comment vos polices s’affichent réellement.

Dois-je ajouter un lien de désinscription ou un pied de page ?

Non. Benchmark Email ajoute automatiquement un pied de page conforme à chaque email, avec le nom de votre entreprise, votre adresse postale et les liens de désinscription et de signalement d’abus. Supprimez le pied de page fourni avec votre modèle Canva pour ne pas vous retrouver avec deux pieds de page.

Est-ce différent de l’article sur le workflow Canva que vous avez publié précédemment ?

Les deux approches sont liées, mais différentes. L’article précédent utilise des visuels Canva et l’IA pour construire du HTML autour de ceux-ci à partir d’un prompt textuel. Ce workflow ne nécessite aucune IA : l’éditeur d’emails de Canva génère le HTML pour vous, et vous le collez directement dans Benchmark Email. C’est l’option la plus simple si vous souhaitez concevoir visuellement et vous passer complètement du code.

Et si mon email s’affiche mal dans Outlook ou sur mobile ?

Prévisualisez votre email dans la vue mobile de Benchmark, puis envoyez un test et ouvrez-le dans Gmail, dans Outlook et sur votre téléphone. Vous pouvez apporter de petites corrections, comme des fautes de frappe ou des liens, directement dans l’éditeur HTML de Benchmark. Pour les modifications de mise en page ou de design, il est généralement plus simple de mettre à jour le design dans Canva, de copier à nouveau le HTML et de le recoller dans Benchmark.

Puis-je enregistrer le design pour mes prochaines campagnes ?

Oui. Une fois que votre email vous convient, enregistrez-le comme modèle dans Benchmark Email. Pour vos prochaines campagnes, chargez le modèle et mettez à jour le contenu (titre, corps du texte, images et liens) sans reconstruire la mise en page.