Особенности вёрстки HTML-писем | Паршин Павел

Приведу ряд особенностей, с которыми я столкнулся при создании электронной HTML-рассылки.

  1. Используйте только таблицы. Никаких DIV элементов

    Некоторые почтовые клиенты, такие как Gmail и Outlook 2007, не поддерживают слои.
    Не пользуйтесь CSS-свойствами margin, padding, float: задавайте отступы с помощью высоты и ширины ячеек таблиц.
    Не бойтесь использовать встроенные таблицы.

  2. Задавайте таблицам фиксированную высоту и ширину

    Предпочтительно, чтобы ширина вашего письма была в пределах 600-650px.
    Высота не имеет значения, но длинные письма лучше избегать - клиент устанет читать, затратит лишний интернет-трафик (актуально для мобильных телефонов) и время.
    Задавайте высоту и ширину всех ячеек всех таблиц - это избавит вас от многих проблем.

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

    Microsoft как обычно отличился с отрицательной стороны. Почтовый клиент не поддерживает фоновые изображения, заданные через CSS-стили.
    Привожу метод, который успешно зарекомендовал себя:

<td height="150" width="150" valign="top" style="background: url('img/1.jpg') right 0 no-repeat;">
    <!--[if gte mso 9]
       <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage1" style='behavior: url(#default#VML); display: block; position: absolute; width: 150px; height: 150px; border: 0; margin: 0; z-index: -1;' src="img/1.jpg" />
    <![endif]-->
    Некоторый текст в ячейке.
</td>

В этом примере ячейке задано фоновое изображение 1.jpg с помощью CSS-правила background. Далее вставляем код для Outlook, другие почтовые клиенты просто проигнорируют его. Проверено в Outlook 2003, 2007, 2010.

  1. CSS в письме

    Используйте только inline-стили; внешние CSS-файлы, скорее всего, будут проигнорированы. Не применяйте специфические правила (overflow, border-radius и т.д.).
    Снова об Outlook: я не смог его заставить правильно реагировать на свойство valign="middle". Текст всегда располагался сверху. Пришлось  использовать встроенную таблицу.

  2. Изображения

    Не надо их вставлять в письмо, пользуйтесь абсолютными ссылками на картинки, расположенные на сервере.
    Указывайте высоту и ширину, alt-текст.

  3. Ссылки

    Применяйте атрибут target="_blank", чтобы страница не загружалась в одном окне с письмом.

  4. Тестирование

    Регистрируйте аккаунты в популярных email-сервисах (gmail, yandex, rambler, mail), устанавливайте Outlook, Mozilla Thunderbird и др. почтовые клиенты, затем занимайтесь проверкой отображения письма.
    Либо воспользуйтесь сервисом Litmus - скриншоты письма во многих клиентах, анализатор кода с подсветкой ошибок. Но за удовольствие надо платить, есть пробный период.

  5. Кэширование в почтовых клиентах

    Заметил в Mozilla Thunderbird, что изображения сохраняются в кэше, поэтому при смене картинок не забывайте его очищать. Это можно сделать так: "Инструменты" - "Настройка". Вкладка "Дополнительные" - "Сеть и дисковое пространство" - кнопка "Очистить сейчас".

Предыдущая запись Следующая запись