Программное обеспечение Outlook вытесняет встроенный CSS в сообщениях электронной почты

У меня есть электронная почта, как показано ниже. Проблема в том, что он отлично работает в Gmail, но в Outlook все встроенные инструкции CSS не работают.

Один пример:

<a href="#" onclick="location.href='https://www.facebook.com/BePureApparel'; return false;" 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

Есть ли какие-либо исправления для этого?

<!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="#" onclick="location.href='http://pureapparel.me/'; return false;" 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="#" onclick="location.href='http://pureapparel.me/'; return false;" 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="#" onclick="location.href='https://www.facebook.com/BePureApparel'; return false;" target="_blank"><img style="width: 35px;" src="{img_dir}fb.png" /></a> <a href="#" onclick="location.href='https://twitter.com/be_pureapparel'; return false;" target="_blank"><img style="width: 35px;" src="{img_dir}tw.png" /></a> <a href="#" onclick="location.href='http://instagram.com/be_pureapparel'; return false;" 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>

Собственно, исходный код не разделяет CSS, но когда просматривается страница, Outlook действует так, как будто CSS лишен, любая идея?

Обновление (29/11/2015):

Итак, я наконец выяснил, что width:50px не работает, мне нужно использовать width="50" для управления размером, так как мне нужно только поддерживать Outlook 2013 и более поздние версии, мне интересно:

Правда ли, что Outlook 2013 не поддерживает встроенный CSS, например width:50px в тегах IMG?
Если он его поддерживает, проблема лежит на сервере электронной почты?
Есть ли более простые способы конвертировать мой шаблон для поддержки Outlook 2013?

Ответ 1

Outlook использует другой способ выполнения таблицы стилей. Не настройки SMTP или настройки электронной почты. Это зависит от того, как служба электронной почты, такая как Gmail, Outlook и Yahoo, отображает CSS. Как стили Outlook = Как стили IE.

Я использовал Mailchimp для этого для каждого элемента p, который я использовал, и он не выглядит точно так же в Outlook и Gmail, но является самым близким, который я могу получить.

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

Это руководство, которое я использовал для Outlook. Обратите внимание, что вам нужно присоединиться к своему сообществу (бесплатно), чтобы получить руководство по Outlook, которое, на мой взгляд, стоит того, и избавит вас от неприятностей. https://www.emailonacid.com/resources

Предыдущая ссылка должна вам объяснить, но если вы хотите получить дополнительную информацию, вы всегда можете посмотреть две ссылки, которые я использовал.

Для Outlook/Hotmail они обычно имеют синтаксис mso перед стилем, например http://templates.mailchimp.com/development/css/outlook-conditional-css/

Для определенных элементов, которые используют поставщик электронной почты, вы можете обратиться сюда. https://www.campaignmonitor.com/css/

Проведите некоторое время, создав шаблон электронной почты, который работает для всех служб электронной почты и изменит его в следующий раз в соответствии с вашими потребностями, сэкономит гораздо больше времени и усилий, чем начинать с нуля.

Ответ 2

Outlook не игнорирует встроенные стили. Однако он не понимает немало свойств CSS. Вещи, которые сегодня мы считаем само собой разумеющимися: поплавки, поля, отступы. Монитор кампании имеет очень хорошую таблицу в которой будут работать те клиенты электронной почты.

Вы можете почти всегда обойти это с помощью множества и много вложенных таблиц. Это уродливо, но это кросс-платформенный и что все, что имеет значение.

Иногда в маркетинге электронной почты вы должны признать, что он не будет выглядеть на 100% идентичным в каждом почтовом клиенте, и это хорошо. Пока он выглядит хорошо в каждом клиенте, не имеет значения, есть ли 2px дополнительный интервал здесь и там.

Маркетинг электронной почты часто связан с прогрессивным улучшением. Вы делаете все возможное для людей, использующих Lotus Notes и других старых клиентов, и добавляете последние штрихи для людей, использующих Gmail в Chrome. Например, даже если Outlook не поддерживает медиа-запросы, вы все равно можете (и, вероятно, должны) использовать их, потому что другие клиенты будут. Самое приятное в том, что если почтовый клиент поддерживает медиа-запросы, возможно, они также поддерживают более современные вещи, такие как float, поэтому вы можете использовать такие свойства, как в медиа-запросах, если вы хотите.

CSS-трюки имеют довольно хорошую статью, в которой обсуждается общая методология, которой вы должны следовать.

Написание электронных писем в формате HTML - это в основном вопрос. Сделайте это достаточно, и вы поймете, как вам придется делать что-то по сравнению с тем, как писать в Интернете. Я настоятельно рекомендую тестировать все, что вы делаете, Litmus, особенно если вы создаете работу для клиента. Он покажет вам, как ваша электронная почта оказывает практически любой почтовый клиент. Это услуга подписки - и дорогая в этом - но действительно нет никакого сопоставимого бесплатного сервиса.