Туговиков Станислав (latrekc) wrote in ru_webdev,
Туговиков Станислав
latrekc
ru_webdev

Грабли при верстке HTML писем

На хабре у меня оказывается недостаточно кармы, чтобы что то писать, поэтому опубликую пока здесь =)опубликовал в блоге «Спам (и антиспам)»

Довольно часто наши клиенты устраивают регулярные рассылки с новостями. Почти всегда их не устраивают текстовые рассылки или простое оформление HTML рассылок. Наши дизайнеры вовсю креативят, а мы потом набиваем шишки при верстке их макетов с корректным отображением во множестве почтовых клиентов.

Ниже список встретившихся нам особенностей и способы их разрешения (как то упорядочить их мне не удалось, поэтому всё идет единым списком)


  • Чтобы не было проблем с кодировками — верстаем в UTF-8, в HEAD нужно указазываем <meta http-equiv="Content-Type" content="text/html; charset=utf-8">;

  • Mail.ru, почты Яндекса и Рамблера вырезают весь css, поэтому верстать надо с помощью HTML3.2;update похоже что это требование (не использовать inline CSS) потеряло свою актуальность с современными парсерами веб почт, впрочем это требует отдельного исследования

  • Mail.ru делает большие отступы у элементов, чтобы их не было надо обернуть письмо в <div id="mailsub">;

  • Mail.ru (и похоже что и Яндекс) превращает отступы(\t) в коде в &nbsp; поэтому код не должен отбиваться табами;

  • В текстовой версии нельзя использовать html entities, потому что это текстовая версия, а не HTML. Также, в текстовой версии нельзя использовать unicode символы, которых нет в windows-1251, т.к. mail.ru зачем то перекодирует письмо в эту кодировку;

  • Outlook 2007 не дает использовать фоновые картинки. Мы правда нашли 1 хак — можно указать background-image для body. Тогда этот Outlook покажет фон. Но хак не работает, если мы используем background-position или background-repeat. В web клиентах этот фон не будет показан, поэтому нужно дублировать его указание — в style у body для Outlook, и в background у "корневой" table для веб клиентов;

  • Outlook 2007 делает поля сверху у элементов типа "div". У "table" с "cellpadding=0 cellspacing=0" таких полей нет;

  • В последних рассылках Диснея нам пришлось полностью отказаться от использования фоновых картинок, т.к. при этом были проблемы с позиционированием картинок поверх фона и делать основной макет состоящим из набора картинок внутри таблицы. Текст при этом тоже включается в картинки, ссылки расставляются с помощью areamap areamap использовать нельзя, т.к. в Gmail по таким ссылкам нельзя кликнуть. Надо нарезать письмо на картинки и сохранять их таблице;

  • В Gmail если у картинки, которая является единственной в ячейке таблицы, появляется 3px отступ снизу, его можно устранить, указав style="display:block" этой картинке;

  • В Рамблер картинки, указанные в теле письма, сливаются на их сервер с подменой ссылок, соответственно если смотреть рассылку отправленную со своих серверов, закрытых извне http авторизаций, то картинки не будут отображаться;

  • В Яндексе ксли тело письма поместить внутрь {strip} (при этом вырезаются все переносы строк), то иногда в теле письма появлятся непонятные переносы, которые могут попасть на значение аттрибута src или href. При этом картинки могут не отображаться, а ссылки — не открываться;

  • Чтобы в IE6 внизу картинок не отображался 3px отступ, надо, чтобы между тегом картинки и тегом закрытия ячейки не было пробельных символов (при этом допускается использование для переноса строки комментария вида:
    <td>
    <img src="" alt="" /><!--
    --></td>

  • Outlook 2007 иногда не ресайзит растянутые картинки. Надо использовать картинки один к одному как указано в макете;

  • Иногда бывают в Outlook 2007, когда картинка, помещённая внутрь какого-то td, у которого задан colspan или rowspan, обрезается вдоль продолжения линии границы соседних ячеек, которые объединяет colspan или rowspan. В этом случае отображается часть целого изображения-картинки. Проблема не решалась без разрезания объединённой ячейки на несколько одиночных и дробления проблемной картинки на несколько частей, каждая из которых занимала бы одну простую ячейку таблицы;

  • На некоторых инсталляциях Outlook письмо без переносов строк начинает корежить очень странным образом. Можно делать без переносов отдельные таблицы, но очень длинных строк надо избегать;

  • В The Bat! при использовании прозрачных гифов прозрачные точки заменяются чёрными.Поэтому "прозрачные" распорки должны заполняться цветом фона, на котором они расположены



Когда я упоминаю название какого то хостера почты, то имеется в виду его веб-интерфейс, а не POP/IMAP

Второй пункт из этого списка более обстоятельно описан в топике «10 рекомендаций по html-верстке электронных писем»

update от sunnyfetis: «есть отличный ресурс, где можно посмотреть поддержку
CSS в том или ином клиенте http://www.campaignmonitor.com/css/ »
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

  • 20 comments