177 0

Отличия имейл- и веб-вёрстки: на что обратить внимание

Казалось бы, у вёрстки имейл-рассылок и веб-страниц много общего: и там и там используется HTML и CSS, работает адаптивность. Но если копнуть глубже, есть кардинальные отличия: письма верстают по технологиям 1999 года, а технологии вёрстки веб-страниц шагнули далеко вперёд.

Вёрстка рассылок похожа на вёрстку документов в MS Word. Структура документа строится за счёт вложенных таблиц и инлайн-стилей. То, что решается одной строкой в CSS3 или HTML5, здесь нужно записывать 10–15 строками. Так что, запаситесь терпением и приготовьтесь набивать шишки. Сейчас мы расскажем, с чем вы можете столкнуться.

HTML

Представьте, что вы постарели, и у вас пропали все суперспособности, которые были в веб-вёрстке. Javascript, CSS3 в отдельном файле, чтобы не засорять логику страницы, — ничего этого нет. У вас остались только таблицы и стили внутри структурных тегов. Вы можете использовать только полные названия тегов и хекс-кодов, а не сокращённые вроде fonts или #fff.

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

Ссылки можно сделать блочными почти везде, кроме Аутлука. Чтобы вся кнопка с изображением была кликабельной, вам нужно сделать бутерброд из нескольких таблиц со стопроцентным заполнением по ширине и высоте, а между ними положить ссылку. Код для простой кнопки выглядит так:

<table cellpadding="0" style="border-collapse:collapse;">
    <tbody>
    <tr>
        <td style="padding:8px 25px;vertical-align:top;
                    text-align:center;
                    border: 2px solid #fff;color:#fff;
                    font-family:Arial, Helvetica, sans-serif;
                    font-size:16px;font-weight:700;
                    line-height:16px;">
            <a href="http://example.com" style="text-decoration:none;
                    color:#fff !important;" target="_blank"><span
                    style="color:#fff;">Скачать</span></a>
        </td>
    </tr>
    </tbody>
</table>

Изображения

Фоновые изображения работают примерно в 90%, оставшиеся 10% приходятся на разные версии Аутлука. Закономерности нет: они могут работать в более старой версии, но не работать в новой, поэтому тестируйте результат в Литмусе.

По контуру изображение размывается и плавно переходит в цвет плашки по всей ширине. Если фоновое изображение не показывается, все заливается единым цветом

По контуру изображение размывается и плавно переходит в цвет плашки по всей ширине. Если фоновое изображение не показывается, всё заливается единым цветом

Фоновые изображения не сжимаются под экран, поэтому делается цельный баннер, кнопка выносится отдельно

Фоновые изображения не сжимаются под экран, поэтому баннер цельный, а кнопка выносится отдельно

Персонализация

Письмо приходит в виде HTML-файла. Какой текст отправили, такой и будет у получателя. А вот картинки подгружаются в момент открытия. Если после отправки резко поменять все картинки, у тех, кто не успел открыть письмо, покажутся новые. Это можно использовать для счётчиков, например. Как пишет Email on Acid, чтобы персонализировать контент под конкретного пользователя в реальном времени, вы можете попросить почтового клиента не кэшировать изображения. Для этого укажите вместо ссылки на изображение php-скрипт, который динамически подставит картинку в зависимости от часового пояса или местоположения клиента.

Спортивная обувная компания Brooks отображает разные объявления в зависимости от погодных условий и температурного диапазона.

Спортивная обувная компания Brooks отображает разные объявления в зависимости от погодных условий и температурного диапазона. Источник: Email on Acid

Длина писем

Некоторые письма обрезаются по длине в Gmail или Inbox. Это зависит от почтового клиента или сервиса. Например, при тестировании в Мейлчимпе всё может работать нормально, а при отправке через другой сервис часть письма спрячется под кат. Чтобы этого избежать, сожмите код письма до 102 килобайт.

В старых Аутлуках есть распространённая проблема с непроизвольным отступом. Когда контент превышает одну печатную страницу, Аутлук добавляет тег <br>, который отбивает следующую строку отступом. Для исправления ошибки нужно переписывать весь шаблон так, чтобы размер каждой вложенной таблицы не превышал А4 — 3508 пикселей.

Движок Word, который использует Аутлук для рендеринга веб-страниц, добавляет разрыв в конце страницы — для печати.

Движок Word, который использует Аутлук для рендеринга веб-страниц, добавляет разрыв в конце страницы. Источник: Email on Acid

Ширина писем

Ширина писем ограничена рабочей областью многих почтовых клиентов, которая составляет не более 600 пикселей. Если ширина будет больше, появится горизонтальная прокрутка.

Веб-шрифты

Поддерживают Не поддерживают
Apple Mail Lotus Notes 7
Lotus Notes 8 Lotus Notes 8.5
Outlook 2011 for Mac Gmail
iOS Mail Yahoo!
Outlook 2016 Outlook.com
Android App Outlook 2003
Android Mail  2.3 Outlook 2007
Android Mail 4.2 Outlook 2010
Android Mail  4.4 Outlook 2013
Thunderbird
IBM Notes 9
AOL
Blackberry
Alto

Источник: Мейлчимп

Если почтовые клиенты ваших читателей поддерживают веб-шрифты, вы можете подключить их через Typekit. Просто добавьте строчку между тегом head:

<style>
  @import url("https://use.typekit.net/xxxxxxx.css");
</style>

В качестве подстраховки укажите запасной системный шрифт вместо подключённого.

Текст

Использование заголовков <h1> и параграфов <p> может привести к потере отступов.
Теги для списков тоже поддерживаются не во всех клиентах. Иногда теряется отступ между строками, иногда не рисуется булит. Таблицы — наше всё.

***

В письмах, как и в вебе, не нужно стремиться к тому, чтобы все выглядело одинаково во всех клиентах. Скорее всего, у вас ничего не выйдет — скругления на кнопках везде будут выглядеть по-разному. Лучше сосредоточьтесь на контенте и сделайте так, чтобы письмо было приятно и удобно читать. Держите напоследок памятку от Мейлчимпа, что можно, а что нельзя в имейл-рассылках.

Работают везде Работают не везде Не работают
Табличные макеты

Вложенные таблицы

Макеты с шириной 600–800 пикселей

Инлайновые CSS

Системные веб-шрифты

Фоновые изображения

Макеты на весь экран

wide layouts

Карты изображений

Встроенные CSS

JavaScript

<iframe>

Flash

Встроенное аудио

Встроенное видео

Формы

<div> слои

Поделиться
Отправить