Atiweb Blog
internet, graphisme, développement web, référencement, jeux, cinéma, tv, ...
actualité, événement, analyse, coup de coeur, ...
Atiweb sur Facebook
Atiweb sur Twitter
Flux RSS d'Atiweb
Chaine Youtube d'Atiweb

Mise en page HTML / CSS dans une newsletter

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)

 

Les conseils de l'agence Atiweb

Voici quelques conseils afin de concevoir une lettre d'information visible sur tous les supports.

 

Eléments à éviter

  • JavaScript, animation Flash ou Silverlight
  • Toutes les propriétes CSS 3 : bords arrondis, ombres, opacité, ...
  • Le postionnement en absolu (top, left, ...) et les élements flottants (float)

 

Mise en forme avec des tableaux

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.

 

Les styles CSS

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 >

 

Les images dans une newsletter

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;" />

 

Et les fonds dans tout cela

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.

 

Liens complémentaires

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 :

Partager l'article sur
html / css
article publié le 19-09-2011 par Stéph /
Catégorie : Développement
Commentaires
  jc marie  /  17-01-2014
Voilà
Je découvre (victime ....) de cette incompatibilité
Grrrrrrr
Nom
 
Adresse e-mail
(ne sera pas publié)
 
Site Internet
(facultatif)
 
Votre message
 
Code de vérification
Captcha Recharger l'image
Recopiez le code ci-dessus
 
 

 


Mise en page HTML / CSS dans une newsletter
Cette actualité a été lue 15085 fois
Actualités
Recherche

Catégories

Liens

Les articles au top !




Derniers commentaires
Commentaire de Johanna
C'est mon chat qui va être content ^^
Commentaire de Altospam
Original comme concept!
Commentaire de jc marie
Voilà Je découvre (victime ....)...
...
blog.atiweb.fr Mentions légales Agence Web Atiweb ...
102 actualités sur le blog
40 commentaires de visiteurs
Mise en page HTML / CSS dans une newsletter - Développement
Atiweb Blog / Web / Internet / Référencement / Positionnement / Moteur de recherche / Graphisme / HTML / CSS