Особенности вёрстки 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.

  4. CSS в письме
    Используйте только inline-стили; внешние CSS-файлы, скорее всего, будут проигнорированы. Не применяйте специфические правила (overflow, border-radius и т.д.).
    Снова об Outlook: я не смог его заставить правильно реагировать на свойство valign="middle". Текст всегда располагался сверху. Пришлось  использовать встроенную таблицу.
  5. Изображения
    Не надо их вставлять в письмо, пользуйтесь абсолютными ссылками на картинки, расположенные на сервере.
    Указывайте высоту и ширину, alt-текст.
  6. Ссылки
    Применяйте атрибут target="_blank", чтобы страница не загружалась в одном окне с письмом.
  7. Тестирование
    Регистрируйте аккаунты в популярных email-сервисах (gmail, yandex, rambler, mail), устанавливайте Outlook, Mozilla Thunderbird и др. почтовые клиенты, затем занимайтесь проверкой отображения Вашего письма.
    Либо воспользуйтесь сервисом Litmus - скриншоты письма во многих клиентах, анализатор кода с подсветкой ошибок. Но за удовольствие надо платить, есть пробный период.
  8. Кэширование в почтовых клиентах
    Заметил в Mozilla Thunderbird, что изображения сохраняются в кэше, поэтому при смене картинок не забывайте его очищать. Это можно сделать так: "Инструменты" - "Настройка". Вкладка "Дополнительные" - "Сеть и дисковое пространство" - кнопка "Очистить сейчас".

Теги: