1196 vues 0 commentaires

Solution au problème d’email affiché dans les newletters

par le11 avril 2014
 

Pour gagner en efficacité lors de l’envoi de vos Newsletter ou de simple mail à la mise en page soignée, il est nécessaire de maximiser la compatibilité avant l’envoi pour vous éviter d’avoir de mauvaises surprises. Même parmi les grandes entreprises françaises comme Orange, il est encore fréquent de recevoir ceci :

message non visible sur thunderbird

message non visible sur thunderbird

Dans cet article nous vous décrirons comment rendre votre mail compatible multi-plateforme et affichable immédiatement sans aucune notification.

Encoder vos images en base64

Dans certains client de messagerie logiciel ou par Webmail, les images pour des raisons de sécurité ne s’affiche pas directement lorsque l’on ouvre le mail. Chaque image est alors associé et est considéré par le serveur de messagerie comme une pièce jointe. Il faut ainsi cliquer sur une notification pour afficher clairement la newsletter. L’encodage en base 64 permet de se détacher de ce défaut en convertissant votre image en série de caractère.

image non encodée base 64Voici un exemple d’insertion d’image encodée en base 64 :

pour les conversions en ligne : http://webcodertools.com/imagetobase64converter

Passer le tout à la moulinette dans Premailer

Une fois que toutes vos images sont insérées à la bonne place, soit dans votre code HTML ou dans votre code CSS. Il faut à présent s’assurer d’une compatibilité maximale avec l’ensemble des webmails et pour parvenir à ce résultat, il est impératif de supprimer toutes mises en page trop complexes en revenant à ce que l’on vous avait déconseillé d’utiliser : Les tableaux html. Comme on est toujours un peu feignant, on ne va pas s’embêter à réécrire l’ensemble de notre code pour le formater sous forme de tableau en prenant en compte nos lignes de CSS. Un site fait très bien cela et il s’agit de premailer.

Cet outil supprimera également l’ensemble de vos classes CSS utilisées pour les transformer en de simples balises div style.

Pour de belles mises en page les arrondis et les gradients CSS

Au niveau du CSS dans les mails, vous avez tout de même la possibilité d’utiliser des fonctions avancées car le navigateur utilisé continuera à jouer son rôle dans le cadre d’un affichage au sein d’un webmail. Il est donc tout à fait possible de mettre en place des dégradés à la sauce CSS3 ou encore des jolis bords arrondis.

Div radial

Voilà à présent vous avez toutes les cartes en main pour que vos mails s’affichent directement quelque soit le logiciel de messagerie ou le webmail utilisé.

Sois le premier à commenter !
 
Ajouter un commentaire »

 

    Laisser un commentaire