Tableaux HTML dans les e-mails : qu'est-ce qui pourrait mal tourner ?

Si vous travaillez dans l'industrie du courrier électronique depuis un certain temps, vous avez probablement rencontré un certain nombre de problèmes avec vos campagnes de courrier électronique. Des images manquantes aux problèmes de délivrabilité, le marketing par e-mail est semé d'embûches. Quelque chose que vous n'avez peut-être pas envisagé, cependant, est ce qui peut mal tourner avec les tableaux - le code réel - qui est à la base de vos e-mails.

Malheureusement, il y a beaucoup de choses qui peuvent mal se passer avec les tableaux HTML. Aujourd'hui, nous voulions décomposer certains des problèmes les plus courants rencontrés avec les tableaux HTML et vous donner quelques conseils pour vous assurer de ne pas rencontrer les mêmes problèmes dans vos propres e-mails.

Pourquoi nous utilisons des tableaux

Tout d'abord, un rappel rapide sur les raisons pour lesquelles nous utilisons des tableaux HTML pour coder les e-mails. Comme nous en avons discuté dans le passé, les campagnes de marketing par e-mail nécessitent leurs propres considérations de codage particulières. Alors que le Web et le courrier électronique reposent sur les mêmes technologies (HTML et CSS), les applications de courrier électronique n'adhèrent pas aux mêmes normes que les navigateurs Web. Chaque application de messagerie possède son propre moteur de rendu qui détermine quel code est pris en charge et comment les e-mails sont affichés. La mauvaise nouvelle pour nous est que tous ces moteurs de rendu prennent en charge différentes balises HTML et propriétés CSS.

Pour cette raison, nous ne pouvons en grande partie pas utiliser les mêmes principes de codage que ceux utilisés dans la conception Web. Pour garantir que les e-mails s'affichent correctement sur la plupart des clients de messagerie, nous devons utiliser des tableaux HTML pour créer la structure d'une campagne par e-mail.

Bien que cela ait changé récemment, en particulier avec la mise à jour majeure de Gmail l'année dernière, certains clients de messagerie ne prennent toujours pas en charge beaucoup de HTML et CSS. Le plus notable : la famille de clients de messagerie Outlook de Microsoft, qui utilise Microsoft Word comme moteur de rendu. Étant donné qu'Outlook est toujours très populaire (actuellement n° 5 sur notre outil de suivi de la part de marché des clients de messagerie), les concepteurs de messagerie doivent toujours utiliser des tableaux dans une certaine mesure s'ils souhaitent que leurs campagnes s'affichent correctement pour les abonnés.

Et quand on doit se fier à des tableaux HTML, il y a un certain nombre de choses qui peuvent mal tourner…

Rendre les choses compliquées

L'un des problèmes les plus courants que nous rencontrons avec l'utilisation des tableaux est une mise en page trop complexe. Cela est particulièrement vrai pour les anciens modèles d'e-mails qui n'ont pas été mis à jour depuis quelques années.

Jusqu'à tout récemment, la plupart des e-mails étaient constitués de nombreux tableaux. Des tableaux dans des tableaux dans des tableaux—une pratique connue sous le nom d'imbrication.

Lorsque vous imbriquez plusieurs tables dans une autre table, vous risquez d'introduire des problèmes dans votre code. Il est très facile de mettre accidentellement un tableau au mauvais endroit ou de le coller sur une balise HTML essentielle lors du déplacement des éléments. Et pour certains clients (en vous regardant, Lotus Notes), vous pouvez voir les e-mails s'afficher mal lorsque vous imbriquez trop profondément les tables. C'est pour cette raison que nous recommandons de créer des e-mails avec une approche modulaire, un sujet sur lequel notre ami Brian Graves a écrit. Et essayez de réduire au minimum les tables imbriquées. Les tables gigognes sont presque inévitables, mais garder la profondeur d'imbrication à 4-6 tables maximum aidera à éviter tout problème.

Semblable à l'imbrication complexe, les conceptions trop complexes peuvent également être problématiques. Il n'est pas rare de voir des e-mails contenant plusieurs colonnes, mais lorsque vous commencez à ajouter trop de colonnes à un e-mail, vous vous préparez à un échec potentiel.

Certains clients de messagerie ont des problèmes même avec les mathématiques de base. Certaines versions de Microsoft Outlook sont connues pour ajouter un espacement supplémentaire aux colonnes du tableau, ce qui rompt la mise en page des e-mails. Bien que vous puissiez penser que l'utilisation de quatre cellules de tableau définies sur une largeur de 25 % est logique, Outlook ajoutera de l'espace supplémentaire à ces cellules et entraînera une mise en page plus large que 100 %. L'e-mail résultant laissera tomber certaines de ces cellules sur leur propre ligne, ruinant votre campagne d'e-mails bien conçue et parfaitement planifiée.

Garder la mise en page de vos e-mails simple permet d'éviter des problèmes potentiels avec vos campagnes et de satisfaire vos abonnés.

Balises manquantes

Les e-mails contiennent généralement beaucoup de code. Et la plupart des équipes de messagerie travaillent selon des horaires très courts et serrés. Cette combinaison peut conduire à des erreurs qui peuvent ruiner une campagne d'e-mails.

Comme rappel rapide, regardons comment le HTML est écrit. HTML se compose de balises qui entourent le contenu. Dans la plupart des cas, un balisage approprié nécessite à la fois une balise d'ouverture et une balise de fermeture. Prenons ce tableau HTML comme exemple :

 <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

Vous pouvez voir qu'il existe trois balises différentes : le tableau, la ligne du tableau et la cellule du tableau. Ces balises sont ouvertes, puis fermées (indiquées par le symbole /).

Bien que HTML soit un langage de balisage indulgent, les clients de messagerie et leurs moteurs de rendu s'étouffent souvent lorsque les balises HTML sont manquantes. Malheureusement, les balises de fermeture manquantes sont un problème bien trop courant dans les e-mails. Ces délais d'exécution rapides peuvent amener les concepteurs d'e-mails à coder trop rapidement et à oublier de fermer un tableau, une ligne ou une cellule. Bien que cela puisse convenir à certains clients, cela conduira à des campagnes interrompues chez d'autres.

Des outils tels que le service de validation de balisage W3C peuvent aider à identifier les balises manquantes. Les balises manquantes et les balises mal formées sont également la raison pour laquelle nous vous recommandons d'utiliser des modèles d'e-mails ou des outils tels que Builder's Partials et Snippets pour vous aider à créer des e-mails. Ils contribuent non seulement à garantir que votre code est bien écrit et correctement testé, mais ont également l'avantage d'accélérer votre flux de travail, vous permettant de respecter ces délais serrés et de satisfaire votre équipe.

Attributs manquants

Tout comme les balises manquantes peuvent causer des problèmes, les attributs HTML manquants sur les tableaux peuvent conduire à des conceptions originales.

Les attributs HTML sont des propriétés supplémentaires qui peuvent être définies sur les balises HTML. Ces propriétés contrôlent des éléments tels que la largeur et la hauteur des éléments, l'alignement et même l'espacement. L'espacement inattendu autour des cellules du tableau est l'un des problèmes les plus courants que vous rencontrerez avec les tableaux HTML.

Presque toutes les applications de messagerie (et navigateurs Web) ajoutent leurs propres styles aux tableaux HTML. Les tableaux HTML sont traditionnellement utilisés pour afficher des données tabulaires et n'étaient pas destinés à l'origine à la mise en page et à la conception de contenu. Pour cette raison, nous devons remplacer le comportement par défaut des navigateurs et des applications de messagerie pour garantir que les tableaux s'affichent correctement.

En ajoutant les attributs d'espacement de cellules et de remplissage de cellules au tableau, et en définissant les deux sur zéro, nous pouvons être sûrs qu'aucun client de messagerie n'ajoutera d'espace supplémentaire à ou autour des cellules du tableau.

 <table cellpadding="0" cellspacing="0"> </table>

De même, si vous rencontrez des problèmes de largeur de tableau ou d'alignement du contenu d'un tableau, vous devez vous assurer que vous n'avez pas oublié la largeur ou l'alignement des attributs sur les tableaux ou les cellules du tableau.

Apprenez à dépanner

Vous voulez apprendre à dépanner vos propres campagnes d'e-mails et éviter tout problème embarrassant pour vos abonnés ? Rejoignez-nous à Litmus Live pour un atelier complet sur le dépannage des e-mails comme un pro. Nous passerons en revue les pièges des e-mails les plus courants, leurs solutions et les meilleures méthodes de dépannage des campagnes.

Obtenez vos billets pour Litmus Live ! Inscrivez-vous aujourd'hui pour célébrer l'email avec nous ! Inscrivez-vous maintenant →