Туговиков Станислав (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/ »
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 20 comments