Comment créer un email HTML professionnel et responsive ?

Apprenez à créer un email au format HTML pour renforcer votre image de marque et améliorer les performances de vos campagnes marketing.

Dossier rédigé par Mathieu Jaulin

Réussir votre campagne email passe par l’utilisation d’un bon mail builder. Mais à quoi sert vraiment un éditeur d’email ? Et surtout quel est le meilleur Aujourd’hui, créer un email au format HTML est indispensable pour fidéliser vos clients et en attirer de nouveaux. De plus, une campagne email, si elle est correctement réalisée, vous aide à vous distinguer de vos concurrents. Pour réussir votre emailing, vous devez concevoir un design efficace au format html. Mais qu’est-ce que le code html ? Il s’agit d’un langage informatique qui est utilisé pour créer et afficher des pages internet, et donc également des emails.

Voici le sommaire de notre dossier :

Présentation du code html
Guide pour faire un email en html
Les avantages
Les inconvénients
Exporter et importer un email
L’importance du responsive

C’est quoi le html ?

La définition

Pour commencer ce dossier, il me semble important de vous présenter le html en vous en donnant une définition complète. Le code HTML est un langage qui est utilisé pour créer et pour afficher des pages web. Il se traduit par hypertexte markup language. Pour résumer, le langage html est un ensemble de mots et de caractères qui vous permet d’organiser tout votre contenu comme vous le souhaitez au sein d’une page. Ensuite, ce langage est lu par le navigateur web de vos internautes et affiche donc votre newsletter, telle que vous l’avez conçue.

Organiser du contenu

Le langage HTML est très intéressant pour afficher un email et une page internet. Vous vous en doutez, ce langage vous permet d‘intégrer une grande variété de contenu pour une page :

Des images aux dimensions personnalisées (pensez bien à spécifier le texte alternatif),
Du texte,
Des titres,
Des vidéos, que vous pouvez héberger soit sur des sites spécialisés comme Youtube ou Vimeo, ou bien directement sur votre site internet,
Des boutons,
Etc.

Email HTML : Comment faire ? Les étapes

Pour réussir la création de votre email au format HTML, voici les étapes que nous vous conseillons de suivre :

Choisir un bon logiciel email, par exemple Brevo qui propose une version gratuite vous permettant d’envoyer jusqu’à 300 emails par jour,
Décider votre méthode de création en html : préférez-vous créer un message en utilisant un template ou bien en concevant votre design de A à Z ? Pour aller plus loin à ce sujet, lisez notre dossier Emailing : Quels sont les meilleurs templates ?
Ensuite, vous devez personnaliser votre email en y intégrant votre contenu si vous utilisez un template. Mais si vous avez choisi de créer votre message en partant d’une page blanche, vous devez alors créer entièrement votre structure d’e-mail puis venir y déposer vos blocs de contenu ( texte, images, vidéo, call to action, titre, etc.).
Maintenant, vous devez vous assurer que votre message est parfaitement compatible avec toutes les tailles d’écran possibles. En d’autres termes, assurez-vous que le contenu de votre newsletter peut s’adapter sur ordinateur, sur tablette et également sur smartphone.
Avant de diffuser votre message, nous vous conseillons de vérifier le rendu de votre design en réalisant des tests. Pour faire simple, envoyez votre email sur des adresses utilisant plusieurs clients de messagerie différents afin de vous rendre compte du résultat final. Concrètement, utilisez plusieurs services de messagerie différents comme Gmail, Outlook et Orange.

Quels sont les avantages d’une newsletter en html ?

Une compatibilité avec tous les navigateurs

Le principal avantage d’un email qui a été codé dans HTML est qu’il va être parfaitement lisible par tous les navigateurs Internet. Ainsi, que vos lecteurs utilisent Google Chrome, Mozilla Firefox ou bien Microsoft Edge, vous pouvez être certain que votre message sera parfaitement affiché dans son intégralité.

Une personnalisation du contenu

Le second point fort est que le code HTML est facilement intégrable dans un éditeur d’e-mail tel que Brevo. En effet, seuls quelques clics suffisent pour copier puis coller vos lignes de code dans votre builder d’email, autrement dit votre éditeur html. Une fois le code html inséré, votre message s’affiche correctement, c’est magique ! Ensuite, il ne vous reste plus qu’à personnaliser le contenu au sein du mail : modifier vos textes et vos images.

Email html : quels sont les inconvénients ?

Difficile de changer la structure d’email

Le principal inconvénient d’un email html est qu’il est très difficile de modifier la structure de votre page. Effectivement, vous souhaitez ajouter une colonne ou bien juste ajouter une ligne en plein milieu de votre message ? Et bien accrochez-vous, surtout si vous n’avez aucune connaissance en programmation. Ce genre de manipulation se réalise très facilement si vous utilisez un Builder mais elle se complique sérieusement lorsque vous êtes face à vos lignes de code. Selon nous, la meilleure solution pour faire face à ces difficultés est de modifier votre modèle d’e-mail directement dans votre éditeur, puis de refaire un copier coller de toutes vos lignes de code. En revanche, modifier vos textes ainsi que vos visuels se fait très facilement, et rapidement.

Email statique

Le second inconvénient que nous avons relevé concerne le langage HTML est qu’il génère des pages statiques, et non pas dynamiques. En d’autres termes, oubliez par exemple tous les effets d’animation que vous avez l’habitude de voir sur une page web comme :

Un bouton qui change de couleur au survol,
Une image qui s’agrandit ou bien qui rétrécit lorsqu’un internaute la survole,
Un lien dont le texte change de couleur lorsque quelqu’un clique dessus,
Un visuel qui fait son apparition au bout quelques secondes sur votre page,
Etc.

En html, tout votre contenu est statique. Cette contrainte n’est pas selon nous gravissime, néanmoins elle limite fortement la personnalisation et l’apparence de vos emails. Vous pouvez également créer un email en texte brut, sans aucune mise en page. Dans ce cas, vous ne pouvez faire appel à aucune feuille de style css.

Comment intégrer une campagne en html ?

Pour intégrer votre campagne, il existe deux cas de figure différents :

Vous voulez exporter votre message, ce qui signifie que votre design est terminée,
Vous désirez importer votre mailing, pour pouvoir débuter votre mise en page.

Dans tous les cas, tout dépend du logiciel emailing que vous utilisez. Dans cet exemple concret, nous vous montrons comment faire en utilisant la solution Brevo, qui se distingue de ses concurrents de par ses performances et son accessibilité .

Exporter votre email

Si vous avez terminé la conception de votre email, et que vous avez besoin d’exporter votre code html, il vous suffit de :

Vous rendre dans votre éditeur de message,
Une fois votre design ouvert, cliquez sur le bouton contenant trois petits points, situé juste à gauche du bouton « Modifier le design »,
Puis, cliquez sur « Voir le code html »,
Enfin, sélectionnez toutes les lignes de code qui s’affichent dans la bulle, et faites tout simplement un clic droit suivi de Copier.

Voici comment exporter le code html de votre newsletter avec Brevo.

Importer votre email

Si vous avez besoin d’importer un email codé en html, par exemple si vous avez récupéré un template trouvé sur un site autre que celui de votre logiciel mail, alors il vous suffit de :

Vous rendre dans la partie « conception » de votre campagne,
Cliquer sur le dernier bouton « Coder votre template »,
Sélectionner non pas l’éditeur simple, mais l’éditeur html,
Coller les lignes de code préalablement copiées,
Cliquer sur le bouton « Enregistrer et quitter », en haut à droite.

Pensez au format responsive

Après avoir terminé la conception de votre newsletter, il est important pour vous de penser au format responsive. Pour résumer, le responsive design est une conception qui permet à votre contenu, en l’occurrence votre email, de s’adapter en fonction de la taille de l’écran de votre internaute. Ainsi, si votre message est consulté sur smartphone, ordinateur ou bien tablette, votre contenu s’organise selon les dimensions voulues à condition d’avoir une bonne prise en charge de la page web. Ce conseil s’applique autant à la version en texte brut qu’à la version html.

Pour aller plus loin, découvrez notre guide Emailing : Comment utiliser un template ?

Email html : FAQ

Comment faire un email html ?

Pour créer un message en html, vous devez tout simplement commencer par choisir le bon logiciel mail. Ensuite, concevez votre design en insérant vos blocs de contenu pour aboutir à votre message final. Ensuite, vous pouvez exporter et importer votre code html en quelques clics.

Comment envoyer un email html ?

Pour envoyer un mailing html, vous devez avoir terminé votre conception. Ensuite, programmez la diffusion de votre campagne html. Ici, vous pouvez soit envoyer votre campagne de suite, ou bien programmer une diffusion dans le futur, en choisissant une date et une heure d’envoi.

Comment évaluer une newsletter html ?

Pour évaluer vos performances, nous vous conseillons de mesurer plusieurs KPI, notamment le taux d’ouverture.

Email html : notre conclusion

Pour finir ce guide, voici les informations essentielles à retenir :

Le code html est un langage informatique qui sert à créer et aussi à afficher des pages web et des emails. Il permet de gérer une grande variété de contenus : textes, images, vidéos, boutons, etc.
Voici les étapes pour créer votre message : choisir un bon logiciel, utiliser (ou non) un modèle, personnaliser votre design html, vérifier les versions pour tablette et téléphone, et enfin faire des tests.
Le principal avantage de ce langage est qu’il est compatible avec tous les navigateurs modernes, et garantit donc un excellent affichage.
Le défaut du html est qu’il est très difficile de modifier la structure de votre message.
Enfin, pensez à la version mobile de votre email, primordiale pour un grand nombre d’utilisateurs.