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

Publié le 21 juin 2010 par Delphine Dietrich 9 commentaires »

coder un emailing

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.

emailing : espace blanc entre deux images avec des liens

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 ?


Articles liés
Publicité

9 commentaires

  1. Quentin dit :

    Merci à Dolist en fait, qui m’a transmis cette astuce ! Rendons à César…

  2. Realti28 dit :

    on le met ou : style="display:block" ?

  3. @Realti28: Tu le mets dans la balise <img>.
    Par exemple :
    <a href="http://……."><img src="url de l’image" border="0" style="display:block;"></a>

  4. Thierry dit :

    @Realti28 : je serais tenté de dire DTC :D

    merci Delphine pour cette astuce !

  5. Anonyme dit :

    le problème du background-image?? svp :)

  6. Le background-image ne passe tout simplement pas dans au moins hotmail, gmail et la dernière version d’outlook… pas de solution :( Obligation d’écrire sur un fond uni.

  7. Ingrid dit :

    Chez moi, de style display:block; ne règle aps le problème. Toutes mes images sont l’une en dessous de l’autre dans des cellules TD différentes… Grrr

    Qu’ai-je donc foiré ?

    Est-ce à cause de mon colspan sur ma bannière de pied de page ?

  8. Thomas dit :

    Il me semble qu’il faut rajouter border="0" pour que tous les webmails comprennent ce petit hack (sans oublier les height et width)

    Ce qui nous donne : style="display:block" border="0"

  9. Dax dit :

    pour moi, la ligne « display:block » ou « display:none » m’a sauvé la vie et les cheveux ;-) plusieurs fois