Chargement…
Emailing En HTML - Les Bonnes Astuces

Emailing En HTML – Les Bonnes Astuces



L’Emailing en HTML reste encore un moyen très efficace de communication pour les éditeurs et les lecteurs. L’Emailing en HTML permet d’ajouter plus de contenu pertinent et susceptible d’intéresser notre cible en ajoutant des illustrations contrairement à l’ancienne méthode qui consistait à envoyer uniquement du texte. Pourtant, pour réaliser un bon Email il faut le mettre en forme, être sûr qu’il s’affichera correctement et qu’il sera lisible par les lecteurs.
Dans cet article, je vais vous montrer plusieurs astuces que vous pourrez utiliser lors de la rédaction de votre Email en HTML et vous signalez quels sont les pièges à éviter.
Le monde d’Emailing ne cesse de croître et de se développer avec des nouveaux systèmes, il existe même des services qui proposent des Email Templates (Graphiques) en HTML et qui permettent aussi de suivre les statistiques tel que le nombre d’emails ouverts, les emails les plus pertinents, le nombre de lecteurs… Cela rend l’Emailing plus intéressant pour les éditeurs et c’est une source de motivation supplémentaire que de réaliser des emails plus séduisant graphiquement.

Plusieurs fournisseurs d’emails gratuits comme Yahoo et Gmail supportent les déclarations CSS et HTML, qui facilitent la tâche aux éditeurs mais il faut quand même avoir des connaissances sur les dernières balises HTML que l’on peut utiliser et qui permettront un affichage correct dans la plupart des boîtes mails gratuite ou payante.

Emailing En HTML

L’emailing en HTML

Afin de créer des Emailing il existe des solutions Offline comme Thunderbird, Outlook, Eudora et autres ou bien des solutions en Ligne comme Gmail, Yahoo et Hotmail mais ce qu’il faut retenir c’est que chaque logiciel affichera votre email de manière différente. C’est l’aspect le plus complexe lorsque l’on utilise le HTML dans les e-mailings même si vous êtes sûr que le HTML est bien affiché dans les paramètres tel que la taille de police, les tableaux, les colonnes pourront s’afficher différemment.
Toutefois, il existe des concepts fondamentaux à ne pas négliger lorsque l’on rédige un E-mailing en HTML :
– Utilisation des tableaux pour contrôler la mise en forme de votre design avec des balises TD et TR, certains d’entre vous qui sont habitués au Pur CSS vont trouver cela décevant parce qu’on revient aux anciennes méthodes mais vous verrez que c’est simple à utiliser.
– L’utilisation de la déclaration Inline pour bien contrôler la police, couleur d’arrière plan…etc.
Pour avoir une idée sur les balises et déclarations, la meilleur solution est de télécharger un kit graphique d’Emailing gratuit, cela vous permettra de découvrir les différents éléments HTML que l’on va utiliser.
– Notre feuille de style CSS doit apparaître en dessous de la balise body est non par un lien entre head et /head.
– Dans le CSS au lieu d’utiliser des déclarations genre font: 12px/16px Verdana, Helvetica vous devez utiliser font-family, line-height, font-size
– Pour les balises Divs et Spans et divs doivent être utilisés le moins possible, les tableaux doivent consister la majeure partie de mise en page de votre E-mailing.

L’utilisation de tableaux est recommandé parce qu’un email est différent d’une page web et qu’on ne peut pas utiliser trop de déclarations CSS étant donné que les clients mails les supportent mal! en tout cas pour le moment.
Avant de commencer la création de notre Email en HTML, il faut bien se décider sur la mise en page à utiliser. La plus classique et qui fonctionne très bien c’est une mise en page en une ou deux colonnes, cela vous permettra d’inclure le maximum d’informations dans une petit contenu supporté par la page d’email.
– une mise en page à une colonne se compose de :
Une HEADER (En-tête) qui contient généralement le logo ou un texte avec un lien vers le site.
Puis une illustration ou des images avec du texte qui contient des liens internes et qui renvoient le lecteur au contenu de site.
Une FOOTER (pied de page) qui peut contenir des informations sur le site, un E-mailing Signature.. mais il faut aussi ajouter un lien pour se désinscrire d’E-mailing.

Une mise en page d’un E-mailing en deux colonnes comprendra toujours une HEADER et une FOOTER. On utilise une colonne étroite pour les liens et une colonne plus large pour ajouter plus de texte et des images. Créez un tableau pour la HEADER, un autre tableau pour le contenu sur deux colonnes et un pour la FOOTER, ce qui vous fait 3 tableaux. Puis enveloppez tout cela dans un autre tableau. Ce que je vous conseil car cela fonctionne sur la plupart des Clients Mail c’est de créer un tableau simple avec un td pour HEADER et FOOTER et un autre pour le contenu de notre email.
Utilisez les attributs qui peuvent aller avec le tableau et l’attribut td pour contrôler la façon de s’afficher de votre tableau. Par exemple: border= ″ 0 ″, valign=″ top ″, align=″ left ″ (ou center si cela convient à votre mise en page)… Cela aidera principalement les vieux clients mails à afficher votre email d’une manière acceptable.

– Ajouter le CSS
utilisez le CSS en inline pour stocker tout type d’information. Placez votre déclaration de style juste en dessous du Body.
Pour votre tableau, mettez la largeur du tableau à 98%, cela éliminera le problème d’affichage sur Yahoo. Si les bordures sont critiques dans la mise en page de votre email, ajustez la largeur à 95 % voir 90 % dans le but d’éliminer tout problème potentiel. Les tableaux à l’intérieur du container doivent être à 100%.
L’utilisation de div doit être liée à la gauche ou la droite d’une cellule td. Gmail ne supporte pas les déclarations de CSS flottantes mais Yahoo et Hotmail les affiche sans problème.

Maintenant, il faut tester votre email en HTML, cela vous permettra d’identifier les problèmes qui auront besoin d’être corrigés. Le premier logiciel de test est Firefox ainsi qu’Internet Explorer. Si l’email s’affiche correctement il y aura de bonnes chances que lorsque vous le testerez dans Outlook, Yahoo mail, Gmail, ou tout autre client, il n’y aura que des problèmes mineurs qui seront révélés. Une fois que l’email apparaît correctement dans ces deux navigateurs, utilisez un prestataire de service d’envoi de mails pour l’envoyer sur toutes vos boîtes de tests.

– Ce qu’il faut éviter :

– Ne pas utiliser de JavaScript.
– Utilisez target= »_blank » afin que le lien cliqué s’ouvre dans une nouvelle page.
– Evitez l’utilation d’images 1px sur 1px parce que ces tailles sont souvent utilisées par les spammeurs afin de savoir si l’email a été ouvert ou non. Le risque est que votre campagne soit perçue comme du spam.
– Evitez l’utilisation d’une seule et grande image comme corps de votre e-mailing car votre campagne sera sûrement perçue comme du spam.
Je vous suggère de tester votre email sur Emailspamtest en ligne avant l’envoie de votre compagne de promotion emailing.

Bonne E-mailing et Joyeux Noël à vous tous!



Laisser un commentaire