Newsletter, problèmes affichage dans les webmail

Tonio the best · 26 Août 2008

Bonjour,
J'ai créé une Newsletter avec iWeb ici : www.touchmods.fr/Newsletter
Mais voilà, j'ai des problèmes d'affichage dans Gmail, Yahoo et msn, les webmails principaux quoi... pourtant, Mail et l'iPhone sortent ma newsletter comme elle doit sortir.
Je sais que Gmail fait apparemment sauter les balises CSS et qu'il faut donc tout faire à la main dans un éditeur.
A la limite, je me fiche de ça, le problème principal est que les images se superposent.

Voici mon code :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="Generator" content="iWeb 2.0.4" />
<meta name="iWeb-Build" content="local-build-20080825" />
<meta name="viewport" content="width=600" />
<title>Newsletter n°1 des Internationales de la Guitare 2008 de Montpellier.</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="http://www.touchmods.fr/Newsletter/Newsletter_files/Newsletter.css" />

<script type="text/javascript" src="http://www.touchmods.fr/Newsletter/Scripts/iWebSite.js"></script>
<script type="text/javascript" src="http://www.touchmods.fr/Newsletter/Scripts/iWebImage.js"></script>
<script type="text/javascript" src="http://www.touchmods.fr/Newsletter/Newsletter_files/Newsletter.js"></script>
</head>
<body style="background: #ffffff; margin: 0pt; " onload="onPageLoad();">
<div style="text-align: center; ">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; text-align: left; width: 600px; " id="body_content">
<div style="background: transparent url(http://www.touchmods.fr/Newsletter/Newsletter_files/backgroundimage_1.png) no-repeat scroll center center; width: 600px; ">
<div style="float: left; margin-left: 0px; position: relative; width: 600px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="bumper">*</div>
<div style="clear: both; height: 0px; line-height: 0px; " class="spacer">*</div>
</div>
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 600px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper">*</div>
</div>
<div style="margin-left: 0px; position: relative; width: 600px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper">*</div>
<div id="id1" style="height: 724px; left: -4px; position: absolute; top: 122px; width: 608px; z-index: 1; " class="style_SkipStroke">
<div class="text-content graphic_textbox_layout_style_default_External_608_724" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
La 13ème édition du festival des Internationales de la Guitare ouvre la saison culturelle 2008 à Montpellier du 30 septembre au 18 octobre prochain. 
* 
15 grands concerts 
Figures mythiques et virtuoses comme <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" title="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">Suzanne Vega</a>, <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" title="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">Richie Havens</a>, <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" title="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">John Williams</a>, <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" title="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">Tomatito</a> honoreront les grandes salles de concert de Montpellier. <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" title="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">L,Opéra Rom</a>, création du festival, mettra en scène la rencontre des musiques manouches et tziganes. <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" title="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">Robben Ford</a> donnera son unique concert en France et <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" title="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">Biréli Lagrène</a> présentera pour la première fois son nouveau projet «*Electric Side*». 
* 
11ème salon International de la Lutherie (entrée libre) 
Du 10 au 12 octobre, grand public et professionnels auront l,occasion de constater que l,art de la <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/luthier_salon/salon.html" title="http://www.internationalesdelaguitare.com/luthier_salon/salon.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">fabrication</a> de la guitare est en perpétuelle évolution, aussi bien terme de formes, de matériaux, de techniques que de sonorités. 
<a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/presentation_fullscreen.html" title="http://www.internationalesdelaguitare.com/presentation_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">Au programme</a> : démonstrations, concerts, conférences... 
* 
Master classes et stages (inscriptions au 04 67 66 36 55) 
Ils couvrent la plupart des genres de guitare (blues, manouche, classique, jazz, guitare basse) et sont dirigés par des maîtres en la matière (Robben Ford, Eduardo Isaac, Gérard Pansanel, Frédéric Monino, Pascal Corriu). Sans oublier le stage gratuit <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/ateliers_fullscreen.html" title="http://www.internationalesdelaguitare.com/ateliers_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">d,initiation</a> à la guitare pour les plus jeunes par Sylvie Roux, ainsi que le stage de <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/ateliers_fullscreen.html" title="http://www.internationalesdelaguitare.com/ateliers_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">lutherie</a>, dirigé par Joël Laplane, un des plus grands maîtres luthier français et européen. 
* 
Musique pour tous et partout ! 
Au travers du <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/parallele/pics/parallele_fullscreen.html" title="http://www.internationalesdelaguitare.com/parallele/pics/parallele_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">Festival Para//èle</a> 64 lieux de convivialité de la ville donneront des concerts gratuits. Guitares Pour Tous (13 concerts dans 13 Maisons Pour Tous) fera tomber les barrières avec des rencontres entre artistes et public. 
Les <a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com/scenes_lr/scene_lr_fullscreen.html" title="http://www.internationalesdelaguitare.com/scenes_lr/scene_lr_fullscreen.html" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">Scènes de l,Agglo</a> et du Languedoc-Roussillon offrent 10 concerts dans 10 communes. 
* 
* 
Contact : 
04 67 66 36 55 
<a href="mailto:[email protected]?subject=Contactez%20les%20Internationales%20de%20la%20Guitare" title="mailto:[email protected]?subject=Contactez les Internationales de la Guitare" style="line-height: 18px; " class="style_2">[email protected]</a> 
* 
Contact presse : 
04 67 66 76 62 
<a href="mailto:[email protected]" title="mailto:[email protected]" style="line-height: 18px; " class="style_2">[email protected]</a> 
* 
* 
<a onkeypress="window.open(this.href); return false;" href="http://www.internationalesdelaguitare.com" title="http://www.internationalesdelaguitare.com" onclick="window.open(this.href); return false;" style="line-height: 15px; " class="style">www.internationalesdelaguitare.com</a> 
<a onkeypress="window.open(this.href); return false;" href="http://myspace.com/lesinternationalesdelaguitare" title="http://myspace.com/lesinternationalesdelaguitare" onclick="window.open(this.href); return false;">myspace.com/lesinternationalesdelaguitare </a>
<a onkeypress="window.open(this.href); return false;" href="http://www.facebook.com/group.php?gid=16569994483" title="http://www.facebook.com/group.php?gid=16569994483" onclick="window.open(this.href); return false;">http://www.facebook.com/group.php?gid=16569994483 </a>
* 
* 
Conformément à la Loi Informatique et Libertés, si vous ne souhaitez plus recevoir cette newsletter, retournez un e-mail en cliquant sur : 
<a href="mailto:[email protected]?subject=D%C3%A9sinscription" title="mailto:[email protected]?subject=Désinscription" style="line-height: 10px; " class="style_6">[email protected]</a> 
©2008 Les Internationales de la Guitare, Confluences Newsletter créée par <a href="mailto:[email protected]?subject=Contact%20Newsletter" title="mailto:[email protected]?subject=Contact Newsletter">Antoine Dematté</a>
</div>
</div>
</div>

<div style="height: 103px; width: 172px; height: 103px; left: -3px; position: absolute; top: 25px; width: 172px; z-index: 1; " class="tinyText style_SkipStroke_1 stroke_0">
<img src="http://www.touchmods.fr/Newsletter/Newsletter_files/LogoIg08.png" alt="" style="border: none; height: 104px; width: 172px; " />
</div>

<div style="height: 101px; width: 132px; height: 101px; left: 467px; position: absolute; top: 30px; width: 132px; z-index: 1; " class="tinyText style_SkipStroke_1 stroke_0">
<img src="http://www.touchmods.fr/Newsletter/Newsletter_files/postit2008.png" alt="" style="border: none; height: 102px; width: 132px; " />
</div>

<div id="id2" style="height: 27px; left: 83px; position: absolute; top: 0px; width: 433px; z-index: 1; " class="style_SkipStroke">
<div class="text-content graphic_textbox_layout_style_default_External_433_27" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
<a onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" class="class1" href="http://www.touchmods.fr/Newsletter" title="Visualiser la Newsletter dans votre navigateur">Cliquez ici si vous ne visualisez pas la Newsletter correctement.</a>
</div>
</div>
</div>
<div style="height: 850px; line-height: 850px; " class="spacer">*</div>
</div>
<div style="height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 600px; z-index: 15; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper">*</div>
</div>
</div>
</div>
</div>
</body>
</html>

J'ai également lu que je pouvais le faire avec des tableaux, je n'ai pas le temps de chercher comment ça marche et je dois envoyer cette newsletter ce soir... Ou alors utiliser le PHP que je ne connais pas non plus...
Si quelqu'un pouvait m'aider, cela me rendrait bien service !
merci d'avance !

nroK · 26 Août 2008

C'est tes feuilles de styles qui ne sont pas prises en compte, on en a deja discuté dans certains topic...

Si tu veux inclure des styles, indique les directement dans le html

Anonyme · 26 Août 2008

Tu devrais utiliser les balises

Bloc de code:

 quand tu colles de l'html dans le forum, c'est plus lisible. Sinon ouais... 

[LIST]
[*]Déjà le javascript ne sera pas actif dans les clients mails traditionnels
[*]La déclaration xml en début est à virer ça fait déconner certains clients mail basé sur IE.
[*]Les styles doivent être inline (ce qui est ton cas en partie)
[*]Il faut utiliser [URL="http://openweb.eu.org/articles/respecter_semantique"]la sémantique html[/URL] au cas où les styles sautent complètement ce qui assure aussi une meilleure accessibilité...
[*][URL="http://www.pompage.net/pompe/emails-html-dompter-la-bete/"]Etc[/URL], [URL="http://blog.alsacreations.com/2008/06/12/417-e-mail-et-css-du-nouveau"]etc[/URL].
[/LIST]
;)

Anonyme · 26 Août 2008

Entre parenthèses, il y en a du code pour une newsletter aussi simple

Je parie que tu utilises dreamweaver ou golive...

Vive l'éditeur de texte.

Tonio the best · 26 Août 2008

iWeb, je crois l'avoir mis plus haut !
Modifié avec Smultron, pour moi le meilleur éditeur ! Simple et efficace...
Merci de vos conseils, je vais tenter !

Tonio the best · 27 Août 2008

Arf, je m'avoue vaincu et nul en HTML ^^' ! Quand j'essaye de changer le code, les webmails classent mon mail comme indésirable... Je ne dois pas le faire correctement, quelqu'un serait-il assez bon pour m'aider =D ?

Anonyme · 27 Août 2008

Ouais mais vite fait alors... Je reviens...

Anonyme · 27 Août 2008

Voilà :

Bloc de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<style type="text/css">
<!--
strong {
    color: #E87C1D;
}
a {
    color: #000;
}
sup {
    ligne-heigth: 66%;
}
-->
</style>
<div id="wrapper" style="background-color: #fff; text-align: center; font-size: 0.9em; color: #245FB6; font-family: arial, helvetica, sans serif;">
    <div id="content" style="margin: auto; text-align: left; width: 600px; background: #fff url(http://www.touchmods.fr/Newsletter/Newsletter_files/backgroundimage_1.png) center center no-repeat; font-weight: bold;">
        <h1 style="float: left;"><img src="http://www.touchmods.fr/Newsletter/Newsletter_files/LogoIg08.png" alt="Les treizièmes internationales de la guitare (Montpellier)" /></h1>
        <p style="float: right;"><img src="http://www.touchmods.fr/Newsletter/Newsletter_files/postit2008.png" alt="Du 30 septembre au 18&nbsp;octobre 2008, Montpellier &amp; Lattes" /></p>
        <hr style="clear: both; visibility: hidden" />
        <p>La 13<sup>e</sup>&nbsp;édition du festival des <strong>Internationales de la Guitare</strong> ouvre la saison culturelle 2008 à Montpellier du 30 septembre au 18&nbsp;octobre prochain.</p>

        <h2 style="color: #E87C1D; font-size: 1em; margin-top: 1.5em;">15&nbsp;grands concerts</h2>
        <p>Figures mythiques et virtuoses comme <a href="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html">Suzanne Vega</a>, Richie Havens, John Williams, Tomatito honoreront les grandes salles de concert de Montpellier. L,Opéra Rom, création du festival, mettra en scène la rencontre des musiques manouches et tziganes. Robben Ford donnera son unique concert en France et Biréli Lagrène présentera pour la première fois son nouveau projet « Electric Side ».</p>
        

        <h2 style="color: #E87C1D; font-size: 1em; margin-top: 1.5em;">15&nbsp;grands concerts</h2>
        <p>Figures mythiques et virtuoses comme <a href="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html">Suzanne Vega</a>, Richie Havens, John Williams, Tomatito honoreront les grandes salles de concert de Montpellier. L,Opéra Rom, création du festival, mettra en scène la rencontre des musiques manouches et tziganes. Robben Ford donnera son unique concert en France et Biréli Lagrène présentera pour la première fois son nouveau projet « Electric Side ».</p>

        <h2 style="color: #E87C1D; font-size: 1em; margin-top: 1.5em;">15&nbsp;grands concerts</h2>
        <p>Figures mythiques et virtuoses comme <a href="http://www.internationalesdelaguitare.com/grandconcert_fullscreen.html">Suzanne Vega</a>, Richie Havens, John Williams, Tomatito honoreront les grandes salles de concert de Montpellier. L,Opéra Rom, création du festival, mettra en scène la rencontre des musiques manouches et tziganes. Robben Ford donnera son unique concert en France et Biréli Lagrène présentera pour la première fois son nouveau projet « Electric Side ».</p>
    </div>

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

J'ai pas tout fait, juste le premier titre avec le texte en dessous, puis j'ai répété, mais tu as déjà une idée. Pour mettre les mots en orange, faut les mettre en gras . À toi de modifier le reste. Attention tu as des png 24bits avec fonds transparents qui ne passe pas dans les moteurs avec IE6.

Tonio the best · 27 Août 2008

Merci à toi brave chevalier !
J'emmerd* IE ! Vive Safari... Non, mais, de toute façon, la plupart des clients recevra le mail dans un client mail comme Outlook ou Mail, c'est juste en complément...
Je teste et je te dis !
Merci encore...

Edit : tout semble parfait ! Merci beaucoup !

nroK · 27 Août 2008

Vérifie aussi sur gmail et hotmail, mine de rien c'est fort utilisé ces boites mails

Anonyme · 28 Août 2008

Sur hotmail (via le webmail) les images de fond vont sauter, sur gmail (aussi via le webmail), beaucoup de choses vont sauter mais c'est pas grave puisque le code est sémantique et que l'attribut alt des images est bien renseigné. Il n'y a pas de pertes d'information.

p4bl0 · 28 Août 2008

Outlook utilise certainement le moteur de rendu du IE installé sur le windows, donc ie6 risque d'être encore pas mal présent :-/

Anonyme · 28 Août 2008

L'avant dernière d'Outlook utilisait le moteur d'IE6, la dernière... Celle de word 2007...

fredmac75 · 28 Août 2008

Cela eu été préférable que ce soit celui d'ie, malheureusement c'est pire...
C'est le moteur de rendu de word 2007 (pour outlook 2007)

Ayant travaillé sur du mailling pour Microsoft France, je peux vous assurer que l'une de leur exigence de rendu et de pouvoir ouvrir le dit mail sur Word...

je ne suis pas resté longtemps dans cette agence...

Tout est possible en ce monde

EDIT : grilled by gloup-gloup...

p4bl0 · 29 Août 2008

Ce qui est abérant c'est surtout que Word et IE ai un moteur de rendu différent...

Putain ils sont con pour de bon chez Crosoft...

Anonyme · 29 Août 2008

C'est normal dans un sens puisque tu peux faire des pages web avec word mais mettre ce moteur (forcément limité) pour outlook, non. Je préfère 10 fois mieux avoir le moteur d'IE6.

p4bl0 · 29 Août 2008

Le moteur de rendu de Word pourrait quand même être le même que celui de IE, c'est juste que leur truc est mal foutu ! (Suffirait de faire un moteur différent pour la génération de code et le rendu du code, ça demande certaiement pas plus de travaille que de faire de moteurs différents tout court...).

Bref, c'est le caca et on y peut rien de toutes façons, faut faire avec, ou pas...

(vive les mails au format text !!)

Anonyme · 29 Août 2008

Reste plus à espérer que thunderbird gagne du terrain comme firefox pour le web.

De toutes façons, je m'en fous, quand je fais une newsletter j'essaye de prévoir les trucs qui vont sauter et je fais en sorte que le lecteur ait accès à toute l'information et tant pis s'il a un client mail de m... Du moment que ça reste présentable et que ça se dégrade bien...

Newsletter, problèmes affichage dans les webmail

Tonio the best

Membre actif

nroK

Membre actif

Anonyme

Invité

Anonyme

Invité

Tonio the best

Membre actif

Tonio the best

Membre actif

Anonyme

Invité

Anonyme

Invité

Tonio the best

Membre actif

nroK

Membre actif

Anonyme

Invité

p4bl0

Membre expert

Anonyme

Invité

fredmac75

Membre expert

p4bl0

Membre expert

Anonyme

Invité

p4bl0

Membre expert

Anonyme

Invité

Sujets similaires