Comme nous l’avons expliqué dans la partie 1, les emailings se construisent en tableaux par soucis de compatibilité multi-clients.
Des emailings en tableaux
En effet, vous allez devoir utiliser des lignes, des colonnes et des cellules pour agencer votre emailing. Cette méthode est parfois un peu tortueuse et l’on a envie de s’arracher les cheveux mais ce mal est nécessaire. Vous pouvez grâce aux tableaux avoir plusieurs colonnes. Ces colonnes, lorsqu’elles sont vides, vous servent aussi de marges entre les éléments car les padding ne sont pas forcément supportés. A l’intérieur même des cellules, vous pouvez jouer sur les espaces grâce aux valign qui permet de placer le contenu en haut ou en bas de la cellule. Les propriétés cellpadding et colspan vous seront utiles pour définir un espace entre le contenu et la bordure de la cellule ainsi que pour fusionner plusieurs cellules ensemble. Vous allez certainement définir des tailles pour les différents blocs de votre emailing. Il faut savoir que dans les emailings on préfère exprimer les largeurs en pixels, elles seront donc fixes car parfois les largeurs exprimées en % ne sont pas toujours bien interprétées, ce qui cache l’affichage.
Un schéma à penser en amont
Avant de vous lancer dans la création de votre emailing, je vous conseille de décomposer sur une feuille de papier les différentes parties avec les différents tableaux. En effet, vous serez très probablement amenés à faire des tableaux dans des tableaux, il est donc très facile de s’y perdre. Vous aurez donc par exemple le tableau global qui marquera le cadre de l’emailing et à l’intérieur plusieurs tableaux dont au moins un pour l’entête, un pour le corps du message et un pour le pied de page. Pour le CSS, nous vous l’avons dit, il faut faire du inline. Dans le cas où les images ne s’affichent pas, l’attribut alt prend le relais. Vous pouvez si vous le souhaitez styliser ce alt en appliquant les propriétés de font et de color sur la balise image. ➙ A suivre partie 3 : la méthode pour le responsive