Как это работает

Почему без медиа-запросов

Медиа-запросы живут только внутри тега style в шапке письма. Часть клиентов вырезает этот блок целиком: так делают старые версии Gmail при пересылке, некоторые корпоративные шлюзы и почти все, кто показывает письмо через собственный предпросмотр. Стоит вырезать style, и письмо остаётся с десктопной сеткой на экране телефона: горизонтальная прокрутка, кегль в шесть пикселей, кнопки мимо пальца.

Поэтому здесь адаптация встроена в саму сетку. Ни одна секция не зависит от того, доехал блок style до получателя или нет. Всё оформление лежит в атрибутах style прямо на элементах, а перестроение колонок обеспечивает обычный перенос строки.

Как переносятся колонки

Колонки — это не ячейки таблицы, а блоки с display: inline-block и фиксированной шириной в пикселях. Они стоят в одной строке, как слова в тексте. Пока строка достаточно широкая, две колонки по 287 px помещаются рядом. Как только ширина экрана падает, вторая колонка просто не влезает и переносится вниз — ровно так же, как переносится слово.

Свойство max-width: 100% страхует от переполнения на совсем узких экранах, а font-size: 0 у родительской ячейки убирает пробел, который браузер рисует между соседними inline-block. Outlook про такой перенос не знает, поэтому для него добавлена ghost-таблица: она видна только ему и держит колонки в жёсткой сетке.

<!-- Две колонки, которые переносятся сами -->
<td align="center" style="padding:24px 12px;font-size:0;line-height:0;">

    <!--[if mso]>
    <table role="presentation" width="576" cellpadding="0" cellspacing="0" border="0">
    <tr><td width="287" valign="top">
    <![endif]-->
    <div style="display:inline-block;width:287px;max-width:100%;vertical-align:top;font-size:16px;line-height:1.5;">
        <!-- содержимое первой колонки -->
    </div>

    <!--[if mso]></td><td width="287" valign="top"><![endif]-->
    <div style="display:inline-block;width:287px;max-width:100%;vertical-align:top;font-size:16px;line-height:1.5;">
        <!-- содержимое второй колонки -->
    </div>
    <!--[if mso]></td></tr></table><![endif]-->

</td>

Что нужно Outlook

Outlook для Windows начиная с 2007 года рисует письмо движком Word. Он не знает max-width, по-своему считает межстрочный интервал и растягивает PNG с прозрачностью. Лечится это блоком в шапке письма, который видит только он.

<!--[if mso]>
<noscript><xml><o:OfficeDocumentSettings>
    <o:PixelsPerInch>96</o:PixelsPerInch>
    <o:AllowPNG/>
</o:OfficeDocumentSettings></xml></noscript>
<style>
    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {
        font-family: Arial, sans-serif;
        mso-line-height-rule: exactly;
    }
</style>
<![endif]-->

• PixelsPerInch 96 убирает масштабирование картинок на экранах с высоким DPI.
• AllowPNG спасает прозрачные PNG от превращения в чёрные квадраты.
• mso-line-height-rule: exactly заставляет уважать заданный межстрочный интервал.
• mso-table-lspace и mso-table-rspace убирают невидимые поля вокруг таблиц.

Пуленепробиваемая кнопка

Обычная ссылка с фоном в Outlook кликается только по тексту, а скругление теряется. Решение — нарисовать для него отдельную кнопку на VML, а всем остальным показать нормальную ссылку. Условные комментарии делают так, что каждый клиент видит ровно одну версию.

<div style="text-align:center;font-size:0;line-height:0;">

    <!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
        href="https://example.com" style="height:50px;v-text-anchor:middle;width:260px;"
        arcsize="16%" stroke="f" fillcolor="#ef5b2b">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Перейти</center>
    </v:roundrect>
    <![endif]-->

    <!--[if !mso]><!-->
    <a href="https://example.com" style="display:inline-block;width:260px;max-width:100%;height:50px;
        line-height:50px;background-color:#ef5b2b;color:#ffffff;border-radius:8px;font-family:Arial,sans-serif;
        font-size:16px;font-weight:bold;text-align:center;text-decoration:none;">Перейти</a>
    <!--<![endif]-->

</div>

Значение arcsize — это радиус в процентах от высоты кнопки. Чтобы VML вообще заработал, в теге html должны быть объявлены пространства имён xmlns:v и xmlns:o. Студия ставит их автоматически, а валидатор проверяет, что они на месте.

Прехедер

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

<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;
    opacity:0;overflow:hidden;mso-hide:all;">Текст, который увидят в списке писем</div>

<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;
    opacity:0;overflow:hidden;mso-hide:all;">&#847;&#8203;&nbsp;&#847;&#8203;&nbsp;</div>

Таблица поддержки

Колонка «Рунет» — это Яндекс Почта и Mail.ru в вебе и мобильных приложениях.

Чек-лист перед отправкой

• Все адреса картинок полные и по https, у каждой есть width и осмысленный alt.
• Вес письма вместе с кодом меньше 102 КБ, иначе Gmail обрежет концовку.
• Прехедер заполнен: иначе в инбоксе покажется начало служебной вёрстки.
• В каждой ссылке проставлены UTM-метки, ни одна не ведёт на решётку.
• Есть видимая ссылка на отписку и реквизиты отправителя.
• Текст читается при выключенных картинках: ключевое сообщение не спрятано в баннер.
• Кегль основного текста не меньше 15 px, у кнопки высота не меньше 44 px.
• Письмо проверено валидатором: ошибок нет, предупреждения разобраны.