METTEZ UN PEU DE PIMENT!

Publié : 8 années

Code et mise en forme

Concernant le code CSS de mise en forme de votre newsletter que ce soit pour une mise en forme en tableau ou en CSS. Il va falloir être très pointilleux sur la manière de coder…

Je ne vais pas ici, vous apprendre à coder en HTML, je pars du principe que tout ça est acquis. Pour les SRZiens, sortez vos cours de l’ami Papal !
Je vais faire une petite énumération des choses indispensables à respecter pour obtenir un affichage correct sur la majorité des webmails et logiciels de mails.

  • Première chose, on ne fait que des liens absolus pour tous les éléments (images, PDF…) qui sont dans la newsletter, soit des http://www.zaide.fr/monimage.jpg.
  • Ensuite, on prend soin de créer ces propres noms de balises qui sortent de l’ordinaire et on oublie les classiques : content, header, footer…
    Le mieux est peut-être de passer par un court exemple, je me suis retrouvée une fois avec un souci sur le Webmail Orange qui intégrait son propre CSS dans ma newsletter HTML. J’avais nommé une balise div footer et Orange a aussi sa balise div footer sur son site, donc ça prenait en compte le CSS d’Orange et pas le mien. Du coup je me retrouvais avec des barres oranges dans ma newsletter… La solution est toute bête, il faut absolument penser à donner des noms précis à vos balises en évitant le classique div#header ou div#footer et en préférant div#header-manewsletter ou div#footer-manewsletter. Comme ça le tour est joué, plus de mélange entre votre code et celui du Webmail.
  • Troisième point, concernant l’intégration du CSS, personnellement face à la destruction complète de mon code par certains Webmails, j’ai choisi d’opter pour plusieurs solutions. J’intègre mon CSS de toutes les manières possibles, au moins ça me rassure et je me dis qu’il y aura au moins une partie du code qui survivra. J’intègre un fichier externe CSS qui contient tout le code CSS avec un lien absolu dans la traditionnelle balise link positionnée dans le HEAD. Ce qui donne un , alors il paraît que ça n’est jamais pris en compte mais au moins elle existe et moi je suis rassurée lol !
    En plus de ça, je récupère tout le contenu de ce fichier CSS et l’intègre une nouvelle fois dans une balise <style></style> dans le HEAD. Il semble qu’Hotmail supprime tout le code qui se trouve entre <html> et <body> soit toutes les balises d’identifications des pages comme <title>, <meta>, <style>. Certains internautes ont choisi du coup de rajouter la balise <style> après le <body>.
    Et la solution ultime, la plus pénible de toutes, l’ajout de la balise style pour chaque balise HTML. C’est un travail long et fastidieux mais il faut bien le dire : un travail payant… Ainsi chaque balise devra avoir son style et ses attributs. On aura donc un body qui ressemblera à <body style=> ou <div style=> et pire à <font style=>. Et ça pour toutes les balises…
  • Vis-à-vis d’Hotmail qui supprime la balise body, là aussi, certains internautes essayent de contourner ce problème en créant une balise div générale qui contient les mêmes attributs que le body. Je trouve l’idée intéressante et je l’applique à chaque fois, en créant ma <div#rebody> qui finalement est identique à body. Cela me permet de redélimiter la taille de ma newsletter et d’assurer un bon affichage en cas de la suppression du body. J’en fais de même pour la balise <html> en redélimitant ma newsletter par une balise <div>.

Finalement, le plus pénible c’est que chaque logiciel ou Webmail fait son mic-mac et comprend à sa manière l’email HTML. Certains comprennent la balise background-image d’autres non !

En quelques année de recherches, plusieurs ressources pour la création de newsletters sont apparus, pas la peine de les réécrire, elles sont complètes et extrêmement biens. Donc je vous renvoie sur le site Campaign Monitor qui met à votre disposition la liste des balises CSS comprises et incomprises par les logiciels de messageries et Webmails (attention, le document date de 2008 donc il ne contient que les logiciels et versions de logiciels disponibles à cette date, il a pu y avoir des évolutions pour certains).

Edit et réponse à Nico :
Mon code ressemble à :
<html>
<div id="re-html">
<body>
<div id="re-body">
</div>
</body>
</div>
</html>

En sachant que la div re-html est identique à <html> et la re-body à <body>.

Retourner au dossier sur la création d’une newsletter.

2 Commentaires.
  1. Nicolas dit :

    Si j’ai bien saisi ton code ressemble un peu à ça :

    <html
    <body
    <div id:htmleu
    <div id:body

    le code et le contenu de ta news

    </div
    </div
    </body
    </html

  2. Tam dit :

    La réponse dans l’EDIT à la fin du post.

Laisser un commentaire ?

Some HTML is OK