Newsletter mal découpée dans les clients mail

Newsletter mal découpée dans les clients mail - HTML/CSS - Programmation

Marsh Posté le 14-01-2008 à 14:54:43    

Bonjour,
 
J'ai effectué une newsletter html pour un futur client que je viens de terminer.
Au final, cela est parfaitement lisible dans thunderbird, sur firefox et safari.
Lorsque je fait le test sur hotmail et gmail le decoupage est un peu foireux.
Je voulais savoir qu'est ce qui ne va pas dans les webmails ?
Je n'utilise pourtant que de l'HTML.
Mon client l'a testé et pareil, des lignes découpés et des decallages d'images.
 
S'agit il de mon decoupage qui est foireux ? mauvaise interpretation du découpage par les clients mails ?
Je suis directeur artistique mais exceptionnellement je dois tout faire. Je n'ai pas eu de formation dédiée à la programmation c'est pour ça que je demande de l'aide.
Derniere question : les images découpées doivent elles etre envoyé avec le mail ou doivent elles etre hébérgé en ligne ?  
Merci


Message édité par ludo2604 le 14-01-2008 à 15:05:02
Reply

Marsh Posté le 14-01-2008 à 14:54:43   

Reply

Marsh Posté le 14-01-2008 à 15:10:43    

Euh, t'espère sincèrement une réponse avec des éléments aussi vagues ? Ça dépend du HTML que t'envoie évidemment ...

Reply

Marsh Posté le 14-01-2008 à 15:20:08    

Alors je suis parti de Photoshop CS3, puis decoupe en tranche avec image ready et un minimum d'optimisation dans Dreamweaver au niveau du background. L'html c'est du tableau tout bete avec du img bckg et img src dedans, donc tout est millimetre.

Reply

Marsh Posté le 14-01-2008 à 17:05:48    

Pas de possiblité d'image en background dans les newsletter pour commencer.
Et pour continuer, tu devrais nous donner ton code

Message cité 1 fois
Reply

Marsh Posté le 14-01-2008 à 19:43:56    

David Boring a écrit :

Pas de possiblité d'image en background dans les newsletter pour commencer.
Et pour continuer, tu devrais nous donner ton code


 
Je ne le savais pas. Que de l'img src donc ?! c'est embettant ça :/
Pour le code, le voici un bout puisqu'il est assez long :
 


<html>
<head>
<title>realtime - decoup</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
.Style1 {
 font-family: verdana;
 font-size: 13px;
 font-weight: bold;
 color: #936519;
}
body {
 background-image: url(images/bg.gif);
}
.Style2 {
 font-family: verdana;
 font-size: 10px;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (realtime - decoup.psd) -->
<table width="1025" height="1301" border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_01">
<tr>
  <td colspan="36" background="images/img_010.gif">&nbsp;</td>
<td>
   <img src="images/spacer.gif" width="1" height="11" alt=""></td>
 </tr>
 <tr>
  <td rowspan="38">
   <img src="images/img_020.gif" width="100" height="1289" alt=""></td>
<td colspan="2">
   <img src="images/img_03.gif" width="17" height="24" alt=""></td>
  <td>
   <img src="images/img_04.gif" width="9" height="24" alt=""></td>
  <td colspan="16">
   <img src="images/img_05.gif" width="484" height="24" alt=""></td>
  <td colspan="14">
   <img src="images/img_06.gif" width="278" height="24" alt=""></td>
  <td rowspan="11">
   <img src="images/img_070.gif" width="13" height="560" alt=""></td>
<td rowspan="38">
   <img src="images/img_080.gif" width="123" height="1289" alt=""></td>
<td>
   <img src="images/spacer.gif" width="1" height="24" alt=""></td>
 </tr>
 <tr>
  <td rowspan="9">
   <img src="images/img_09.gif" width="16" height="509" alt=""></td>
  <td colspan="2" rowspan="2">
   <img src="images/img_10.gif" width="10" height="110" alt=""></td>
  <td colspan="4">
   <img src="images/img_11.gif" width="94" height="69" alt=""></td>
  <td colspan="4">
   <img src="images/img_12.gif" width="142" height="69" alt=""></td>
  <td colspan="5">
   <img src="images/img_13.gif" width="142" height="69" alt=""></td>
  <td colspan="4">
   <img src="images/img_14.gif" width="108" height="69" alt=""></td>
  <td colspan="8">
   <img src="images/img_15.gif" width="137" height="69" alt=""></td>
  <td colspan="5">
   <img src="images/img_16.gif" width="139" height="69" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="69" alt=""></td>
 </tr>
 <tr>
  <td colspan="4">
   <img src="images/img_17.gif" width="94" height="41" alt=""></td>
  <td colspan="2">
   <img src="images/img_18.gif" width="66" height="41" alt=""></td>
  <td width="326" height="41" colspan="11" bgcolor="#FEEFE1">&nbsp;</td>
  <td colspan="8">
   <img src="images/img_20.gif" width="137" height="41" alt=""></td>
  <td colspan="5" rowspan="2">
   <img src="images/img_21.gif" width="139" height="63" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="41" alt=""></td>
 </tr>
 <tr>
  <td rowspan="2">
   <img src="images/img_22.gif" width="1" height="30" alt=""></td>
  <td rowspan="2">
   <img src="images/img_23.gif" width="9" height="30" alt=""></td>
  <td width="623" colspan="25" rowspan="2" background="images/img_240.gif">
   <img src="images/img_240.gif"  height="30" alt=""></td>
<td>
   <img src="images/spacer.gif" width="1" height="22" alt=""></td>
 </tr>
 <tr>
  <td colspan="5">
   <img src="images/img_25.gif" width="139" height="8" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="8" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="5">
   <img src="images/img_26.gif" width="10" height="369" alt=""></td>
  <td width="302" height="57" colspan="12" bgcolor="#FFFAE2">&nbsp;</td>
  <td width="442" height="369" colspan="15" rowspan="5" bgcolor="#FFFAE1"><div>  
  <div align="center"><a href="http://purcity.free.fr/creas/Discovery/newsletter.html"><img src="http://purcity.free.fr/creas/Discovery/images/capture.jpg" alt="" border="0"></a></div>
  </div></td>
  <td colspan="3" rowspan="5">
   <img src="images/img_290.gif" width="18" height="369" alt=""></td>
<td>
   <img src="images/spacer.gif" width="1" height="57" alt=""></td>
 </tr>
 <tr>
  <td colspan="12">
   <img src="images/img_30.gif" width="302" height="51" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="51" alt=""></td>
 </tr>
 <tr>
  <td width="302" height="25" colspan="12" bgcolor="#FFFAE2">&nbsp;</td>
  <td>
   <img src="images/spacer.gif" width="1" height="25" alt=""></td>
 </tr>
 <tr>
  <td width="50" height="236" colspan="3" rowspan="2" bgcolor="#FFFAE1">&nbsp;</td>
  <td colspan="6">
   <img src="images/img_33.gif" width="205" height="204" alt=""></td>
  <td width="47" height="236" colspan="3" rowspan="2" bgcolor="#FFFAE1">&nbsp;</td>
  <td>
   <img src="images/spacer.gif" width="1" height="204" alt=""></td>
 </tr>
 <tr>
  <td width="205" height="32" colspan="6" bgcolor="#FFFAE2">&nbsp;</td>
  <td>
   <img src="images/spacer.gif" width="1" height="32" alt=""></td>
 </tr>
 <tr>
  <td colspan="6" rowspan="2">
   <img src="images/img_36.gif" width="76" height="45" alt=""></td>
  <td colspan="2" rowspan="2">
   <img src="images/img_37.gif" width="103" height="45" alt=""></td>
  <td colspan="4" rowspan="2">
   <img src="images/img_38.gif" width="102" height="45" alt=""></td>
  <td colspan="3" rowspan="2">
   <img src="images/img_39.gif" width="47" height="45" alt=""></td>
  <td colspan="2" rowspan="2" background="images/img_400.gif">&nbsp;</td>
<td rowspan="2">
   <img src="images/img_41.gif" width="24" height="45" alt=""></td>
  <td colspan="12" rowspan="2" background="images/img_420.gif">&nbsp;</td>
<td colspan="3" rowspan="2">
   <img src="images/img_43.gif" width="18" height="45" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="27" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/img_44.gif" width="13" height="18" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="18" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="2">
   <img src="images/img_450.gif" width="17" height="162" alt=""></td>
<td colspan="4">
   <img src="images/img_46.jpg" width="59" height="32" alt=""></td>
  <td colspan="2">
   <img src="images/img_47.jpg" width="103" height="32" alt=""></td>
  <td colspan="4">
   <img src="images/img_48.jpg" width="102" height="32" alt=""></td>
  <td colspan="3">
   <img src="images/img_49.jpg" width="47" height="32" alt=""></td>
  <td colspan="2">
   <img src="images/img_50.jpg" width="127" height="32" alt=""></td>
  <td>
   <img src="images/img_51.jpg" width="24" height="32" alt=""></td>
  <td colspan="8">
   <img src="images/img_52.gif" width="126" height="32" alt=""></td>
  <td colspan="3">
   <img src="images/img_53.gif" width="105" height="32" alt=""></td>
  <td>
   <img src="images/img_54.gif" width="60" height="32" alt=""></td>
  <td colspan="3">
   <img src="images/img_55.gif" width="18" height="32" alt=""></td>
  <td>
   <img src="images/img_56.gif" width="13" height="32" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="32" alt=""></td>
 </tr>
 <tr>
  <td colspan="4" rowspan="2">
   <img src="images/img_57.jpg" width="59" height="143" alt=""></td>
  <td colspan="2" rowspan="2">
   <img src="images/img_58.jpg" width="103" height="143" alt=""></td>
  <td colspan="4" rowspan="2">
   <img src="images/img_59.jpg" width="102" height="143" alt=""></td>
  <td colspan="3" rowspan="2">
   <img src="images/img_60.jpg" width="47" height="143" alt=""></td>
  <td colspan="2" rowspan="2">
   <img src="images/img_61.jpg" width="127" height="143" alt=""></td>
  <td rowspan="2">
   <img src="images/img_62.jpg" width="24" height="143" alt=""></td>
  <td colspan="8" rowspan="2">
   <img src="images/img_63.gif" width="126" height="143" alt=""></td>
  <td colspan="3" rowspan="2">
   <img src="images/img_64.gif" width="105" height="143" alt=""></td>
  <td rowspan="2">
   <img src="images/img_65.gif" width="60" height="143" alt=""></td>
  <td colspan="3" rowspan="5">
   <img src="images/img_66.gif" width="18" height="244" alt=""></td>
  <td rowspan="5">
   <img src="images/img_670.gif" width="13" height="244" alt=""></td>
<td>
   <img src="images/spacer.gif" width="1" height="130" alt=""></td>
 </tr>
 <tr>
  <td colspan="2">
   <img src="images/img_68.gif" width="17" height="13" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="13" alt=""></td>
 </tr>
 <tr>
  <td colspan="4" rowspan="2">
   <img src="images/img_690.gif" width="29" height="96" alt=""></td>
   <td width="741" height="84" colspan="26" bgcolor="#FDF8CE"><div align="justify"><span class="Style1">Dans cette nouvelle &eacute;mission fran&ccedil;aise, c&rsquo;est le d&eacute;fi que rel&egrave;ve Fran&ccedil;ois Leverne chaque semaine en aidant des particuliers &agrave; am&eacute;nager leur chez-soi avec inventivit&eacute; et sans d&eacute;penser des fortunes ! Avec 500 euros en poche et une journ&eacute;e pour r&eacute;aliser les travaux, l&rsquo;expert d&eacute;co de Discovery Real Time, accompagn&eacute; de Nathalie et Sophie , bricole, am&eacute;nage et prodigue ses bons conseils et astuces pour transformer son chez soi &agrave; moindres frais !</span></div></td>
<td>
   <img src="images/spacer.gif" width="1" height="84" alt=""></td>
 </tr>
 <tr>
  <td colspan="6" rowspan="3">
   <img src="images/img_71.jpg" width="188" height="67" alt=""></td>
  <td colspan="20" rowspan="3" background="images/img_720.gif">&nbsp;</td>
<td>
   <img src="images/spacer.gif" width="1" height="12" alt=""></td>
 </tr>
 <tr>
  <td colspan="4" rowspan="6">
   <img src="images/img_73.jpg" width="29" height="108" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="5" alt=""></td>
 </tr>
 etc etc etc
</table>
 <!-- End ImageReady Slices -->
</body>
</html>


 
Sous firefox, IE ou thunderbird, aucun probleme :
http://purcity.free.fr/hs/real0.jpg
 
Sous des webmails comme hotmail(le pire!) par exemple :
http://purcity.free.fr/hs/real1.jpg


Message édité par ludo2604 le 14-01-2008 à 20:34:26
Reply

Marsh Posté le 15-01-2008 à 01:06:05    

c'est pas de cette maniere qu'on fait un emailing, surtout que le tiens est super mal fait

Message cité 1 fois
Reply

Marsh Posté le 15-01-2008 à 01:11:24    

gatsu35 a écrit :

c'est pas de cette maniere qu'on fait un emailing, surtout que le tiens est super mal fait


 
:??: Et c'est tout ?mal fait dans quel sens ?
j'aimerai bien avoir des conseils dans ce cas  :(

Reply

Marsh Posté le 15-01-2008 à 01:14:19    

na pas avoir de balise style
coller les <td><img></td> correctement, ne pas laisser d'espace en gros
déjà fait ca

Reply

Marsh Posté le 15-01-2008 à 01:16:05    

merci bcp, desole mais c'est là premiere fois que je fait ça !
je vais deja optimiser ça...
mais qu'entends tu par "cette maniere" ? il y a d'autre chose que je ne respecte pas ?


Message édité par ludo2604 le 15-01-2008 à 01:18:04
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed