Основные ошибки в подготовке писем. Верстка HTML-писем

Дата публикации
24.09.2014

HTMLЧасть Ваших подписчиков просматривает полученные письма через веб интерфейс своих почтовых ящиков (gmail.com, yandex.ru, mail.ru И тд) и это отлично. Но остальная часть подписчиков использует почтовые клиенты, такие как Outlook, The bat  и т.д. Некоторые из этих программ имеют ограниченные способности в отображении полученных писем.  Поэтому, для корректного отображения писем, необходимо придерживаться следующих правил:

  1. При компоновке письма всегда уменьшайте рисунки до необходимых размеров заранее, так как в Outlook они все равно увеличатся до своего исходного размера, испортив вам всю картину.
     
  2. К сожалению, фоновые изображения не поддерживаются некоторыми почтовыми клиентами, поэтому не стоит их использовать в своем письме, либо задавайте альтернативный однотонный фоновый цвет. Единственный способ добиться отображения фонового рисунка во всех перечисленных выше почтовых клиентах это прописать исключительно в тег <body> следующий стиль: style="background: url();
     
  3. Блочная верстка не подойдет! Поэтому про такие свойства как clear и float можно забыть. За основу нужно брать только таблицы,  оптимальная ширина до 700 px
     
  4. Множество статей, посвященные верстке HTML-писем единогласно пишут, что все стили нужно прописывать исключительно inline. Это, конечно, правильно, но уже в настоящий момент, все перечисленные мною выше почтовые системы понимают и встроенные стили (даже MC Office Outlook всех версий). Внешние таблицы стилей по-прежнему использовать нельзя.
     
    <style type="text/css">
    span
    {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #404040;
    }
    </style> 
  5. Для того чтобы текст письма отображался во всех почтовых клиентах одинаково, его необходимо оборачивать в дополнительный инлайновский тег (используя старый – добрый font) Стили обобщать нельзя, т.е. если прописать font:italic 10px Arial; половина почтовиков их не поймет, прописывать нужно каждый стиль отдельно font-family, font-style, font-size и т.д.;
     
    <p>
       <font face="Arial" size="2" style="font-size: 12px;" color="#404040">Это тестовый текст</font>
    </p> 
  6. Padding и margin лучше не использовать. Вместо них <tr><td></td></tr> c фиксированными размерами;
     
  7. Цвета прописываются также полностью, т.е. color:#FFF не работает, работает color:#FFFFFF
     
  8. Для оформления текста используется тег <div> или <span>, не использовать <p>, <font>
     
  9. Для таблиц нужно обязательно сбрасывать все отступы по умолчанию и границы т.е. border=«0« cellpadding="0" cellspacing=»0»
     
  10. Ячейкам таблицы задавайте точные размеры, если не хотите увидеть свою таблицу, расползшуюся на все тело письма.
     
  11. Для горизонтальных отступов использовать ячейки таблицы с заданной шириной, внутрь ячейки помещать тег <br/>
     
  12. Если в ячейке лежит только картинка, например высотой 10px, для нее нужно прописать такой ячейке
    font-size:1px; line-height:1px;
  13. Для вертикального выравнивания в таблице использовать атрибут valign
     
  14. Для тега <img> обязательно прописывать размеры, и атрибут border=0
     
  15. Для ссылок ставить target=«_blank»

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

Также рекомендую выполнять проверку на СПАМ, и проанализировать полученные рекомендации по улучшению компоновки письма.

Читайте также

Подпишитесь на дайджест по email-маркетингу!