web-dev-qa-db-fra.com

Le logiciel Outlook supprime le CSS intégré dans les e-mails

J'ai un e-mail comme celui-ci. Le problème est que cela fonctionne très bien sur Gmail, mais sur Outlook, toutes les instructions CSS en ligne ne fonctionnent pas.

Un exemple est:

<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-t-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;">&nbsp;</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;">&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

En fait, le code source ne supprime pas le CSS, mais lorsque la page est consultée, Outlook agit comme si le CSS était supprimé, 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" pour contrôler la taille, car je n'ai besoin que de prendre en charge Outlook 2013 et les versions ultérieures, je me demande:

  1. Est-il vrai qu'Outlook 2013 ne prend pas en charge les CSS en ligne comme width:50px sur les balises IMG?

  2. S'il le prend en charge, le problème réside-t-il plutôt sur le serveur de messagerie?

  3. Existe-t-il des moyens plus simples de convertir mon modèle pour prendre en charge Outlook 2013?

htmlcssemailoutlook
15
user3538235

Outlook utilise une manière différente d'exécuter la feuille de style. N'est pas des paramètres SMTP ou des paramètres de messagerie. Cela dépend de la façon dont le service de messagerie comme Gmail, Outlook et Yahoo affiche le CSS. Comment les styles Outlook = Comment IE styles.

J'ai utilisé Mailchimp a fait cela pour chaque élément p que j'ai utilisé et il n'a pas exactement la même apparence dans Outlook et Gmail mais est le plus proche possible.

<p class="MsoNormal" style="text-align:justify; line-height:150%; font-family:Arial, Helvetica, sans-serif;">

Le guide que j'ai utilisé pour Outlook est le suivant. Notez que vous devez rejoindre leur communauté (gratuitement) pour obtenir le guide Outlook, qui je pense en vaut la peine et vous éviter les ennuis. https://www.emailonacid.com/resources

Le lien précédent devrait vous expliquer mais si vous souhaitez plus d'informations, vous pouvez toujours consulter les deux liens ci-dessous que j'ai également utilisés.

Pour Outlook/Hotmail, ils ont généralement une syntaxe mso devant le style comme http://templates.mailchimp.com/development/css/Outlook-conditional-css/

Pour certains éléments utilisés par le fournisseur de messagerie, vous pouvez vous référer ici. https://www.campaignmonitor.com/css/

Passez un peu de temps à créer un modèle d'e-mail qui fonctionne pour tous les services de messagerie électronique et modifiez-le la prochaine fois en fonction de vos besoins.

10
cweitat

Outlook n'ignore pas les styles en ligne. Il ne comprend cependant pas beaucoup de propriétés CSS. Choses que nous tenons aujourd'hui pour acquises: flotteurs, marges, rembourrage. Campaign Monitor a un très bon tableau des choses qui fonctionneront dans quels clients de messagerie .

Vous pouvez presque toujours contourner cela avec beaucoup, beaucoup de tables imbriquées. C'est moche mais c'est multi-plateforme et c'est tout ce qui compte.

Parfois, dans le marketing par e-mail, vous devez accepter qu'il ne sera pas identique à 100% dans tous les clients de messagerie et que ça va . Tant qu'il semble bon dans chaque client, peu importe s'il y a un espacement supplémentaire de 2 pixels ici et là.

Le marketing par e-mail concerne souvent l'amélioration progressive. Vous faites de votre mieux pour les personnes utilisant Lotus Notes et d'autres anciens clients et vous ajoutez la touche finale aux personnes utilisant Gmail sur Chrome. Par exemple, même si Outlook ne prend pas en charge les requêtes multimédias, vous pouvez toujours (et devriez probablement) les utiliser car d'autres clients le feront. La bonne chose à ce sujet est que si un client de messagerie prend en charge les requêtes multimédias, il est probable qu'il prend également en charge des éléments plus modernes tels que les flottants, de sorte que vous pouvez utiliser des propriétés comme celle-ci dans les requêtes multimédias si vous le souhaitez.

Les astuces CSS ont un assez bon article qui discute de la sorte de méthodologie générale à suivre .

La rédaction d'e-mails HTML est en grande partie une expérience importante. Faites-le suffisamment et vous découvrirez les différentes façons de faire les choses par rapport à l'écrire pour le Web. Je recommande fortement de tester tout ce que vous faites via Litmus , surtout si vous produisez du travail pour un client. Il vous montrera comment votre e-mail s'affiche dans presque tous les clients de messagerie. C'est un service d'abonnement - et cher à cela - mais il n'y a vraiment pas de service gratuit comparable.

3
Michael