Comment créer un email en HTML ?

Comme pour les pages d’un site internet, l’architecture de base d’un email est fournie par le langage HTML, sur lequel viennent se greffer d’autres codes, comme le CSS. Il est en revanche plus compliqué de développer son propre modèle de courriel que de coder une landing page, cela pour plusieurs raisons. Voici quelques conseils utiles qui pourront vous aider.

La difficulté de coder un email HTML

On pourrait penser que coder des courriels au format HTML est plus simple que développer un site internet entier, mais il n’en est rien. Au contraire des navigateurs web qui disposent peu ou prou des mêmes fonctionnalités et capacités d’affichage, les webmails et autres clients de messagerie (Gmail, Microsoft Outlook, Thunderbird…) ne sont pas uniformisés. Chaque boîte de réception interprète les balises HTML et les propriétés CSS à leur façon et parfois ne les lit même pas. Ainsi, vos messages auront beau apparaître sans problème sur votre compte de messagerie, il y a de grandes chances pour que ce ne soit pas le cas sur un autre compte.

La diversité des supports

L’autre problème se présentant à vous de nos jours est la grande diversité des supports de lecture sur lesquels les emails sont lus. Plus de la moitié d’entre eux sont ouverts sur un appareil mobile, qu’il s’agisse d’une tablette ou d’un smartphone. Et, en fonction de la marque ou du modèle, le format de l’écran sera différent. Votre code HTML doit donc pouvoir s’adapter aussi bien à un ordinateur de bureau qu’à un petit téléphone portable, quel que soit le logiciel de messagerie utilisé. C’est ce qu’on appelle le responsive design.

Anticipez les nombreuses contraintes

Afin de parvenir à coder votre email HTML, vous devez donc prendre en compte et anticiper de nombreuses contraintes qui peuvent réduire à néant votre campagne d’email marketing. Voici trois principaux obstacles à franchir.

Ne multipliez pas les colonnes

Pour réduire les problèmes d’affichage sur les supports mobiles, vous devez le plus possible vous limiter à un design à colonne unique pour votre framework, largement suffisant pour la majorité des emails. Cela permettra à la plupart des webmails de les afficher correctement, surtout sur l’écran d’un smartphone. Si vous ne pouvez pas vous limiter à une colonne unique, à l’instar de la plupart des newsletters, essayez tout de même de les réduire au minimum.

L’utilisation d’une colonne unique présente d’autres avantages, parmi lesquels une amélioration du confort de lecture pour vos destinataires. De manière générale, les gabarits d’emails les plus simples sont les meilleurs, autant pour éviter les problèmes de compatibilité que pour attirer l’œil de vos abonnés.

Privilégiez l’usage des tableaux

Pour contourner la problématique de la colonne unique, vous pouvez utiliser une technique considérée comme dépassée pour le développement d’un site internet, mais toujours utile : la structuration de votre code en tableaux indépendants les uns des autres. Vous pourrez ainsi proposer un gabarit plus complexe, en créant plusieurs colonnes de fait, sans qu’elles soient vues comme telles par les messageries électroniques.

Pour que cela fonctionne, vous devrez faire attention à plusieurs choses, comme définir la largeur de votre tableau en pixels (px) et non en pourcentages, ces derniers étant ignorés par les vieux logiciels. Il vous faudra également utiliser l’attribut HTML « align » plutôt que la propriété CSS « float » pour aligner les cellules dans chaque tableau et uniformiser l’alignement de votre gabarit.

L’affichage mobile doit être votre priorité

Nous l’avons vu plus haut, les appareils mobiles sont plus utilisés que les ordinateurs pour la lecture des emails. Vous devez donc prendre cela en compte et prioriser l’affichage mobile, que vous adapterez seulement ensuite si l’affichage desktop n’est pas idéal. Pour ce faire, pensez à limiter la largeur de votre email à 700 pixels, voire 600, et choisissez des polices d’écriture simples, dont vous savez qu’elles sont supportées par toutes les messageries. Cela augmentera la délivrabilité et le taux d’ouverture de la newsletter que vous envoyez à vos clients.

Prêtez attention à vos visuels

La plupart des messageries électroniques n’affichent pas les images provenant d’une adresse de messagerie inconnue. Vous devez donc prêter une attention toute particulière à vos visuels pour que vos emails promotionnels s’affichent sous leur meilleur jour.

Ne multipliez pas les images

Le premier conseil à suivre est de ne pas construire vos emails uniquement avec des images. Vos destinataires recevront alors un courriel entièrement vide et devront autoriser manuellement l’affichage des visuels pour vous lire. Vous courez alors le risque de réduire massivement votre audience. N’utilisez donc les images que lorsqu’elles sont absolument nécessaires.

Les formats et pratiques à éviter

Afin de faciliter l’affichage de vos envois, nous vous conseillons d’éviter au maximum l’utilisation des images d’espacement, ces carrés blancs qui permettent d’aérer le texte. Elles sont bloquées par la plupart des logiciels de messagerie électronique, et détruiront votre design. Il en va de même au moment de créer une signature mail. Il vaut mieux qu’elle soit au format texte, à la fois pour faciliter la mise en forme, mais aussi pour éviter qu’elle se retrouve en pièce jointe sous prétexte qu’il s’agit d’une image.

De la même manière, évitez au maximum le format PNG si vous voulez ajouter une image. Il est plus léger, mais il n’est pas supporté par la plupart des webmails, comme Outlook ou Lotus Notes. Privilégiez le format JPG pour les images en haute définition et le GIF pour les visuels peu colorés et les aplats de couleur. Ils alourdiront vos courriers électroniques, mais vous n’aurez aucun problème de support.

N’oubliez pas le dimensionnement et les balises

Il vous faut également préciser dans le code HTML les dimensions de vos visuels en pixels à l’aide des attributs « width » et « height » que vous insérerez dans chaque balise « img ». Sans cela, les messageries ignoreront votre code et n’en feront qu’à leur tête, impactant le design de votre gabarit.

Enfin, pour contourner le blocage des visuels par certains webmails, vous devez correctement remplir les balises « alt », en décrivant le contenu de vos images. Ainsi, même si elles ne s’affichent pas, vos destinataires pourront quand même comprendre leur sens.

Simplifiez-vous la vie : utilisez la solution Marketing par Email de GoDaddy

Si vous ne voulez pas vous compliquer la vie, ou si vous n’avez aucune notion de HTML ou de CSS, vous pouvez utiliser une solution de création de gabarit d’email tout compris, comme le Marketing par Email de GoDaddy. Cette dernière vous propose un éditeur de mails simple à utiliser, avec un glisser-déposer, pour créer facilement une campagne emailing. Vous avez la garantie qu’il s’affichera sur tous les webmails et qu’il sera en responsive design, conservant votre mise en page. Il vous suffira alors de copier les templates ainsi créés et de les envoyer à votre carnet d’adresses avec votre adresse email professionnelle.

Créer un e-mail en HTML est plus compliqué que développer un site internet en raison du manque d’harmonisation des messageries électroniques. Vous pouvez toutefois contourner les obstacles, tant au niveau du design que des visuels, pour toucher un maximum de prospects. Enfin, si vous voulez gagner du temps, vous pouvez utiliser une solution clé en main.

Lecture complémentaire : Est-il important d’avoir une adresse mail professionnelle quand on crée une entreprise ?