Le logiciel Outlook supprime le code CSS intégré dans les courriels
J'ai un e-mail ci-dessous. Le problème est, il fonctionne très bien sur Gmail, mais sur outlook, tous les CSS inline états ne fonctionnent pas.
En est un exemple:
<a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="{img_dir}fb.png" /></a>
//The image width is stripped out and the original size is used to display
Existe-il des correctifs pour cela?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Welcome to Pure Apparel</title>
</head>
<body>
<table class="table table-mail" style="width: 100%; margin-top: 10px; -moz-box-shadow: 0 0 5px #afafaf; -webkit-box-shadow: 0 0 5px #afafaf; -o-box-shadow: 0 0 5px #afafaf; box-shadow: 0 0 5px #afafaf; filter: progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5);">
<tbody>
<tr>
<td class="space" style="width: 20px; padding: 7px 0;"> </td>
<td align="center" style="padding: 7px 0;">
<table class="table" bgcolor="#ffffff" style="max-width: 650px; width: 100%; border-collapse: collapse; margin: auto;">
<tbody>
<tr>
<td colspan="2" align="center" class="logo" style="padding: 7px 0;"><a title="{shop_name}" href="{shop_url}" style="color: #337ff1;"> <img src="{shop_logo}" alt="{shop_name}" /> </a></td>
</tr>
<tr>
<td colspan="2" align="center" class="titleblock" style="border-bottom: 1px solid #636566; border-top: 1px solid #636566; padding: 7px 0;"><a href="{shop_url}56-new-in" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">New-In</a> <a href="{shop_url}23-women" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Women</a> <!--<a href="{shop_url}40-men" style="font-weight:500;font-size:17px;line-height:26px;width:20%;float:left;color:#555454;text-decoration:none;">Men</a>--> <a href="{shop_url}content/7-fw15" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Lookbook</a> <a href="http://pureapparel.me/" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Be-pure blog</a></td>
</tr>
<tr>
<td colspan="2"><a href="{shop_url}content/24-international-shipping"><img style="width: 100%; display: block;" src="{img_dir}en/welcome.jpg" /></a></td>
</tr>
<tr style="border-bottom: 1px solid #636566; text-align: center;">
<td style="padding: 10px 0px;">
<h3 style="margin-top: 5px;">New Collection</h3>
<p>Enjoy online shopping with our easy check out process and reliable door to door courier service.</p>
<a style="display: block; text-align: center; width: 100px; color: #ffffff; background-color: #58595b; padding: 8px; margin: auto; margin-bottom: 5px; text-decoration: none;" href="{shop_url}" target="_blank">Shop now</a></td>
<td style="padding: 10px 0px;"><img style="width: 200px;" src="{img_dir}box1.jpg" /></td>
</tr>
<tr style="border-bottom: 1px solid #636566; text-align: center;">
<td style="padding: 10px 0px;"><img style="width: 200px;" src="{img_dir}box2.jpg" /></td>
<td style="padding: 10px 0px;">
<h3>be-pure blog</h3>
<p>With access to our be-pure blog, be the first to know about our newest design, latest yoga & fitness trends and community events.</p>
<a style="display: block; text-align: center; width: 100px; color: #ffffff; background-color: #58595b; padding: 8px; margin: auto; text-decoration: none;" href="http://pureapparel.me/" target="_blank">View blog</a></td>
</tr>
<tr style="border-bottom: 1px solid #636566;">
<td colspan="2" style="padding: 10px 0px;">
<h3>Have a Question?</h3>
<div style="width: 100%; text-align: center;"><img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q1.jpg" /> <img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q2.jpg" /> <img style="width: 120px;" src="{img_dir}en/q3.jpg" /></div>
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
<p>Stay connected with us</p>
<div><a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="{img_dir}fb.png" /></a> <a href="https://twitter.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="{img_dir}tw.png" /></a> <a href="http://instagram.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="{img_dir}ig.png" /></a></div>
<p>Please add <a style="text-decoration: none; color: #58595b;" href="mailto:[email protected]">[email protected]</a> to your approved senders or address book.</p>
<p>If you do not wish to receive any eNews, please click here to update your preferences or <a href="{my_account_url}" style="color: #58595b;">unsubscribe</a> from this list</p>
</td>
</tr>
<tr>
<td colspan="2">
<p style="float: left; text-align: center; width: 25%;">@2015 Pure Retail Ltd.</p>
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}" style="text-decoration: none; color: #58595b;">www.be-pure.com</a></p>
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}content/3-terms-and-conditions-of-use" style="text-decoration: none; color: #58595b;">Terms & Conditions</a></p>
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}content/15-privacy-policy" style="text-decoration: none; color: #58595b;">Privacy Policy</a></p>
</td>
</tr>
</tbody>
</table>
</td>
<td class="space" style="width: 20px; padding: 7px 0;"> </td>
</tr>
</tbody>
</table>
</body>
</html>
En fait, le code source n'enlève pas les CSS, mais lorsque la page est affichée, Outlook agit comme si le CSS est dépouillé, une idée?
Mise à jour (29/11/2015):
Donc, j'ai finalement découvert que width:50px
ne fonctionne pas, je dois utiliser width="50"
de contrôler la taille, que j'ai seulement besoin de prise en charge d'Outlook 2013 et les versions ultérieures, je me demande:
- Est-il vrai que Outlook 2013 ne prend pas en charge CSS comme
width:50px
sur les balises IMG? - Si elle prend en charge, le problème se situent sur le serveur de messagerie à la place?
- Existe-il des moyens plus faciles pour convertir mon modèle de prise en charge d'Outlook 2013?
source d'informationauteur user3538235
Vous devez vous connecter pour publier un commentaire.
Outlook utilise un autre moyen de l'exécution de la feuille de style. N'est pas les paramètres du serveur SMTP ou les paramètres de courriel. Il dépend de la façon dont le service de messagerie comme Gmail, Outlook et Yahoo affiche de la CSS. Comment Outlook styles = Comment IE styles.
J'ai utilisé Mailchimp fait cela pour tous les
p
élément que j'ai utilisé et il n'a pas l'air exactement la même dans Outlook et Gmail, mais il est le plus proche que je peux obtenir.Le guide que j'ai utilisé pour Outlook est ce. Notez que vous devez joindre à leur communauté ( gratuit) pour obtenir les Perspectives guide, qui je pense vaut la peine et vous épargner la peine.
https://www.emailonacid.com/resources
Le lien précédent, doit vous expliquer, mais si vous voulez plus d'informations, vous pouvez toujours regarder la ci-dessous deux liens que j'ai utilisé.
Pour Outlook/Hotmail, ils ont généralement une
mso
syntaxe devant le style commehttp://templates.mailchimp.com/development/css/outlook-conditional-css/
Pour certains éléments que fournisseur de messagerie d'utilisation, vous pouvez consulter ici.
https://www.campaignmonitor.com/css/
Passer un peu de temps à la création d'un modèle d'e-mail qui fonctionne pour tous les services de messagerie et de le modifier afin de l'adapter à vos besoins permet d'économiser beaucoup plus de temps et d'effort que de partir de zéro.
Outlook ne l'ignore pas, des styles en ligne. Il ne comprend pas tout à fait un peu de propriétés CSS. Des choses qui, aujourd'hui, nous prenons pour acquis: les chars, les marges, le rembourrage. Suivi de la campagne ont une très bonne table de laquelle les choses vont fonctionner dans laquelle les clients de messagerie.
Vous pouvez presque toujours autour de ce avec beaucoup, beaucoup de tables imbriquées. C'est laid, mais c'est multi-plateforme et que tout ce qui compte.
Parfois dans l'email marketing, vous devez accepter qu'il ne va pas à 100% identique à chaque client de courrier électronique et c'est bien. Tant que ça ressemble à bonne à chaque client, il n'a pas d'importance si il y a 2px espacement supplémentaire ici et là.
E-mail marketing est souvent une amélioration progressive. Vous faites le mieux que vous pouvez pour les personnes utilisant Lotus Notes et d'autres anciens clients et vous ajoutez la touche finale pour les personnes à l'aide de Gmail sur google Chrome. Par exemple, même si Outlook ne prend pas en charge les requêtes des médias, vous pouvez toujours (et devrait probablement) car d'autres clients. La bonne chose à ce sujet est que si un client de messagerie prend en charge les requêtes des médias, les chances sont qu'ils soutiennent également plus moderne des choses comme des flotteurs, de sorte que vous êtes en mesure d'utiliser les propriétés comme ça dans les requêtes de média si vous le souhaitez.
CSS-tricks ont un assez bon article, qui traite de la tri général de la méthodologie que vous devez suivre.
L'écriture des e-mails HTML est en grande partie une question d'expérience. De le faire et vous allez comprendre les différents moyens que vous avez à faire des choses par rapport à l'écriture pour le web. Je recommande fortement de tester tout ce que vous faites à travers Tournesolsurtout si vous êtes à la production d'un travail pour un client. Il va vous montrer comment votre email rend dans presque n'importe quel client de messagerie. C'est un service d'abonnement - et coûteuse - mais il n'est pas vraiment comparable service gratuit.