Outlook и gmail электронной почты совершенно разные

Question

Я сделал шаблон для нашей кампании по маркетингу электронной почты. Но в gmail, msn (на основе браузера) хороши, но по внешнему виду плохо. Как я могу решить проблему?

Кусок моего кода:

<td valign="top" width="194" class="rightColumnContent"> 

               <!-- // Begin Module: Top Image with Content \\ --> 
               <table border="0" cellpadding="10" cellspacing="0" width="194px" height="194px" style="background-color:#fafafa; margin-top:20px;"> 
                <tr mc:repeatable> 
                 <td valign="top"> 
                  <img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" style="max-width:69px;float:left;margin-right:15px;" mc:label="image" mc:edit="tiwc200_image01" /><h4 class="h4" style="float: left;">ARAMA</h4> 
                  <div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br /> 

                  Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin. 

                  </div> 
                 </td> 
                </tr> 
               </table> 
               <!-- // End Module: Top Image with Content \\ --> 

              </td> 

Answer 1

Вам нужно повторно объявить стек шрифтов в каждой ячейке таблицы.

Кроме того, избегайте края, вместо этого используйте отступы в тегах <td>.

Поплавок также широко не поддерживается. Если вы хотите плавать, вместо этого вы должны использовать align="left", но для вашего примера лучше хранить его в таблицах.

Ваш код должен выглядеть следующим образом:

<table width="200" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="60"> 
     <img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" mc:label="image" mc:edit="tiwc200_image01" /> 
    </td> 
    <td width="140" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; font-weight:bold; padding-left:15px; font"> 
     ARAMA 
    </td> 
    </tr> 
    <tr> 
    <td width="100%" colspan="2" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;"> 
     <div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br /> 
     Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin. 
     </div> 
    </td> 
    </tr> 
</table> 

установить ширину таблицы 200, вы можете изменить его процент на основе, если вы предпочитаете.

Answer 2

Получение HTML электронной почты, чтобы выглядеть отлично на всех клиентов является то, что в значительной степени все, кто пытался сделать электронный маркетинг работает в. На ваш вопрос нет простого ответа, но я бы начал с some of this advice и проверил ваши шаблоны электронной почты с помощью инструмента, такого как litmus.

Answer 3

Поплавок просто не будет работать в Outlook 2007+. Версии Outlook для Windows с 2007 года используют Office как механизм рендеринга и, следовательно, не будут отображать стандартный HTML правильно.

Выравнивание часто будет работать, но самым безопасным направлением является создание таблицы с двумя столбцами с изображением слева и текстом справа. Столбец изображения должен иметь явно установленную ширину. (Не пытайтесь сделать таблицу более одной строкой. В электронной почте HTML лучше всего вложить ряд простых таблиц, чем создать один сложный.)

Убедитесь, что вы используете appopriate old-style pre -HTML 4 в ваших тегах таблицы. В частности, чтобы получить свой макет, убедитесь, что ячейки таблицы имеют «valign = 'middle».

Если вы отправляете через одного из основных поставщиков услуг электронной почты, таких как Mailchimp или Campaign Monitor (и вы должны быть, чтобы защитить целостность вашего списка), он будет встраивать весь ваш код стиля для вас - поэтому вам действительно не нужно обновлять стили для каждой ячейки таблицы, вы можете просто использовать встроенную таблицу стилей.