Bien Coder une Newsletter en HTML

Les newsletters au format HTML ont parcouru bien du chemin après la première publication de cet article, il y a deux ans. Les mails au format HTML sont toujours un moyen performant de communication à la fois pour les éditeurs et les lecteurs. Les éditeurs de contenu peuvent analyser le taux d’ouverture, de transfert, le CTR et par cela jauger de l’intérêt du lecteur par produits et par sujets, tandis que pour les lecteurs l’information est présentée comme une page web, d’une façon plus conviviale, plus facile à décoder et à utiliser que du texte brut.

D’une certaine façon écrire une newsletter en HTML est devenu plus simple : de nombreux fournisseurs d’adresse électronique tel que Google, ont améliorés leur support de CSS. Cependant dans le même temps le mouvement contraire à eu lieu pour Outlook 2007, Microsoft ayant remplacé le moteur de rendu HTML original par un moins performant pour le CSS.

Parmi les autres avancées dans le domaine on peut citer le projet Email Stan­dards Pro­ject, qui vise à tester la conformité des logiciels d’emails vis à vis des standards HTML et CSS et milite pour des améliorations. L’émergence de services pour tester le rendu d’un mail HTML dans différents environnements applicatifs en ou hors ligne, et la disponibilité de templates que vous pouvez soit utiliser telles quelles, soit modifier selon vos préférences. Nous nous pencherons sur certains de ces services et sur les templates au cours de cet article.

En dépit de ces avancées, coder une newsletter en HTML peut être un supplice pour les programmeurs. Cet article vous présentera l’état de l’art de la création des newsletter en HTML, qui seront ainsi correctement affichés dans la plupart des clients de courrier électronique. J’y décris les résultats de ma propre expérience dans la création de tels mails pour des clients, accompagné de quelques informations techniques glanées sur Internet.

C’est en fait la seconde mise à jour d’un article qui a été écrit et publié sur insidedaweb en 2009, qui contient des informations nouvelles et des mises à jour qui vous aiderons à garantir que votre newsletter sera compatible avec les clients mail d’aujourd’hui.

Si vous rencontrez des difficultés à coder votre propre newsletter en HTML, je ne pourrais que vous conseiller les services de Mailchimp, que nous utilisons régulièrement. Ils proposent une bonne cinquante de thème gratuit pour votre emailing. Nous en utilisons un pour l’inscription à notre site de thèmes WordPress, par exemple. Sachez que Mailchimp est aussi excellent pour envoyer la newsletter en HTML que vous venez de créer. Ici aussi, je parle en connaissance de cause, c’est par ce système que nous routons l’ensemble des campagnes d’emailing de nos clients, avec des créations en HTML personnalisées.

Les fondamentaux

La plus grosse difficulté dans la création d’une newsletter en HTML est la diversité des outils disponibles pour les lire. Cela va du client lourd comme Eudora, Outlook, AOL, Thunderbird et Lotus Notes, à l’application web telle que Yahoo!, Hotmail et Google Mail. Si vous pensiez qu’il était difficile de s’assurer de la lisibilité de vos sites sur les différents navigateurs, soyez assuré qu’il s’agit ici d’un tout nouveau challenge : chacun de ces clients mails peut afficher le même contenu de manière totalement différente.
Et quand bien même ils affichent correctement une newsletter, les variations de la largeur de la fenêtre utilisée pour la consultation, par exemple, rend les choses plus difficile encore.

Que vous choisissiez d’écrire le code HTML de votre newsletter à la main (ce que je fais) ou d’utiliser pour cela un template existant, il y a deux concepts de base à garder en tête :

Utiliser des tableaux HTML pour contrôler l’agencement et une partie de la présentation. Vous étiez peut-être habitué à utiliser du CSS pour le design de vos pages web, mais cette approche ne fonctionne pas avec les mails.

Utiliser du CSS inline pour les autres éléments de présentation dans le mail, tel que la couleur d’arrière-plan ou les polices.
La moyen le plus rapide et le plus facile de voir comment tableaux HTML et CSS inline interagissent dans un mail est de télécharger quelques templates de MailChimp. Quand vous ouvrirez un de ces fichiers, vous remarquerez quelques détails qui seront approfondis plus tard :

• La déclaration de style CSS apparaît à l’intérieur de la balise body, et non pas head.
• Les raccourcis CSS ne sont pas utilisés : au lieu d’utiliser la règle abrégée font: 12px/16px Arial, Helvetica, elle est découpée en propriétés individuelles: font-family, font-size et line-height.
• span et div sont utilisés avec parcimonie pour des effets spécifiques, le gros de l’agencement étant géré via des tableaux.
• Les déclarations de style CSS sont particulièrement basique, et ne font pas usage de CSS.

Étape 1 : utiliser des tableaux pour l’agencement

Vous ne rêvez pas, les tableaux sont de retour ! Les standards web sont peut-être devenus la norme de codage pour l’affichage dans un navigateur, mais ce ne fait pas tout le Web, fiston. Les clients mails sont à des années lumières en terme de support CSS, ce qui signifie que vous allez devoir vous faire à l’idée d’utiliser les tableaux si vous voulez vraiment que votre newsletter s’affiche de manière cohérente sur tous les clients.

Laissez donc vos bonnes pratiques respectueuses des standards, nous sommes sur le point de mettre les mains dans le cambouis !

La première étape dans la création d’une newsletter en HTML est de décider du type d’agencement à utiliser. Pour une newsletter un design en une ou deux colonnes fonctionne mieux parce qu’il gère mieux le chaos naturel inhérent à beaucoup de contenu dans un si petit espace qu’un mail.

Un design en une colonne consiste typiquement en :

• Un header qui contient le logo et quelques-uns (ou tous) les liens vers le site principal pour renforcer l’image de marque et la familiarité avec les visiteurs.
• Des liens internes qui pointent vers le contenu apparaissant plus bas dans le mail.
• Un footer à la fin qui contient généralement les mêmes liens que le header et des indications pour se désinscrire.

Les newsletter en deux colonnes utilisent également un header et un footer. À la manière d’une page web utilisant deux colonnes, ils utilisent typiquement une étroite colonne sur le côté pour présenter les liens vers de plus amples informations alors que la seconde colonne, plus large, contient le corps de la newletter.

Les mails de publicité suivent des règles similaires, avec moins de contenu et de liens. Ils font le plus souvent usage d’un ou deux messages, et quelques fois d’une grande image contenant des liens avec un petit texte d’explication.

Toutes ces possibilités d’agencements sont facilement réalisables en utilisant les tableaux HTML pour diviser l’espace en lignes et colonnes. En fait l’usage des tableaux est le seul moyen de parvenir à un rendu acceptable sur différents clients mails.

Peu importe comment votre newsletter est conçue, il est primordial de retenir que le contenu le plus important doit apparaître en haut du message de manière à ce qu’il soit visible dès l’ouverture. La partie en haut à gauche d’un mail est souvent le premier endroit que les gens regardent quand il l’ouvre.

Voici ma méthodologie quant à la création d’une newsletter en HTML :
Pour un design en deux colonnes, créer un tableau pour le header, un pour les deux colonnes du centre et un pour le footer, c’est à dire 3 en tout. Encapsuler ces tableaux dans un tableau principal. Utiliser la même approche pour un design en une colonne, mais en utilisant un tableau d’une colonne pour le contenu. Cette approche est particulièrement efficace pour des newsletter contenant des images réparties sur des cellules de plusieurs tableaux. Sinon, un unique tableau avec des lignes td pour le header (avec colspan=”2″ si le design utilise 2 colonnes), le contenu et le footer devrait s’afficher correctement partout sauf avec Lotus Notes.
Utiliser les attributs des tableaux et des balises td pour contrôler l’affichage du tableau. Par exemple, utiliser border=”0″, valign=”top”, align=”left” (ou center en fonction du design), cellpadding=”0″, cellspacing=”0″, etc. Le but premier est d’aider les clients mails à afficher le courrier d’une manière acceptable.
Même si le design de votre mail ne contient pas de bordure autour du tableau, il peut être utile durant le développement de rendre visible les bordures (border=”1″) pour déboguer les problèmes surgissant avec l’alignement interne des balises tr et td. À remettre à border=”0″ pour la phase de test la mise en production.
Même si cette approche peut offenser les puristes qui préfèrent coder suivant les derniers standards, c’est la seule méthode viable. Mais le fait d’utiliser des tableaux pour l’agencement ne signifie pas qu’il est nécessaire de ressortir l’arsenal complet des techniques old-school. Par exemple, aussi mauvais soit l’affichage des newsletter HTML avec Lotus Notes, il n’y a pas à utiliser la balise font. Et tandis que le moteur de rendu d’Outlook 2007 est loin de la perfection il affiche bien le HTML basique.

Il y a cependant quelques points délicats, voyons lesquels.

Étape 2 : ajout des styles CSS

Ai-je dit que le support de CSS était médiocre dans les clients mails ? Et bien ça l’est. Mais il est toujours possible (et c’est préférable) de l’utiliser pour les styles une fois les tableaux imbriqués mis en place. Il faut juste faire attention à certaines choses. Voici le processus que je suis.

En premier lieu utilisez les styles inline pour toutes les informations de style, comme présenté ici : cela inclut les balises table, td, p, a, etc.

N’utilisez pas la balise style à l’intérieur de la balise head comme il est de mise dans les pages web. Placez la juste au-dessous de la balise ouvrante body : Google Mail, en particulier, scan le mail pour tous les styles et les supprimes. De même ne vous fatiguez pas à utiliser un lien vers une feuille de style externe étant donné que Google Mail, Hotmail et d’autres logiciels ignore, modifie ou supprime ce type de références.

Pour votre tableau principal (celui qui contient les tableaux de header, contenu et footer), fixer la largeur à 98%. Il se trouve que Yahoo! mail nécessite ce petit pourcent de chaque côté pour un affichage propre. Si les barres de scroll sont critiques dans votre design utilisez une valeur de 95% ou 90% pour éviter les problèmes potentiels. Évidemment les 3 autres tableaux doivent eux utiliser la valeur 100%.

Mettez les informations de style au plus près du contenu, c’est à dire au niveau des balises td. Oui, cela peut induire une répétition de déclaration de style à l’intérieur de chaque case td. Fixez le style des éléments de titre (h1, h2, …), des paragraphes et des liens seulement si nécessaire.

Utilisez les div avec parcimonie pour faire flotter de petites boites de contenu ou des liens à l’intérieur d’une cellule td.
Google Mail, par exemple, semble faire fi des déclarations CSS float, tandis que Yahoo! et Hotmail les gèrent. Parfois il est mieux de coder un tableau plus complexe que de se fier aux float. Ou puisqu’il est si facile de mettre le bazar dans un email, demandez à votre designer de mettre le contenu flottant dans la colonne la plus proche, à la place. Le support erratique des float est un problème qui peut nécessiter un mail d’être refait.

Si les div sont très peu utile, les span eux semblent fonctionner à peu près tout le temps parce que ce sont des éléments inline. Dans certains cas les balises span peuvent être utilisées pour plus que seulement fixer la couleur ou la taille d’un texte : elles peuvent l’être pour positionner du texte avant ou après le contenu.

Notez que certains services relatifs aux mails vont décompacter les définitions de style pour les rendre plus explicites, et ainsi plus lisible par l’ensemble des clients mails. Par exemple le raccourci CSS style=”margin:10px 5px 10px 0;” pourra être réécrit avec la définition complète vue précédemment. Testez chaque mail et regardez ce qui se passe au niveau du code. Dans le pire des cas commencez par les raccourcis CSS parce que il apparaît que cela marche convenablement avec tous les logiciels de courrier électronique.

Si vous avez téléchargé et observé les templates de Campaign Monitor et MailChimp, vous devez avoir vu qu’ils considèrent le tableau principal comme une balise body. L’équipe de Campaign Monitor nomme ce tableau “BodyImposter” (Body Imposteur), ce qui est une bonne manière de voir les choses. D’un point de vue CSS ce premier tableau rempli le rôle qu’aurait la balise body si elle n’était pas ignorée par des services comme Google Mail.

Avec ce guide sur comment bien coder une newsletter en HTML, je pense que vous voila bien armé. Si vous avez une question ou une observation, les commentaires sont fait pour cela 😉