internet, graphisme, développement web, référencement, jeux, cinéma, tv, ...
actualité, événement, analyse, coup de coeur, ...
Les lettres d'informations ou newsletter sont un excellent moyen d'informer vos clients des nouveautés ou des offres en cours, le but est de fidéliser le client et d'augmenter les ventes par la même occasion. Jusqu'ici tout va bien, c'est au moment où il faut mettre en page sa campagne d'emailing que cela devient problématique.
Aujourd'hui avec les nouvelles technologies ou standards comme l'HTML 5, le CSS3, le JavaScript et ses libraires (JQuery par exemple), les développeurs peuvent concevoir de très belles interfaces multimédia assez rapidement et facilement. De plus en plus de navigateurs sont compatibles avec ces nouvelles fonctionnalités donc il serait dommage de s'en priver.
Oubliez tout ça avec les newsletters !
Le problème vient en fait des interfaces mail comme Hotmail ou des logiciels mail comme Microsoft Outlook. Ils ne prennent tout simplement pas en compte certaines balises HTML et propriétés CSS. Il va même falloir retourner au bonnes vieilles balises < table > et < font > dans certains cas. Cette compatibilité varie beaucoup d'un client à l'autre alors voici un petit aperçu qui résume bien la compatibilité CSS avec les newsletters et les principaux clients mail :
Vous trouverez la version complète du tableau à cette adresse : http://www.campaignmonitor.com/css/ (EN)
Voici quelques conseils afin de concevoir une lettre d'information visible sur tous les supports.
Retour à l'HTML 4 avec les balises < table >, la règle de base et d'utiliser les tableaux pour mettre la mise forme car tous les clients mail et webmail interprètent correctement les tableaux.
Aucun style ne doit être déclaré dans la balise < head > et n'utilisez pas non plus de feuille de style externe. Il va falloir malheureusement déclarer tous les styles CSS dans les balises au sein même du contenu, par exemple :
< td style="color:#000; background-color:#CCC;" > Mon texte < td >
Tout d'abord la source de l'image doit être en absolu, ex : http://www.atiweb.fr/images/logos/atiweb-150.jpg
Ensuite précisez les paramètres width et height, cela vous évitera quelques mauvaises surprises. N'oubliez pas non plus les balises alt et title : beaucoup de clients mail désactive les images par défaut, le texte alternatif sera alors affiché et pourra inciter les utilisateurs à activer le chargement des médias.
Autres attributs à ajouter : border="0" pour éviter les bordures bleues ainsi que le paramètre style="display:block;", sous certains webmail (notamment Gmail) une bande blanche apparait sur le haut et le bas de l'image, ce paramètre va fixer correctement la place que doit prendre la balise.
Au final vous allez avoir une balise image de ce type :
< img src="http://www.atiweb.fr/images/logos/atiweb-150.jpg" width="150" height="102" alt="Atiweb" title="Atiweb" border="0" style="display:block;" />
Vous souhaitez mettre des fonds qui se répètent en X ou Y ? ... à oublier car Outlook 2007 et 2010 ne prend pas en compte les images de fond : background-image.
Il faudra utiliser les balises < img >, placer une image par cellule de tableau et exporter votre fond à la bonne taille.
Quelques bons liens qui développent les techniques à mettre en oeuvre et les pièges à éviter lors de la phase de mise en page HTML / CSS :
Un tableau beaucoup plus complet au format PDF :
article publié le 19-09-2011 par Stéph / Atiweb
