À la fin de ce guide, vous saurez ouvrir la séquence d’une campagne, activer l’option Vue du code, ajouter du HTML personnalisé à une étape email et appliquer les bonnes pratiques HTML pour obtenir un affichage homogène dans les différents clients de messagerie.

Les templates de lemlist prennent en charge le HTML : vous maîtrisez ainsi entièrement l’apparence et les fonctionnalités de vos emails. Le HTML personnalisé vous permet de :

Avant d’ajouter du HTML :

Dans la barre latérale gauche, cliquez sur Campagnes, puis sélectionnez la campagne à modifier dans la liste.

Dans la Séquence de votre campagne, cliquez sur l’étape email à modifier, puis sur Vue du code dans la barre d’outils de l’éditeur d’emails.

Après avoir ouvert Vue du code, collez ou saisissez votre code HTML directement dans l’éditeur de code.

Dans lemlist, les balises HTML vous permettent de conserver la mise en forme du contenu de vos variables personnalisées. Par exemple, utilisez <br> pour les sauts de ligne et <p> pour les paragraphes. Enregistrez tout le contenu de vos variables avec les balises HTML adaptées pour que la mise en forme s’affiche correctement dans les emails. Pour éviter les mauvaises surprises, utilisez aussi l’option « Clean Code » de lemlist pour supprimer les styles indésirables et les caractères invisibles. C’est particulièrement utile pour le contenu importé via des API ou des outils externes.

Structurez votre email avec des balises HTML <table> pour obtenir un affichage homogène dans les différents clients de messagerie (Outlook, Gmail, etc.).

De nombreux clients de messagerie suppriment les balises <style> intégrées à l’email. Utilisez du CSS en ligne pour mettre en forme les éléments.

Exemple :

Pour assurer la compatibilité, privilégiez des polices comme Arial, Times New Roman ou Verdana. Si vous utilisez des polices personnalisées, prévoyez des polices de remplacement.

Ajoutez des éléments qui s’adaptent à la taille de l’écran pour que votre email s’affiche correctement sur tous les appareils.

Exemple :

Optimisez vos images pour accélérer leur chargement. Ajoutez un texte alternatif (ALT) pour l’accessibilité et veillez à ce que les informations essentielles ne figurent pas uniquement dans les images.

Testez votre email HTML dans plusieurs clients de messagerie (Gmail, Outlook, Yahoo, etc.) pour vérifier que l’affichage est homogène.

La plupart des clients de messagerie bloquent le JavaScript et les formulaires pour des raisons de sécurité. Privilégiez un contenu statique et visuellement soigné.

Présentez votre appel à l’action sous forme de bouton avec un lien cliquable.

Exemple :

Si vous débutez en HTML, consultez ces ressources :

👉 w3schools.com

La plupart des problèmes de mise en forme viennent du texte copié depuis des outils comme Google Docs, qui peut contenir du code HTML ou CSS invisible. Utilisez l’option « Clean Code » de lemlist pour corriger ces incohérences.

Le contenu provenant d’outils tiers peut s’afficher sans mise en forme ou en un seul bloc. Structurez le texte importé avec les balises HTML adaptées, comme <p> et <br>, pour garantir un affichage homogène.

Problème : le HTML ne s’affiche pas correctement dans certains clients de messagerie

Solution : utilisez des tableaux pour la mise en page et des styles CSS en ligne. Évitez les propriétés CSS complexes peu prises en charge (comme flexbox ou grid).

Problème : les images ne s’affichent pas

Solution : vérifiez que les URL des images sont accessibles publiquement. Utilisez des URL absolues (par exemple https://example.com/image.png), et non des chemins relatifs.

Problème : le bouton d’appel à l’action ne fonctionne pas

Solution : vérifiez que le lien de l’attribut href est correct. Testez le bouton dans plusieurs clients de messagerie : certains peuvent nécessiter des styles en ligne supplémentaires pour qu’il s’affiche correctement.

Testez vos emails avec soin : envoyez-vous toujours des emails de test et vérifiez leur affichage dans Gmail, Outlook, Apple Mail et les applications de messagerie mobiles avant de lancer votre campagne.

Faites simple : un code HTML complexe augmente le risque de problèmes d’affichage. Privilégiez des tableaux basiques, des styles en ligne et des mises en page simples.

Utilisez du code adapté aux emails : évitez les fonctionnalités CSS modernes (flexbox, grid, transformations) qui ne sont pas prises en charge par les clients de messagerie.

Validez votre code HTML : utilisez un validateur HTML pour repérer les erreurs de syntaxe avant de coller le code dans lemlist. Si vous collez du contenu provenant de sources externes, nettoyez-le d’abord avec la fonction « Clean Code » de lemlist pour éviter les conflits de mise en forme.

Créez des templates : enregistrez les structures HTML que vous utilisez souvent sous forme de templates pour gagner du temps lors de vos prochaines campagnes.

Préparez vos fichiers CSV avec du HTML : si vous importez du contenu sur plusieurs lignes dans des variables personnalisées, ajoutez des balises HTML comme <br> et <p> directement dans les données du fichier CSV pour conserver la mise en forme. Pour les contenus issus d’intégrations tierces ou d’API, utilisez l’option « Clean Code » de lemlist pour supprimer les styles cachés et assurer une mise en forme correcte.