Шаблон адаптивной верстки для email рассылки

В кои-то веки сподобился и раскурил/запилил сабж у себя в блоге. Который вы, вероятнее всего уже заценили в сентябрьской рассылке моего неуютного. Если честно, то в самом страшном сне не мог предположить такое количество костылей по решению такой, казалось бы простой на первый взгляд задачи, как адаптивные шаблоны писем. Под катом — тот самый список проблем, а также существующие (известные мне) на данный момент способы их решения. Ну и конечно сам шаблон верстки. Собственно этим постом я решил открыть небольшую серию, в которой буду делиться наработками из серии «чота гавнякал, чтоб не забыть — вот». Бесплатно и без смс 🙂

Проблема: почтовый клиент удаляет media queries из тела письма
Решение: используйте таблицы (да-да, те самые html-таблицы)

Проблема: почтовый клиент удаляет внешние CSS стили
Решение: вставляйте CSS стили инлайном

Проблема: почтовый клиент игнорирует теги <style> или <link> в секции <head>
Решение: вставляйте каскадные стили непосредственно для каждого элемента (facepalm)

Проблема: почтовый клиент не поддерживает padding, margin, float и paragraph
Решение: используйте вложенные таблицы, каждый TD которых будет иметь свой padding и margin

Проблема: почтовый клиент подчеркивает и подсвечивает ссылки синим по умолчанию
Решение:

<a href="https://ivangrigoryev.com/the-unforgotten-soldiers-an-anzac-tribute/" style="text-decoration:none; color:#00001b">Read More</a>

И наконец, сам шаблон адаптивной верстки для email рассылок (в одну колонку):


<!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" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
  table {border-collapse: collapse;}
</style>
<![endif]-->
</head>
<body style="margin: 0 !important;padding: 0;>
  <center style="width: 100%;table-layout: fixed;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">
    <div style="max-width: 640px;margin: 0 auto;">
      <!--[if (gte mso 9)|(IE)]>
      <table width="640" align="center">
      <tr>
      <td>
      <![endif]-->
      <table align="center" style="Margin: 0 auto;width: 100%;max-width: 640px;">
        <tr>
          <td style="text-align: left;">
            <table width="100%">
              <tr>
                <td>{content}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <!--[if (gte mso 9)|(IE)]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </div>
  </center>
</body>
</html>

А также пример «было»:

И «стало» для десктопа:

Скриншот «стало» для мобильной версии GMail и Яндекс разместил в самом верху.

Удобный способ не пропустить новое в блоге. Раз в месяц пишу обстоятельное письмо всем читателям: анонсы постов, новости нашей деревни и прочие ништяки, которые не ушли в RSS, Feedly или куда-там еще.

На ежемесячную email рассылку подписаны 258 человек

Мотофотопрограммист
Живу в Новой Зеландии. Рассказываю о стране и красивых местах, пишу про бытовые вещи.
Прыгнуть с парашютом - осуществил на 50%; приобрести 1400 - работаю над этим; осилить 300км/ч - осилил на 96.6%