Как написать html-рассылку для работы с как можно большим количеством почтовых клиентов

Пользователи Stack Overflow в целом согласны с тем, что информационные бюллетени HTML должны состоять HTML-таблиц и встроенных стилей, чтобы как можно больше почтовых клиентов могли обрабатывать код. Однако некоторые теги, в том числе изображения и привязки, а также такие свойства, как text-decoration и border, отображаются непоследовательно в зависимости от различных почтовых клиентов.

Какие теги, атрибуты и свойства следует использовать (и каких следует избегать) в информационном бюллетене HTML, чтобы все почтовые клиенты могли правильно читать код? MailChimp дополняет свои шаблоны CSS, идентификаторами и классами. Но Gmail, например, отсекает большую часть CSS. Вот всплеск моего текущего кода:

<!doctype html><html lang="en" dir="ltr">
<head>
  <meta http-equiv="content-type" charset="utf-8">
  <title>Twinkies maker threatens to liquidate</title>
  <meta content="Hostess Brands says if its striking bakers don't return to work today, it will liquidate the entire company." name="description">
  <link rel="image_src" href="http://www.mysite.com/i/logo.jpg">
  <style type="text/css">
  @media only screen and (max-width:480px){
    *[class~=stackonmobile]{width:100%!important;margin:0;display:block!important;clear:both!important}
    *[class~=hideonmobile]{display:none!important}
  }
  </style>
</head>
<body style="font-family:arial,sans-serif;color:#222;text-align:left;background-color:#fff;background:url(http://www.mysite.com/i/background.jpg) repeat-x;margin:0;padding:0"><center>

  <table cellspacing="0" cellpadding="0" border="0" style="border-spacing:0;max-width:640px;text-align:left;margin:auto">
    <tr>
      <!-- following td is included for message preview only -->
      <td style="height:0;font-size:0;color:#ffffff;text-indent:-9999px">Hostess Brands says if its striking bakers don't return to work today, it will liquidate the entire company.</td>
      <!-- // -->
    </tr>
    <tr><td align="left" style="float:left;text-align:left;vertical-align:middle"><a href="http://www.mysite.com/" style="color:#b12124;text-decoration:none"><img src="http://mysite.com/i/header-logo-on-top-of-background-image.png" width="100" height="41" border="0"></a></td><td align="right" style="height:16px;float:right;text-align:right;font-size:16px;line-height:16px;font-family:georgia,serif;color:#ffffff;font-style:italic;padding-top:10px">January 27, 2013</td></tr>

    <tr><td colspan="2" style="width:620px;padding-left:10px;padding-right:10px"><div style="height:5px;clear:both;margin-top:0;margin-bottom:14px;background:transparent url(http://www.mysite.com/i/1px-by-1px-white-spacer.jpg) repeat"></div></td></tr>

    <tr><td colspan="2" style="padding-left:20px;padding-right:20px">
    ...

Видите здесь что-нибудь, что вы бы сделали по-другому?


email inline-styles html-table email-client newsletter
person mcormc    schedule 28.01.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Gmail не обрезает большую часть CSS, его поддержка сопоставима с другими почтовыми клиентами. Проблема в том, что он удаляет теги head и style. По этой причине медиа-запросы (адаптивные электронные письма) не работают в Gmail, поскольку вы не можете встраивать медиа-запросы.

Я не отлаживал ваш код, но он выглядит хорошо для адаптивной техники. Заметили, что у вас установлен прозрачный фон, который не будет работать последовательно, используйте .png для всей прозрачности. Если вам нужно фоновое изображение, используйте это. Кроме того, я бы не стал использовать div внутри таблицы, если вы не пытаетесь что-то плавать.

Альтернативный метод, который будет работать в Gmail, — это гибкий шаблон с максимальная ширина. Для рабочего стола это будет выглядеть как 600 пикселей (или как вы его установите), а все, что меньше, будет равно 100% ширине экрана во всех основных почтовых клиентах.

Лучший справочник по поддержке CSS в почтовых клиентах: http://www.campaignmonitor.com/css/

person John    schedule 28.01.2013