HTML Mail Outlook - Таблицы и изображения Broken

Я работаю в медиа-компании, которая продает управление социальными сетями и журнал цифровых журналов и т. Д. Моя задача - подготовить шаблон HTML Mail для рекламы по почте. Я работал с HTML, но никогда не делал HTML-почту. Я нашел пару моментов, чтобы сделать мой почтовый шаблон более оптимизированным для почтовых клиентов. Моя проблема: когда я отправил свою html-почту в Outlook (думаю, прогноз на 2013 год), приемник не может корректно показывать почту. Таблицы и изображения выглядят иначе, чем я создал. Моя вторая проблема заключается в том, есть ли способ предотвратить, чтобы Outlook или другие почтовые клиенты не блокировали изображения? Вот мой html-код. Если вы поможете мне, я буду очень благодарен. Вот мой html-код.HTML Mail Outlook - Таблицы и изображения Broken

<!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"> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    <title>HTML Mail Example</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="600"> 
 
<tr> 
 
    <tr> 
 
    <td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> 
 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 
<tr> 
 
    <td bgcolor="white" align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> 
 
    <a href="http://www.google.com.tr"><img src="http://financesonline.com/uploads/2014/06/erp2.png" alt="Enterprise Resource Planning" width="400" height="230" style="display: block;" /> 
 
    </a> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"> 
 
<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 
    <tr> 
 
    <td> 
 
    Lorem ipsum dolor sit amet! 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td align="justify" style="padding: 20px 0 30px 0;"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet varius lorem, at porta arcu. Nullam vitae sollicitudin est. Curabitur nisl lorem, feugiat vel tortor eget, sollicitudin varius purus. Proin lacinia orci justo, sed eleifend enim vehicula blandit. Donec arcu est, varius vel aliquet quis, sodales sed ipsum. Nulla varius fermentum ligula sed rutrum. Cras eget tellus condimentum, efficitur massa sed, eleifend ex. Mauris congue fringilla enim aliquam luctus. Praesent at placerat ante. 
 
    </td> 
 
    </tr> 
 
<tr> 
 
    <td> 
 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 
<tr> 
 
    <td width="260" valign="top"> 
 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 
    <tr> 
 
    <td> 
 
     <img src="http://www.erpsafety.com/assets/img/ERP-Logo%20(2).png" alt="" width="100%" height="140" style="display: block;" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td style="padding: 25px 0 0 0;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 
 
    </td> 
 
    </tr> 
 
    </table> 
 
    </td> 
 
    <td style="font-size: 0; line-height: 0;" width="20"> 
 
    &nbsp; 
 
    </td> 
 
    <td width="260" valign="top"> 
 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 
    <tr> 
 
    <td> 
 
     <img src="https://www.arckcloud.com/images/erp-logo2.png" alt="" width="100%" height="140" style="display: block;" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td style="padding: 25px 0 0 0;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 
 
    </td> 
 
    </tr> 
 
    </table> 
 
    </td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 
<tr> 
 
    <td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> 
 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 
<tr> 
 
    <td> 
 
    Column 1 
 
    </td> 
 
    <td> 
 
    Column 2 
 
    </td> 
 
</tr> 
 
</table> 
 
    </td> 
 
</tr> 
 
</table> 
 
</head> 
 
</html>

источник

2015-07-20 Eren Yatkin

Проблема обусловлена Outlook scaling the content to a larger size, заставляя ваши изображения и другие элементы объявлены для изменения размера. Это может разрушить ваш макет, и вы действительно ничего не можете сделать, чтобы его изменить - это настройка клиентской стороны на компьютере-подписчике.

Ваш лучший способ исправить это - использовать MSO conditionals для обертывания в одну таблицу и разделить каждый столбец на отдельный тд. Или использовать TD or TH stack (TD no longer works in Android) со средствами массовой информации. Outlook растянет таблицу до двух столбцов, но не растянет таблицу до двух таблиц, вместо этого она заставит вторую таблицу под первой.

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

источник

2015-07-21 13:48:05 Gortonington

Благодарим вас за ответ. –

HTML Mail Outlook - Таблицы и изображения Broken

ответ

Смежные вопросы