Les astuces pour coder un emailing sans s’arracher les cheveux

Coder un emailing c’est… tout un art. L’art de faire en sorte d’écrire du code HTML lu de la même façon par tous les mailers dans tous les navigateurs. Ce n’est pas mission impossible, mais il faut savoir ce qui passe et ce qui ne passe pas, et connaître quelques petits « hacks » pour corriger certains bugs d’affichages.

C’est après m’être arrachée les cheveux pour savoir comment supprimer l’espace blanc de 3px qui apparait entre deux images avec des liens dans une newsletter que j’ai décidé d’écrire cet article ou je vais recenser toutes les astuces à connaître. Et je compte sur votre participation !

Je commence donc avec cette histoire d’espace blanc entre deux images :

Problème de code newsletter : espace blanc entre deux images avec des liens

Il arrive de devoir découper une image en plusieurs parties pour pouvoir mettre deux liens différents derrière, et compter sur le fait que les deux images se touchent pour que le découpage ne se voit pas. C’est là qu’une barre blanche de 3px apparait entre les deux.

Vous pouvez trifouiller les padding, margin, height et autres dans tous les sens, rien n’y fait, firebug vous indiquera qu’il y a un mystérieux espace entre la fin de l’image et </a>. Au mieux un bgcolor dans votre <tr> peut cacher le problème, mais ça ne rend bien que si le bas de l’image est uni.

La solution : ajouter l’attribut style="display:block;" à votre image.

Et oui c’est tout ! Merci Quentin pour cette astuce.

ajouté le 19/12/10 :

Une marge qui varie d’un mailer à un autre

Il est important de savoir que la propriété margin n’est pas prise en compte par tous les mailers, et notamment pas par hotmail. Cela implique deux choses :

- N’utilisez pas la propriété margin dans le code de votre newsletter, qui induira un rendu différent sur hotmail. Utilisez plutôt le padding, qui semble pris en compte par tous.

- N’utilisez pas de balise pour laquelle le margin est défini par défaut dans le code de votre newsletter si sa valeur ne vous convient pas, comme <p>, <h1>, <h2> etc. Vous ne pourrez pas la changer sur tous les mailers. Par exemple hotmail ignore la valeur du margin que vous définirez et appliquera dans tous les cas margin : 0 0 1.35em; . Utilisez plutôt les balises <div> et <span>.

Des idées d’autres bugs courants ?

• 10 points clés pour réussir vos campagnes emailing
• Quel jour et à quelle heure envoyer un emailing ?
• Enregistrer la navigation de ses visiteurs pour optimiser son site ou son blog