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

Вёрстка рассылок похожа на вёрстку документов в 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-скрипт, который динамически подставит картинку в зависимости от часового пояса или местоположения клиента.

Длина писем

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

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

Ширина писем

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

Веб-шрифты

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

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

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

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

Текст

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

***

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