5 советов вёрстки для email-рассылок

1. Табличная вёрстка

Вёрстка для email-рассылок должна быть в табличной форме. Это нужно для того, чтобы содержимое письма открывалось везде одинаково, в том числе в почтовых программах.

<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse: collapse">
    <tbody>
        <tr>
            <td>Содержимое письма</td>
        </tr>
    </tbody>
</table>

2. Стили

Подключать файлы стилей через CSS не надо, потому что многие почтовые сервисы вырезают подключение стилей. Также они вырезают стили из тега <style>.

Поддерживаемые HTML-элементы в почтовых сервисах можно увидеть на сайте campaignmonitor.com/css/.

Все стили надо прописывать для каждого элемента через атрибут style.

<span style="color: #333; font-size: 17px;">Текст</span>

3. Размеры для картинок

Для картинок надо задавать ширину и высоту.

<img src="pic.jpg" width="600" height="300" alt="">

4. Кодировка

В самом начале вёрстки надо указывать кодировку письма:

<meta http-equiv="content-type" content="text/html; charset=utf-8">

5. List-Unsubscribe

Это больше относится к программной части. Для каждого письма рекомендуется добавлять заголовок List-Unsubscribe, после чего у почтовых сервисов (если они поддерживают List-Unsubscribe) появится дополнительная кнопка «Отписаться».

Также с данным параметром меньше шанса попасть в «спам-лист».

Данный заголовок настраивается разработчиком.

Пример кнопки «Отписаться» в почтовом сервисе

List-Unsubscribe