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
  élodie finocchiaro  /  13-01-2015
Une question: est-ce que vous avez essayé des logiciels pour la création des newsletters genre MailStyler? (www.newslettercreator.com). Il permet de composer des belles mises en page sans avoir à coder... Qu'est-ce que vous en pensez?
  Marie  /  18-05-2015
Bonjour à tous,

une petite question. Je suis bien consciente qu'il ne faut pas utiliser les styles CSS dans la balise .. Je maîtrise à peu près les inline css pour les intégrer dans les éléments concernés (Tableau, image, etc) mais j'essaie de eadapter nos templates de newsletters pour qu'ils soient responsive.. Et là je ne trouve pratiquement que des infos à indiquer dans la balise . Notamment sur les changements de taille de police en fonction de la taille de l'écran.. Pour les images et les tableaux je m#en sors avec les inline CSS mais pour adapter la taille de police, je n'y arrive pas ou plutôt je ne trrouve pas d'infos (ou je ne suis juste pas douée pour chercher..)

Quelqu'un pourrait-il éclairer ma lanterne sur le sujet ?

Merci par avance.

Bonne journée à tous
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 18824 fois
Actualités
Recherche

Catégories

Liens

Les articles au top !




Derniers commentaires
Commentaire de Marie
Bonjour à tous, une petite question. Je suis...
Commentaire de Richard
Cela donne de bonnes idées marketing...
Commentaire de élodie finocchiaro
Une question: est-ce que vous avez essayé...
...
blog.atiweb.fr Mentions légales Agence Web Atiweb ...
103 actualités sur le blog
44 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