Courriels HTML dans Outlook.com

Je me suis juste donné beaucoup de mal pour créer un joli courriel utilisant le HTML.Courriels HTML dans Outlook.com

Fonctionne à la fois pour gmail et Yahoo. Je voudrais juste tester sur Hotmail et Outlook.com et il affiche simplement l'ensemble de l'email comme le code HTML ?!

Le html est bien formé et apparaît comme ceci:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8" /> 
<style> 
body { 
    background-color:white; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
} 

#outterBox { 
    position:relative; 
    width:500px; 
    height:320px; 
    background-color:#F0f0f0; 
    padding:10px; 
} 

#innerBox { 
    background-color:white; 
    width:90%; 
    height:55%; 
    margin-top:6px; 
    margin: 0 auto; 
    margin-top:24px; 
    position:relative; 
} 

#headingBox { 
    width:100%; 
    height:18%; 
    background-color:#f0f0f0; 
    overflow: hidden; 
} 

#notiBar { 
    background-color:#a1a1a1; 
    width:100%; 
    height:42px; 
    line-height:42px; 
} 

#notiBar > span { 
    font-size:18px; 
    color:white; 
    margin-left:16px; 
} 

#notiContent { 
    width:100%; 
    height:100%; 
    position:relative; 
} 

#notiContent > span { 
    font-size:18px; 
    color:#878787; 
    margin-top:16px; 
    margin-bottom:16px; 
    margin-left:14px; 
} 

#msgContent { 
    height:30px; 
    line-height:30px; 
    padding:10px; 
} 

#msgContent > span { 
    font-size:18px; 
    color:#878787; 
    margin-top:16px; 
    margin-bottom:16px; 
    margin-left:4px; 
} 

#linkContent { 
    margin-top:2%; 
    height:50px; 
    width:100%; 
    position:relative; 
    text-align:center; 
} 

#siteButton { 
    display:inline-block; 
    background-color:#5683CC; 
    border:none; 
    color:white; 
    font-size:16px; 
    padding-left:10px; 
    padding-right:10px; 
    text-decoration:none; 
    height:36px; 
    width:40%; 
    line-height:36px; 
    text-align:center; 
} 

#footer { 
    height:27%; 
    width:90%; 
    padding-top:10%; 
} 

#footer > span { 
    color:#878787; 
    font-size:10px; 
} 

#unsubscribe { 
    text-decoration:none; 
    color:#81a0d3; 
    font-size:10px; 
} 

</style> 
</head> 
<body> 
    <div id="outterBox"> 
     <div id="headingBox"> 
     <img src="image location" alt="xx" title="xx" style="display:block"/> 
     </div> 
     <div id="innerBox"> 
     <div id="notiContent"> 
      <div id="msgContent"> 
       <span><span id="userName"></span>, new message</span> 
      </div> 
      <div id="linkContent"> 
       <a id="siteButton" href="website">Check msgs now</a> 
      </div> 
     </div> 
     </div> 
     <div id="footer"> 
     <span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span> 
     </div> 
    </div> 
</body> 
</html>

est-il une astuce pour obtenir ce travail sans avoir à changer radicalement mon code pour Microsoft?

Source

2017-07-23 johhny B

L'email ne pardonne pas du tout. Chaque navigateur, chaque client peut afficher quelque chose de différent. Avec Microsoft étant le pire pire à rendre les attentes. Votre meilleur pari est inline style comme autant que vous pouvez, en utilisant des outils tels que: http://foundation.zurb.com/emails/inliner.html

Ceci est une bonne ressource aussi bien, pour quels éléments/attributs pour rester à l'écart de: https://www.campaignmonitor.com/css/

En outre, consultez email sur l'acide. Je ne suis pas sûr si elles sont fremium, mais vous pouvez voir comment l'email apparaît dans chaque navigateur/client/appareil etc ...

bonne chance.

Source

2017-07-23 12:10:08

Bonjour Josh merci, je vais essayer. Salutations –

Essayez d'utiliser sur le dessus de celui-ci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Source

2017-07-23 20:40:07 CagCak

Merci, je vais vérifier cette fois une certaine heure cette semaine et vous faire savoir si cela fonctionne! –

johhny B, cela est irrécupérable, mais comme vous l'avez compris maintenant, Outlook ne fonctionne pas avec HTML 5, CSS 3, divs ou darn près de quoi que ce soit d'amusant.

La plus grande chose que vous devez faire est les valeurs de css en ligne. Outlook ignore les feuilles de style. Il va ignorer tout css comme, #msgContent > span.

Ceci est votre email avec très peu de valeurs inline pour nettoyer l'apparence d'Outlook légèrement.

Bonne chance.

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8" /> 
<style> 
    body { 
    background-color:white; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    } 
    #outterBox { 
    position:relative; 
    width:500px; 
    height:320px; 
    background-color:#F0f0f0; 
    padding:10px; 
    } 
    #innerBox { 
    background-color:white; 
    width:90%; 
    height:55%; 
    margin-top:6px; 
    margin: 0 auto; 
    margin-top:24px; 
    position:relative; 
    border: 1px; 
    } 
    #headingBox { 
    width:100%; 
    height:18%; 
    background-color:#f0f0f0; 
     overflow: hidden; 
     } 

#notiBar { 
    background-color:#a1a1a1; 
    width:100%; 
    height:42px; 
    line-height:42px; 
} 

#notiBar > span { 
    font-size:18px; 
    color:white; 
    margin-left:16px; 
} 

#notiContent { 
    width:100%; 
    height:100%; 
    position:relative; 
} 

#notiContent > span { 
    font-size:18px; 
    color:#878787; 
    margin-top:16px; 
    margin-bottom:16px; 
    margin-left:14px; 
} 

#msgContent { 
    height:30px; 
    line-height:30px; 
    padding:10px; 
} 

#msgContent > span { 
    font-size:18px; 
    color:#878787; 
    margin-top:16px; 
    margin-bottom:16px; 
    margin-left:4px; 
} 

#linkContent { 
    margin-top:2%; 
    height:50px; 
    width:100%; 
    position:relative; 
    text-align:center; 
} 

#siteButton { 
    display:inline-block; 
    background-color:#5683CC; 
    border:none; 
    color:white; 
    font-size:16px; 
    padding-left:10px; 
    padding-right:10px; 
    text-decoration:none; 
    height:36px; 
    width:40%; 
    line-height:36px; 
    text-align:center; 
} 

#footer { 
    height:27%; 
    width:90%; 
    padding-top:10%; 
} 

#footer > span { 
    color:#878787; 
    font-size:10px; 
} 

#unsubscribe { 
    text-decoration:none; 
    color:#81a0d3; 
    font-size:10px; 
} 
</style> 
</head> 
<body> 
    <div id="outterBox" style="width: 500px; border: 1px solid;"> 
     <div id="headingBox" style="width: 500px; height:55px; background:#f0f0f0;"> 
     <img src="image location" alt="xx" title="xx" style="display:block"/> 
     </div> 
     <div id="innerBox" style="width: 450px;"> 
     <div id="notiContent" style="width: 450px; border: 1px solid;"> 
      <div id="msgContent"> 
       <span><span id="userName"></span>, new message</span> 
      </div> 
      <div id="linkContent"> 
       <a id="siteButton" href="website">Check msgs now</a> 
      </div> 
     </div> 
     </div> 
     <div id="footer"> 
     <span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span> 
     </div> 
</div> 
</body> 
</html>

Source

2017-07-24 23:21:58 gwally

Courriels HTML dans Outlook.com

Répondre

Questions connexes