IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

E-Mailing Discussion :

Affichage d'un Emailing sur iphone (us)


Sujet :

E-Mailing

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 7
    Points : 5
    Points
    5
    Par défaut Affichage d'un Emailing sur iphone (us)
    Bonjour à tous,

    J'espère être dans la bonne section.

    J'envoie des Emailings qui sont lus sur ordinateur et sur téléphone.

    J'ai un problème d'affichage sur les iPhones (il semble uniquement sur les iPhone en anglais-américain), mais je ne suis pas certain que les iPhones en français n'aient pas le même problème.

    Le texte de l'mailing est mangé par les images affichées.
    Je joins donc mon code html, afin de montrer ce qui peut clocher.
    (j'ai un saut de ligne en fin de code que je dois virer, mais pour l'instant il est là, j'ai un doute que cela soit dû à ce saut de ligne).
    Je précise que sur ordinateur (PC et Mac) l'Emailing est lu parfaitement.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><SPAN STYLE="" >La nouvelle collections Christiane ToutMou</SPAN></title>
    <meta name="viewport" content="width=device-width">
    </head>
    <body style="margin:auto; width:600px;">
    <P align="center"><img src="http://www.emling.fr/images/articles/v_chaussures_homme_luxe_richelieu_ville_kendrick_noir_2_z.jpg" width="350"></P>
    <P align="left"><SPAN STYLE="font-family: 'Palatino';font-size: 12px;" >Bonjour ,<BR><BR>Les nouvelles chaussures de la collection 2014 sont enfin disponibles ! Le cr&eacute;ateur vient de d&eacute;voiler la campagne de sa collection printemps-&eacute;t&eacute; 2014 photographi&eacute;e par Jack Lamenace qui met en sc&egrave;ne escarpins et minaudi&egrave;res dans un d&eacute;cor de port de p&ecirc;che :<BR><BR>Graphique, color&eacute;e, par&eacute;e d&rsquo;ornements pr&eacute;cieux&hellip; la collection printemps-&eacute;t&eacute; 2014 Christiane ToutMou ne manque pas de fantaisie et d'extravagance.<BR><a href="http://www.bidon.com/fr_fr/">Voir Plus</a></SPAN></P>
    <P align="center"><img src="http://i2.cdscdn.com/pdt2/9/0/4/1/400x400/mp00053904/rw/bristol-chaussure-bleu.jpg" width="300"></P>
    <P align="left"><SPAN STYLE="font-family: 'Palatino';font-size: 12px;" >Un esprit d&eacute;jant&eacute; que l'on </SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;font-weight: bold;" >retrouve</SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;" > dans une </SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;background-color: normal;font-weight: normal;font-style:normal;text-decoration:none;font-variant:normal;letter-spacing: normal;text-transform: none;" >campagne</SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;" > sign&eacute;e </SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;font-weight: bold;" >Jack Lamenace</SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;" > et inspir&eacute;e du surr&eacute;alisme de </SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;font-weight: bold;" >Magritte</SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;" >. Le d&eacute;cor plant&eacute; dans un port de p&ecirc;che donne une vision en extra large de quelques-unes des pi&egrave;ces de cette collection estivale o&ugrave; les poissons accroch&eacute;s &agrave; l&rsquo;hame&ccedil;on de la canne sont en r&eacute;alit&eacute; des souliers et des pochettes.<BR><a href="http://www.tructruc.com">TrucTruc</a></SPAN></P>
     
    </body>
    </html>

    Merci de votre aide,

  2. #2
    Futur Membre du Club
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 7
    Points : 5
    Points
    5
    Par défaut
    Bonjour,

    Pas trop de retour sur ma question...

    La réponse est qu'il semble que des images trop grandes en dimension puissent créer des erreurs d'affichage sur iPhone (ou sur d'autres smartphone) qui ne se produisent pas sur des clients classiques (ordinateurs).

    C'est pourquoi les images sont désormais limitées à 350 pixels dans mon système, afin que les iPhones soient capables de les afficher.

  3. #3
    Modérateur
    Avatar de XxArchangexX
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Mars 2012
    Messages
    1 159
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2012
    Messages : 1 159
    Points : 2 323
    Points
    2 323
    Par défaut
    Bonjour,

    Réponse un peu plus tardive, l'iPhone comme d'autres "hébergeurs" d'emails tel que yahoo, force ton email à rentrer dans l'écran du coup il faut une structure fixe. Au vue de ton code, il y a des erreurs sur d'autres hébergeurs, je ne connais pas ta stratégie emailing, mais par exemple il ne faut pas utiliser des <p> qui sur Outlook génère un saut de ligne supplémentaire.

    Il faut travailler ton ou tes HTMLs comme au début du web, en tableau et en figeant la place des images (), autour de tes images avec des liens il faut un et pour finir pour éviter le spam, les sont appréciés.

    Si le responsive t’intéresse, ce n'est pas très complexe et ça permet d'améliorer le rendu sur mobile .

    Le domaine du rendu dans les hébergeurs se nomme le "rendering" et il y a des logiciels intéressants qui permettent de valider sur différent hébergeurs d'emails (litmus et email on acid) sont connus dans ce domaine. Si j'ai 5min je te ferai un démo .

    Bon courage dans l'emailing .
    L'Etat est bien administré quand l'escalier de l'école est usé et que l'herbe croît sur celui du tribunal.

    Modérateur BI

  4. #4
    Modérateur
    Avatar de XxArchangexX
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Mars 2012
    Messages
    1 159
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2012
    Messages : 1 159
    Points : 2 323
    Points
    2 323
    Par défaut
    Voilà, structure fixe, pas de risque qu'elle explose. J'ai ajouté de l'adaptative pour que sur mobile, l'email rentre dans l'écran sans exploser le rendu non plus .

    Le code pour l'adaptative-responsive, ne fonctionne pas partout (Gmail ne lisant pas les balises <style></style> par exemple).

    Attention le Doctype est analysé par les hébergeurs pour la délivrabilité (inbox-spam), il faut en mettre un valide.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    <!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">
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>La nouvelle collections Christiane ToutMou</title>
    <meta name="viewport" content="width=device-width">
    </head>
    <style type="text/css">
    	.ReadMsgBody {width: 100%;}
    	.ExternalClass {width: 100%} /* Forces Outlook.com to display emails at full width */
    	 .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td,.ExternalClass div {line-height: 100%;}  /* Forces Outlook.com to display normal line spacing*/
    	  body {margin:0; padding:0;} /* Resets all body margins and padding to 0 for good measure */
          table td {border-collapse:collapse;} /* This resolves the Outlook 07, 10, and Gmail td padding issue */
    	  * {-webkit-text-size-adjust: none}
    	
    	@media only screen and (max-width: 580px){
    		img[class=full], table[class=full], body[class=full]{ 
    			width: 100% !important;
        }
        
        table[class=deviceWidth], td[class=deviceWidth], img[class=deviceWidth]{ 
    			width: 300px !important;  ;           
        }
      }
     </style>
    <body style="margin:auto;" width="100%">
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" class="deviceWidth"> 
    	<tr>
    		<td align="center">
    			<img src="http://www.emling.fr/images/articles/v_chaussures_homme_luxe_richelieu_ville_kendrick_noir_2_z.jpg" class="full" width="350" alt="" style="display:block">
    		</td>
    	</tr>
    	<tr><td height="20"></td></tr>
    	<tr>
    		<td>
    			 <SPAN STYLE="font-family: 'Palatino';font-size: 12px;" >Bonjour ,<BR><BR>Les nouvelles chaussures de la collection 2014 sont enfin disponibles ! Le cr&eacute;ateur vient de d&eacute;voiler la campagne de sa collection printemps-&eacute;t&eacute; 2014 photographi&eacute;e par Jack Lamenace qui met en sc&egrave;ne escarpins et minaudi&egrave;res dans un d&eacute;cor de port de p&ecirc;che :<BR><BR>Graphique, color&eacute;e, par&eacute;e d&rsquo;ornements pr&eacute;cieux&hellip; la collection printemps-&eacute;t&eacute; 2014 Christiane ToutMou ne manque pas de fantaisie et d'extravagance.<BR><a href="http://www.bidon.com/fr_fr/">Voir Plus</a></SPAN>
    		</td>
    	</tr>
    	<tr>
    		<td align="center">
    			<img src="http://i2.cdscdn.com/pdt2/9/0/4/1/400x400/mp00053904/rw/bristol-chaussure-bleu.jpg" class="full"  alt="" style="display:block">
    		</td>
    	</tr>
    	<tr>
    		<td>
    			<SPAN STYLE="font-family: 'Palatino';font-size: 12px;" >Un esprit d&eacute;jant&eacute; que l'on </SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;font-weight: bold;" >retrouve</SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;" > dans une </SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;background-color: normal;font-weight: normal;font-style:normal;text-decoration:none;font-variant:normal;letter-spacing: normal;text-transform: none;" >campagne</SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;" > sign&eacute;e </SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;font-weight: bold;" >Jack Lamenace</SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;" > et inspir&eacute;e du surr&eacute;alisme de </SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;font-weight: bold;" >Magritte</SPAN><SPAN STYLE="font-family: 'Palatino';font-size: 12px;" >. Le d&eacute;cor plant&eacute; dans un port de p&ecirc;che donne une vision en extra large de quelques-unes des pi&egrave;ces de cette collection estivale o&ugrave; les poissons accroch&eacute;s &agrave; l&rsquo;hame&ccedil;on de la canne sont en r&eacute;alit&eacute; des souliers et des pochettes.<BR><a href="http://www.tructruc.com">TrucTruc</a></SPAN>
    		</td>
    	</tr>
    		<tr><td height="20"></td></tr>
    </table>
    
    </body>
    </html>
    L'Etat est bien administré quand l'escalier de l'école est usé et que l'herbe croît sur celui du tribunal.

    Modérateur BI

  5. #5
    Futur Membre du Club
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 7
    Points : 5
    Points
    5
    Par défaut
    Bonjour,

    Merci pour ce retour.

    Je vais m'en inspirer pour améliorer la qualité du code html de mon Emailing.

    Bon dimanche,

Discussions similaires

  1. Réponses: 3
    Dernier message: 22/09/2010, 13h50
  2. [CR XI] Problème d'affichage des icones crystal sur les navigateurs
    Par nabilfaouzi dans le forum SAP Crystal Reports
    Réponses: 1
    Dernier message: 13/03/2009, 00h16
  3. problème d'affichage d'un menu sur une image de fond
    Par Nata31 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 23/06/2006, 07h53
  4. Réponses: 1
    Dernier message: 17/01/2006, 10h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo