Comment Bien Utiliser le Html pour un Emailing ?

Article d’archive, publié en 2009. Les outils et leurs interfaces ont changé depuis : certains écrans ou réglages peuvent ne plus correspondre.

Réaliser un bon e-mailing passe dans un premier temps par la réflexion. Nous avions vu la semaine passée, 5 astuces pour réaliser un bon e-mailing pour la conception de la bonne accroche, trouver le bon contenu, correctement le mettre en forme, et aussi savoir à qui nous envoyons notre e-mailing.

Un point pourtant essentiel manquait, comment être sûr que nos e-mailing soient lisibles. Qu’importe de concevoir un e-mailing parfait si celui-ci se retrouve illisible par notre cible. Ce billet de Lyndi Lawson nous permet de combler ce manque, reprenant les fondamentaux de la conception d’un e-mailing en HTML ainsi que sur les bonnes pratiques à mettre en œuvre.

Tout ce que nous verrons dans cet article pour apprendre à bien utiliser le HTML pour son emailing s’adaptera aussi parfaitement à la création de template d’emailing pour MailChimp. MailChimp est un routeur d’emailing que nous utilisons à chaque campagne client que nous réalisons. Bien entendu, toutes nos créations d’emailing sont faites en HTML.

Depuis ces 5 dernières années, l’utilisation du HTML ne cesse de croître dans le monde de l’e-mailing. Le HTML connait toujours un franc succès en tant que média de communication, aussi bien pour les concepteurs que les lecteurs. Les concepteurs peuvent suivre les taux d’ouverture d’emails ainsi que le nombre de clics, mesurant ainsi l’intérêt des lecteurs pour le produit et les sujets proposés. Pour ce qui est des lecteurs, ils ont une présentation similaire à celle d’un site web ce qui est plus séduisant, et plus lisible qu’un email en texte brut.
D’un certain point de vu, utiliser le HTML dans les emailings est devenu plus simple qu’auparavant, certains fournisseurs de boîte mail tel Google ont implémenté le support des CSS. Cependant, dans le même temps, Outlook 2007 à fait faire un pas en arrière au HTML dans l’emailing: en effet, l’année dernière Microsoft a supprimé le moteur de rendu originel d’Outlook par un autre lui étant inférieur sur le domaine du support CSS.
Une autre avancée pour le support du HTML, la formation il y a quelques années du Projet de Standardisation des Emails. L’ESP a pour vocation à tester l’interopérabilité du CSS et HTML au travers des différents logiciels de gestion d’emails; la création de services ayant pour but des tester le rendu HTML des emails avec les solutions bureautiques ou en ligne; ainsi que la mise à disposition de template d’emails que l’on peut utiliser « tel quel » ou bien personnaliser. Nous parlerons de ces différents services et template durant cet article.
En dépit de ces avancées, utiliser du HTML dans un emailing peut se révéler être un enfer pour le développeur. Cet article vous dira quelles sont les dernières balises HTML que l’on peut utiliser ainsi ce que donneront leurs affichages dans la plupart des boîtes mails.

L’essentiel de l’emailing en HTML

Le plus difficile lorsque l’on utilise le HTML dans ses e-mailings est la profusion de clients mails disponibles allant des solutions bureautiques, tels Eudora, Outlook, Thunderbird ou bien Lotus note, aux solutions en ligne tel que Yahoo!, Hotmail ou encore Gmail. Si vous pensiez qu’il n’était déjà pas évidant d’assurer l’interopérabilité de votre site entre tous les types de navigateurs, soyez sûr que pour l’emailing, cela sera encore plus drôle. En effet, chacun de ces logiciels peut afficher le même email de beaucoup de manières différentes ! Même lorsque vous serez sûr que le HTML soit bien affiché, des variations entre le paramétrage de ces logiciels, comme la taille de la fenêtre de lecteur, pourront être piégeantes.
Que vous choisissiez de développer votre email « à la main » ou que vous voulez utiliser un template existant, il y a deux concepts fondamentaux lorsque l’on construit un email en HTML :

1. Utilisez les tableaux pour contrôler la mise en forme de votre design ainsi que pour certains éléments de la présentation. Vous êtes certainement rompu à l’utilisation d’une mise en forme en pur CSS pour vos pages web, chose qui ne tiendra pas la route dans le microcosme de l’emailing.
2. Utilisez l’Inline CSS pour contrôler tout le reste de votre emailing, comme la couleur de fond ou la police de caractère.

La manière la plus rapide de découvrir comment interagissent les tableaux HTML et les Inline CSS est de télécharger un template à partir de Campaign Monitor ou de MailChimp. Lorsque vous ouvrirez ces template, vous remarquerez différents éléments dont nous parlerons en détail plus tard :

• Les déclarations de style CSS apparaissent en dessous du tag body et non entre les balises head.
• Aucun raccourci CSS n’est utilisé: plutôt que d’utiliser ce style d’abréviation font : 12px/16px Arial, Helvetica vous devez plutôt l’appeler comme cela font-family, font-size ainsi que line-height.
• Spans et divs doivent être utilisés avec parcimonie, pour certains effets spécifiques, alors que les tableaux HTML devront faire la majeure partie du travail de mise en page.
• Les styles CSS sont très basiques, n’utilisez pas trop tout ce qui touche aux CSS.

Première étape: Mise en page grâce aux tableaux

Grande nouvelle, les tableaux sont de retour ! Les standards web sont devenus la norme pour développer des pages web afin qu’elles apparaissent correctement, seulement un email n’est pas une page web! Les clients mails sont encore à des années lumières de ce qui se fait en terme de support CSS, ce qui implique que nous devons réutiliser les tableaux si l’on souhaite être sûrs de la manière dont sera présenté notre email à chacun de nos lecteurs.
La première étape dans la création d’un email en HTML est de se décider sur le type de mise en page que nous souhaitons. Pour un emailing classique, une mise en page en une ou deux colonnes est ce qui fonctionne le mieux, afin de gérer le chaos induit par la multitude d’informations à gérer dans un si petit contenu qu’est l’email.
Une mise en page à une colonne est typiquement constituée de :

1. L’entête qui contient généralement le logo ainsi que des liens vers le site parent, afin d’assoir la notoriété de la marque ainsi que pour produire une certaine familiarité avec le dit site.
2. Des liens internes dans l’email qui renvoient vers un contenu qui est situé plus bas.
3. Un pied de page qui comprend le même type de lien que dans l’entête avec en plus un lien pour se désinscrire.

La mise en page d’un emailing en deux colonnes comprend aussi un en-tête et un pied de page. Tout comme une page web à deux colonnes, la colonne la plus étroite est souvent sur le côté accueillant les fonctionnalités et liens vers plus d’informations, tandis que la plus large accueillera le contenu de l’email.. Souvent, les emails promotionnels contiendront uniquement en contenu une grande image avec quelques liens.
Toutes ces possibilités de mise en page peuvent être facilement implémentées en utilisant les tableaux HTML pour diviser l’espace entre colonnes et lignes. En fait, utiliser les tableaux HTML est la seule manière de s’assurer d’un rendu correct sur la plupart des clients mails.
Peu importe les qualités graphiques de votre email, il est important de se rappeler que le contenu le plus important doit apparaître le plus en haut possible, il sera donc immédiatement visible lorsqu’un lecteur ouvrira. Retenez aussi que le coin gauche supérieur est proportionnellement l’endroit le plus regardé.
Voici l’approche que j’adopte pour la création d’un emailing :

• Pour une mise en page sur deux colonnes, créez un tableau pour l’entête, un pour le contenu sur deux colonnes et un pour le pied de page, ce qui fait trois tableaux en tout. Enveloppez tout cela d’un autre tableau. Utilisez la même approche pour une mise en page sur une colonne mais avec le contenu sur une colonne. Cette approche est particulièrement judicieuse si le design de votre mail repose sur une seule et grande image. Sinon, un tableau simple avec un td pour l’entête suffit, un pour le corps et un autre pour le pied de page fonctionnera très bien sur la plupart des clients mails, mais pas sous Lotus Note.
• 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. Cela peut être 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’un manière (à peu près) acceptable.
• Même si votre mise en page ne contient pas de bordure pour le tableau, vous devriez trouver cela pratique, lors du développement, de mettre border=1. Cela vous aidera à identifier les problèmes liés à l’alignement des attributs tr et td. Mettez le à border=0 avant de faire les tests finaux ainsi que l’envoi.

Même si cette approche heurtera certainement les plus puristes qui préfèrent utiliser les derniers standards pour développer, c’est la seule approche qui soit viable. Mais le fait de réutiliser les tableaux pour la mise en forme ne veux pas dire qu’il faut réutiliser l’ancienne façon de faire sur tout. Par exemple, peu importe la pauvreté de l’affichage d’un email en HTML sous Lotus Notes vous ne devrez pas recourir à l’utilisation de la balise font. Et tant que le moteur de rendu HTML d’Outlook 2007 sera loin d’être parfait, il continuera quand même à correctement afficher un tableau basique.

Deuxième étape: Ajouter des styles CSS

Ai-je dis que le support des CSS par le clients mails était vraiment très pauvre ? Oui, en effet. Quand bien même, il vous faut tout de même utiliser les styles CSS dès que vous vous mettez à emboiter différents types de tableaux. Il y a seulement certaines choses à vérifier. Voici les différentes étapes utilisées.

Premièrement, utilisez le CSS en inline pour stocker tout type d’information. Ne pas utiliser de style CSS dans l’entête de déclaration HTML , contrairement à ce que vous faites lors de vos développements. Placez plutôt votre déclaration de style juste en dessous du tag. Gmail, en particulier, recherche tous les styles dans l’email et les supprime. Ainsi, ne vous embêtez pas avec l’élément link pour vous référer à une feuille de style externe: Gmail, Hotmail et pleins d’autres clients mails ignorerons, modifierons ou supprimerons ces références à une feuille de style externe.

Pour votre tableau container, celui qui contient l’entête, le corps ainsi que le pied de page, mettez la largeur du tableau à 98%. Cela éliminera le problème de Yahoo! mail qui a besoin d’un pour cent de marge de leur côté afin d’afficher correctement votre email. Si les bordures sont critiques dans la mise en page de votre email, ajuster la largeur à 95 % voir 90 % dans le but d’éliminer tout problème potentiel. Bien entendu, les tableaux à l’intérieur du container doivent être à 100%.

Mettez les informations générales sur vos styles de polices à la suite d’un td dans un tableau, le plus proche possible du contenu. Cela se traduira par une répétition en cas de multiple td. Mettez les définitions de style de vos polices dans l’entête seulement lorsque cela est indispensable.

Utilisez l’attribut div avec parcimonie pour des boîtes flottantes et liez à la gauche ou la droite d’une cellule td. Gmail, pour commencer, ne supporte pas les déclarations de CSS flottantes (alors que Yahoo! et Hotmail se débrouille très bien avec). Parfois, il est préférable de se débrouiller avec un tableau complexe que de se référer à une déclaration flottante. Mais, comme il est facile de remplir un email, demander à votre designer de mettre le contenu flottant dans la colonne la plus étroite. Un support faiblard des flottants est souvent à l’origine d’une remise sur l’étal du travail au niveau du design.

Alros que l’attribut div semble être à peine utile, spans lui fonctionne à chaque fois car ce sont des éléments « inline ». Dans certains cas, spans peut être utilisé plus que pour juste coloriser ou dimensionner le texte, il peut être utilisé pour positionner le texte en dessous ou au dessus de votre contenu.
Notez que certains fournisseurs d’emails désencapsulent la définition de style afin de les rendre plus lisibles par les clients mails. Par exemple, l’écriture CSS abrégée style= »margin: 10px 5px 10px ; » doit être réécrite comme nous l’avons vu plus haut. Testez cela sur les différentes solutions d’emails et regardez ce qu’il se passe au niveau du code de votre email. Commencez avec une écriture CSS abrégée afin d’être sûr de bien situer le problème sinon cela pourrait passer inaperçu.

Si vous avez téléchargé et étudié les templates de chez Campaign Monitor ou de chez MailChimp, vous verrrez qu’ils ont traité le tableau container comme si c’était l’attribut html body. L’équipe de Campaign Monitor s’y réfère en tant que « BodyImposter », ce qui est une très bonne façon de penser au tableau container. Dans une vision CSS, le tableau container fera ce que l’attribut html body ferait si des services comme Gmail ne desactivaient pas ou n’ignoraient pas l’attibut body.

Troisième étape: Adoptez les bonnes pratiques

Avoir suivi mes précédents conseils ne suffira pas à avoir un email complètement valide. Il y a beaucoup de bonnes pratiques à suivre afin de s’assurer que votre email sera bien reçu.

La prochaine étape est de tester votre email en HTML parmi toute la variété de clients mails qui existent. Cela vous permettra souvent d’identifier les problèmes qui auront besoin d’être contournés.

Le premier logiciel de test est Firefox ainsi qu’Internet Explorer. Si l’email s’affiche correctement, voire parfaitement, sous un navigateur comme sous l’autre, 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. Je vous recommande également de le tester avec Internet Explorer 6.0. Cela vous donnera une bonne indication sur l’affichage de votre email par Outlook 2003.

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. Idéalement, ces boîtes de tests seront chez Gmail, Yahoo! mail et Hotmail.
Bien entendu, vos tests doivent utiliser les même boîtes que celles des gens de votre liste qui recevront votre email. Par exemple, s’il n’y a pas de participants chez Yahoo!, cela sera certainement une perte de temps et d’argent que de le configurer pour un mail Yahoo!
Voici une liste d’astuces pour contourner les problèmes les plus récurents:

• Parfois, il faut passer d’un taux de largeur à une valeur fixe. Bien que cela ne soit pas l’idéal, car les lecteurs peuvent redimensionner leur fenêtre de lecture, cela règle généralement les problèmes d’affichage parmi la plupart des clients emails.
• Si vous avez un problème de largeur de colonnes dans le design de votre email, retirez dans un premier temps les attributs cellpadding et cellspacing des tableaux HTML.
• Un problème de déplacement des images peut surgir lorsque l’attribut td est trop prêt d’un attribut img. Cela est un vieux problème. Mettre l’attribut tout de suite après l’attribut img, sur la même ligne, élimine ce problème étrange et embêtant de trou d’un pixel.

En plus, les bonnes pratiques ci-dessous sont recommandées:

• Ne pas utiliser de JavaScript car la plupart des clients mails le désactiverons.
• Utilisez l’attribut target= »_blank » afin que le lien cliqué soit ouvert dans une nouvelle page, pour ceux utilisant un webmail.
• Utilisez une image d’un pixel sur un pixel peut être utilisé afin de forcer l’espacement pour que la mise en page soit parfaite. Cependant, ce type d’image est souvent utilisé par les spammeurs afin de savoir si l’email a été ouvert ou non. Par conséquent, utiliser ce type d’image augmentera le risque que votre campagne soit perçue comme du spam.
• Pour les mêmes raisons, n’utilisez pas une seule et grande image comme corps de votre emailing.

Il est important que vous vérifiez également que votre message passe de façon acceptable lorsque les images ne sont pas chargées par le client mail. Thunderbird, Outlook ainsi qu’une pléthore de clients mais sont configurés par défaut pour ne pas charger les images externes. A titre d’exemple, si vous utilisez une image afin de vous faire un fond coloré pour une police de caractère blanche, assurez vous que la couleur de fond Html soit bien sur noir et non sur blanc.
Afin de mener mes tests, j’ai pris l’habitude de remplacer l’appel des images par un jeu de caractère quelconque dans le but d’être sûr qu’aucune image ne soit chargée.
Tester son emailing passe aussi par tester s’il peut être considéré ou non comme Spam. Pour cela, SpamCheck fourni un service très utile qui met en lumière les points qui pourraient faire que votre emailing soit considéré comme du Spam. Bien qu’il soit vendu avec un groupement d’outil appelé « Site Build It », il est tout à fait possible d’utiliser la version de SpamCheck en ligne, qui elle, est gratuite.
Une fois que votre Html est propre, c’est à dire que l’email passe bien sur tous vos comptes de tests, faites vous une checklist. Par exemple, verifiez les points suivants :

• Est-ce que le « From » de l’email est correctement affiché (comme un nom, pas une adresse mail) ?
• Est-ce que le sujet est bon ?
• Est-ce que les informations de contact sont correctes et parfaitement visibles ?
• Est-ce que l’entête de l’emailing montre bien le pourquoi du comment on reçoit cet email ?
• Est-ce les instructions pour se désabonner sont bien en pied de page ?
• Est-ce qu’un texte demande au lecteur d’ajouter l’expéditeur dans leur carnet d’adresse ?
• Est-ce qu’un lien vers la version « on line » est bien présent dans l’entête de votre email ?

Si pour vous il est primordial de connaître tout ce qui pourrait faire que votre email ne soit pas correctement affiché, essayez un service comme celui proposé par Browsercam.com. Contre une petite rémunération, cela vous permettra d’envoyer votre email sur une page web, qui servira de page de départ à Browercam. Ensuite Browsercam prendra des captures d’écran qui vous montrerons votre email dans un large choix de navigateur web et de système d’exploitation. Bien que ces captures d’écran ne vous montrerons pas comment cela rend pour tous les clients mails, il ne faut pas oublier qu’un grand nombre de personnes affichent leurs emails Html grâce à des composants système qui s’appuient sur les moteurs de rendu des navigateurs web. Browsercam est donc un bon moyen d’augmenter vos chances que votre email soit bien vu par tout le monde.

Quatrième étape: Faire son code pour Gmail, Lotus Notes et Outlook 2007

Gmail, Lotus Notes ainsi qu’Outlook 2007 présentent chacun leur propre challenge pour développer. Outlook 2007, croyez le ou non, a un support du CSS beaucoup moins bon qu’il ne l’était. Pour Gmail, ce manque se fait un peu moins sentir car il faut utiliser un navigateur web pour y accéder, il ne peut donc contrôler la manière dont l’email s’affichera. Par conséquent, les développeurs de chez Google ont dû rajouter des étapes afin de s’assurer que l’email serait bien affiché, quelque soit la qualité de l’Html ou des Css utilisés.
Une des choses que nous savons, Gmail supprime tous les style Css compris entre n’importe quel attribut de style, peu importe où ils apparaissent dans l’email. Les polices de caractères qui se trouvent dans un tableau, la seule alternative pour utiliser des styles, ont la mauvaise habitudes d’apparaitrent plus gros que souhaités, peu importe la manière dont l’email est structuré. La bonne nouvelle est que si vous développer pour ces trois étranges clients mails, alors votre code Html sera bien plus apte à être bien affiché sur la plupart, si ce n’est tous, des clients mails. Voici une liste des points techniques qui semblent bien fonctionner sous Gmail ainsi que sur d’autre vieux clients mails :

• Définissez la couleur de fond dans une cellule td avec l’attribut bgcolor, pas par le style Css.
• Comme nous venons de le voir ci-dessus, utilisez l’attirbut background dans une cellule td pour les images de fond plutôt que passer par un Css. Un effet de bord de cette technique est que vous pouvez avoir une image aussi grande que vous le souhaitez. Ainsi, si le contenu dans votre template peut varier en taille, utilisez une image bien plus grande pour le fond, cela permettra que votre email soit coupé ou augmenté en hauteur. Rappelez-vous tout de même qu’Outlook 2007 ne supporte pas les images en tant que fond.
• Si vous avez besoin de faire apparaître un carré autour d’une cellule td, gardez à l’esprit que Gmail affiche les bordure autour d’une cellule lorsque cela est défini dans le div, mais pas lorsque la déclaration se fait dans un attibut td.
• Si vous avez besoin d’un lien qui ressorte bien sur un fond noir, mettez la déclaration de la police dans une cellule td et ajoutez un attribut color:
• Si les font p et a apparaissent d’une taille différente, encapsulez l’attribut a dans l’attribut p.
• Gmail utilise abondamment la colonne de droite ce qui a pour effet de couper l’email en Html dans son centre. Assurez-vous que l’attribut de remplissage, pour les cellules qui ont du contenu, soit défini ) 10 pixels tout du tour, ainsi le texte ne sera jamais directement sur les bords.
• Quand vous testez un email sous Gmail, vous constaterez souvent que certains effets de votre police, notamment dans les td, h1, h2… sont manquants. Inspectez chaque mot prudemment afin de vous assurez que Gmail affiche correctement toutes vos polices.

A coté de Gmail, il y en a d’autres qui laissent les développeurs perplexes: Lotus Notes. Beaucoup de grandes entreprises continuent à supporter et même mettre à jour leur installation de Lotus Notes. Malheureusement, il est impossible de savoir quelle entreprise l’utilise ou non. La meilleure approche reste de suivre les étapes décrites dans cet article et de se souvenir que plus votre code Html sera primitif, plus il y y aura de chance que cela fonctionne bien, si ce n’est parfaitement, sous Notes.
Cela dit, il est tout à fait possible que Notes insére certaines excentricités à votre email en Html qui sont presque au-delà de l’imaginable. Par exemple, ce logiciel peut convertir certaines images dans un format propriétaire, ou simplement ignorer un email parfait fait dans avec du Html basic alors que ce code a déjà été utilisé dans d’autre campagne et qu’il s’affichait très bien :

• Comme nous l’avons déjà vu, il faut utiliser un tableau container qui contiendra tout votre mise en page. Cela aura pour effet que l’email restera en un seul morceau.
• Évitez également d’utiliser une déclaration de style dans l’attribut head.
• Utilisez des Url absolues pour vos images stockées sur un serveur web. vous en pouvez pas faire grand chose contre la conversion des images par Notes, toutefois l’emploi d’images externes peut améliorer les choses.
• Évitez d’utiliser le colspsan dans vos tableaux Html, Notes ne gérant que des mises en page de tableau basique.
• Assurez-vous que la largeur de vos cellules soit exacte. Contrairement aux navigateurs web, qui eux redimensionnent automatiquement la largeur, Notes dimensionne chaque cellule en fonction de sa définition.
• Centrer un email ne fonctionne généralement pas sous Notes, un alignement sur la gauche est préférable.

Utiliser ces techniques dans le but d’avoir un bon résultat sous Gmail et Notes vous assurera qu’il soit bien affiché sous Outlook 2007, qui utilise un vieux moteur de rendu Html. Microsoft ayant publié à ce sujet un billet expliquant ce qui peut ou non être affiché par Outlook 2007.
Le projet de standardisation des emails, Email Standards Project, a des détails additionnels sur le support du Css par Outlook 2007.

En résumé

La plupart des gens qui recoivent des emails préfèrent la version en Html plutot qu’en texte brut, pour différentes raisons. Pour les développeurs, concevoir un email qui soit parfaitement visible sur toutes les plateformes et à la fois simple et terriblement complexe. Nous avons pu voir dans cette article la plupart des soucis que vous pourrez rencontrer ainsi que des stratégies pour y remédier.
Quelle est la meilleure chose à retenir de cet article ? S’il doit y avoir un choix entre une mise en page très simple et une complexe, souvenez-vous que la simplicité est toujours un chemin sûr.

Traduction du billet de Lyndi Lawson, How to code HTML Email newsletter

Allez Plus Loin dans l’Emailing

Besoin de plus d’astuces pour que vos emailings ? Lisez ces 20 astuces anti-spam pour votre emailing.

Un élément déterminant pour lutter contre la classification de vos emailings comme spam, le double opt-in. Alors, opt-in ou double opt-in pour gérer votre liste ?

Vous souhaitez allez plus loin dans votre connaissance de l’emailing voici quelques billets à découvrir :

• Un bon email, c’est un emailing qui ne fini pas dans les spams. Comment éviter que votre emailing ne finisse dans les spams.
• Savez-vous si vos lecteurs recevoivent vos emails sur un ordinateur ou sur un téléphone portable ? Pourquoi les Emails Doivent être Optimisés pour les Mobiles ?
• Optimiser le sujet de son emailing, la base pour être lu. 15 Astuces pour tout savoir de la rédaction de sujet d’email.
• Suivre sa campagne emailing grâce à Google Analytics ? Découvrez comment utiliser les liens UTM pour Google Analytics

PartagerLinkedInFacebookXE-mail