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

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

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

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

• Чтобы не было проблем с кодировками — верстаем в UTF-8, в HEAD нужно указазываем ;


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


• Mail.ru делает большие отступы у элементов, чтобы их не было надо обернуть письмо в
  ;


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


• В текстовой версии нельзя использовать 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 отступ, надо, чтобы между тегом картинки и тегом закрытия ячейки не было пробельных символов (при этом допускается использование для переноса строки комментария вида:
  
  Outlook 2007 иногда не ресайзит растянутые картинки. Надо использовать картинки один к одному как указано в макете;
  Иногда бывают в Outlook 2007, когда картинка, помещённая внутрь какого-то td, у которого задан colspan или rowspan, обрезается вдоль продолжения линии границы соседних ячеек, которые объединяет colspan или rowspan. В этом случае отображается часть целого изображения-картинки. Проблема не решалась без разрезания объединённой ячейки на несколько одиночных и дробления проблемной картинки на несколько частей, каждая из которых занимала бы одну простую ячейку таблицы;
  На некоторых инсталляциях Outlook письмо без переносов строк начинает корежить очень странным образом. Можно делать без переносов отдельные таблицы, но очень длинных строк надо избегать;
  В The Bat! при использовании прозрачных гифов прозрачные точки заменяются чёрными.Поэтому "прозрачные" распорки должны заполняться цветом фона, на котором они расположены
  
  
  Когда я упоминаю название какого то хостера почты, то имеется в виду его веб-интерфейс, а не POP/IMAP
  
  Второй пункт из этого списка более обстоятельно описан в топике «10 рекомендаций по html-верстке электронных писем»
  
  updateот sunnyfetis: «есть отличный ресурс, где можно посмотреть поддержку
  CSS в том или ином клиенте http://www.campaignmonitor.com/css/»

Оставить комментарий

Популярные посты:

• Ранее
• Архив