Email Ready : e-mail HTML depuis Figma ou une image

Transformer un design en e-mail HTML est plus difficile que d'en faire une page web, car une boîte de réception n'est pas un navigateur. Email Ready est le mode de sortie de MarkupGen conçu pour ce travail, et il propose deux voies : générer le code HTML de l'e-mail à partir de votre design Figma, ou créer l'e-mail à partir d'une image en découpant le design et en y ajoutant des liens cliquables. Cet article explique les deux, quand utiliser chacune, et tout ce que l'outil prend en charge pour vous.

Ce qu'est Email Ready

Chaque projet MarkupGen a un format de sortie. Responsive HTML sert aux sites web et aux landing pages. Email Ready (« Prêt pour l'e-mail » dans l'interface en français) sert aux newsletters et aux e-mails marketing : au lieu de flexbox et de grid, il produit du HTML en tableaux avec CSS en ligne, le format que Gmail, Outlook et Apple Mail savent afficher.

Vous le choisissez dans les réglages de mise en page du projet, vous générez, et le résultat est un document e-mail complet et non une page web.

Voie 1 : générer du code HTML prêt pour l'e-mail

C'est la voie par défaut, et la bonne dès que l'e-mail contient surtout du texte, des boutons et des images simples.

• Mise en page en tableaux avec CSS en ligne. Pas de flexbox, pas de grid, pas de feuille de style externe qu'un client de messagerie pourrait supprimer.
• Du vrai texte. Les titres et les paragraphes restent du texte : sélectionnables, lus par les lecteurs d'écran et visibles même quand les images sont bloquées.
• Les effets non pris en charge sont convertis en images. Les parties du design sans équivalent sûr en e-mail sont rastérisées au lieu d'être perdues ou cassées.
• Un document XHTML 1.0 Transitional valide. Le doctype, l'espace de noms et les attributs sont normalisés à l'export, car c'est la déclaration qu'Outlook, Gmail et Apple Mail gèrent le plus régulièrement.
• Modifiable sur place. Changez les textes et remplacez les images dans l'éditeur avant d'exporter.
• Un indicateur de poids. La carte Export e-mail affiche le poids actuel du HTML face à la limite, pour voir le problème avant vos abonnés.

Le problème des 102 Ko : pourquoi Gmail tronque les e-mails

Gmail tronque tout message dont le HTML dépasse environ 102 Ko. Le destinataire voit le début de l'e-mail et un lien « Afficher l'intégralité du message » ; ce qui se trouvait sous la coupure, souvent l'appel à l'action et le lien de désabonnement, est masqué.

Un design riche avec de nombreuses sections peut dépasser cette limite sous forme de code. MarkupGen vous avertit à 100 Ko — dans le panneau de mise en page puis dans la fenêtre d'envoi de test — et propose la seconde voie.

Voie 2 : créer l'e-mail à partir d'une image

Créer l'e-mail à partir d'une image adopte l'approche inverse. Au lieu de décrire le design en code, l'outil utilise l'image du design elle-même, la découpe en tranches et les réassemble dans un tableau léger. Le HTML ne contient que le tableau et les références d'images ; il pèse donc généralement quelques Ko, quelle que soit la complexité du design.

Fonctionnement :

1. Partez d'une image. L'image de design du projet est chargée automatiquement, ou importez-en une autre : un artboard Figma, une bannière, une affiche.
2. Tracez les zones cliquables. Faites glisser sur l'image pour dessiner un cadre sur chaque bouton, bannière ou produit. Déplacez-le, redimensionnez-le depuis n'importe quel bord ou coin, décalez-le de 1 px avec les flèches ou saisissez des coordonnées exactes.
3. Ajoutez un lien et un texte alternatif. Chaque zone reçoit un lien (http(s)://, mailto: ou tel:), un nom et un texte alternatif.
4. Définissez la largeur de l'e-mail. 600 px par défaut ; modifiez-la si votre gabarit l'exige.
5. Générez. MarkupGen découpe l'image et construit le tableau.
6. Prévisualisez, testez et exportez. Vérifiez les aperçus bureau et mobile (375 px), envoyez un e-mail test, puis appliquez le code au projet ou emportez-le ailleurs.

Ce que l'outil gère pendant ce processus :

• Des coupes uniquement là où il faut. L'image est coupée le long du haut et du bas de chaque zone. Les tranches voisines sans lien sont fusionnées : moins d'images, moins de requêtes.
• Des lignes de coupe visibles. Des repères jaunes montrent exactement où tomberont les coupes, pour les placer sur un fond vide plutôt qu'au milieu d'une ligne de texte.
• Un réassemblage au pixel près. Les positions de coupe sont alignées sur des pixels entiers à la taille d'affichage ; les tranches reconstituent l'image d'origine sans interstice ni colonne décalée.
• Des tranches sans perte, déjà hébergées. Les tranches sont enregistrées en PNG et envoyées pour vous avec des URL absolues : vous n'hébergez rien. Une image 2x reste nette car elle est affichée à la largeur de l'e-mail, sans être réduite.
• Un balisage propre à Outlook. Largeurs fixes, commentaires conditionnels pour le moteur d'Outlook basé sur Word et réinitialisations qui évitent les espaces parasites entre les tranches.
• Uniquement des liens sûrs. Tout ce qui n'est pas http(s), mailto ou tel est refusé, et une zone sans lien valide est ignorée avec un avertissement plutôt que de livrer un lien cassé.
• Les zones sont enregistrées avec le projet. Rouvrez l'outil plus tard pour corriger un lien ou déplacer une zone sans tout redessiner.
• Des limites confortables. Jusqu'à 200 zones de lien et 400 tranches par e-mail, pour des images jusqu'à 4000 px de large.

Laquelle utiliser ?

Une règle pratique : commencez par le code généré. Passez à la méthode image quand l'indicateur de poids dépasse la limite, ou quand le design repose sur des polices et des effets que les clients de messagerie ne savent pas reproduire.

Tout ce que vous pouvez faire du résultat

Les deux voies aboutissent au même endroit :

• Envoyer un e-mail test vers une vraie boîte de réception, directement depuis l'éditeur. L'envoi est bloqué s'il reste un texte ou une image non attribué dans le design.
• Prévisualiser sur bureau et mobile avant l'envoi.
• Copier le code, télécharger le fichier .html ou partager un lien vers une copie hébergée de l'e-mail.
• Appliquer au projet et enregistrer, pour que l'e-mail vive avec le reste du projet.
• Travailler dans votre langue : l'interface est disponible en 10 langues.

Pour aller plus loin sur les tests, consultez comment générer et tester l'envoi de HTML pour l'email marketing.

Les compromis, dits clairement

Un e-mail basé sur une image a un coût. Son texte ne peut être ni sélectionné, ni copié, ni recherché. Si un client bloque les images par défaut, le destinataire ne voit que le texte alternatif tant qu'il ne les autorise pas ; c'est pourquoi l'outil demande un texte alternatif pour chaque zone. La mise en page est à largeur fixe : sur petit écran, elle se réduit au lieu de se réorganiser ; vérifiez l'aperçu mobile. Et un aperçu dans le navigateur n'est jamais une preuve : ouvrez toujours l'e-mail test dans les clients qu'utilise votre audience.

FAQ

Pourquoi Gmail tronque-t-il mon e-mail ? Gmail tronque les messages dont le HTML dépasse environ 102 Ko et masque le reste derrière un lien « Afficher l'intégralité du message ». MarkupGen affiche le poids actuel et vous avertit à 100 Ko.

Puis-je transformer une image en e-mail HTML avec des liens cliquables ? Oui. Créer l'e-mail à partir d'une image découpe l'image, enveloppe chaque zone tracée dans son propre lien et reconstruit l'image sous forme de tableau que les clients de messagerie affichent de façon fiable.

Dois-je héberger les images moi-même ? Non. Les tranches sont envoyées automatiquement et référencées par des URL absolues ; l'e-mail fonctionne dès l'envoi.

Un e-mail basé sur une image fonctionnera-t-il dans Outlook ? Le résultat utilise une mise en page en tableaux, des largeurs fixes et un balisage conditionnel propre à Outlook. Envoyez tout de même un test vers une boîte Outlook avant une campagne.

Puis-je modifier les liens après la génération ? Oui. Les zones sont enregistrées avec le projet : rouvrez l'outil, changez un lien ou déplacez une zone, puis générez à nouveau.

Est-ce que cela ne fonctionne qu'avec des designs Figma ? La voie du code généré part d'un design Figma. La voie image accepte aussi toute image importée dans un projet Email Ready.

Si une campagne e-mail attend dans Figma — ou dans une simple image —, vous pouvez commencer gratuitement et obtenir du HTML prêt pour la boîte de réception en quelques minutes. Les équipes marketing trouveront le flux complet dans MarkupGen pour les équipes marketing.