![[info]](http://l-stat.livejournal.com/img/community.gif?v=92.2){kind=small}
Довольно часто наши клиенты устраивают регулярные рассылки с новостями. Почти всегда их не устраивают текстовые рассылки или простое оформление 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) в коде в поэтому код не должен отбиваться табами;
- В текстовой версии нельзя использовать 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" таких полей нет;
- В последних рассылках Диснея нам пришлось полностью отказаться от использования фоновых картинок, т.к. при этом были проблемы с позиционированием картинок поверх фона и делать основной макет состоящим из набора картинок внутри таблицы. Текст при этом тоже включается в картинки,
ссылки расставляются с помощью areamapareamap использовать нельзя, т.к. в 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 от
![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=92.2){kind=small}
sunnyfetis: «есть отличный ресурс, где можно посмотреть поддержкуCSS в том или ином клиенте http://www.campaignmonitor.com/css/
October 18 2010, 17:09:49 UTC 1 year ago
October 18 2010, 17:23:03 UTC 1 year ago
October 18 2010, 17:19:45 UTC 1 year ago
October 18 2010, 17:28:59 UTC 1 year ago
October 18 2010, 17:22:20 UTC 1 year ago
ну в общем-то это главное правило при верстке html-писем. хотя инлайн-стили прокатывают практически везде.
> Mail.ru (и похоже что и Яндекс) превращает отступы в коде в ???
там символ пропущен
от себ добавлю, что есть отличный ресурс, где можно посмотреть поддержку CSS в том или ином клиенте http://www.campaignmonitor.com/css/
October 18 2010, 17:41:45 UTC 1 year ago
Хм, похоже что их парсеры стали гораздо лояльнее к верстальщикам. Раньше было обычным делом заменять аттрибуты style, на xstyle или совсем их вырезать. Но остальные баги вполне свежие, поэтому удалять пост не буду
> там символ пропущен
поправил
October 18 2010, 17:45:52 UTC 1 year ago
October 18 2010, 17:23:04 UTC 1 year ago
October 18 2010, 17:32:09 UTC 1 year ago
October 18 2010, 17:38:40 UTC 1 year ago
October 18 2010, 18:42:47 UTC 1 year ago
Спасибо!
October 18 2010, 18:18:46 UTC 1 year ago
October 18 2010, 18:20:03 UTC 1 year ago
October 18 2010, 18:45:22 UTC 1 year ago
October 18 2010, 19:27:31 UTC 1 year ago
структура получается жуткая. таблица в таблице в таблице в таблице в таблице в таблице иногда бывает, что бы не было отступов в ие которые неожиданно появляются нужно из проблемных строк удалять все пробелы.
дополнение к вашим правилам - если дизайн вашего письма идет на каком то фоне одноцветном, то нужно таблицу обернуть в див обтекающий таблицу в какуюто определенную ширину, большую чем основная таблица, это для того что бы "браузерные почтовики", почтовые сервисы, отображали этот фон и не было казусов типо какашек под\над закругленными уголками картинок в джепегах, в стэндэлон почтовиках все ок и так.
второе инлайн цсс разрешается. точнее разрешается только он и только в боди.
colspan и rowspan нежелательно использовать вообще. т.к. в большинстве случаев это не дает быстро изменить контент в шаблоне, можно запутаться, куда проще когда таблица в таблице в таблице.
и да, у картинок должны быть обязательно просталвены высота и ширина, аутлуки иногда тянут картинки как им вздумается, даже если внешних факторов на это нету(например не вмещается в ячейку - внешний фактор. хотя он и не должен влиять на размеры картинки).
как то так.
цсс используем поминимуму, форматирование текста и почти все. паддинги и маргины лучше заменять ячейками пустыми определнных величин.
ненавижу табличную верстку.
October 18 2010, 19:28:37 UTC 1 year ago
October 19 2010, 04:49:13 UTC 1 year ago
за месяц было сверстано порядка 20 писем - на майл ру отображается отлично если
<td style="padding:0px;margin:0px;"><img src="part1.jpg"></td>
<td style="padding:0px;margin:0px;"><img src="part2.jpg"></td>
October 19 2010, 10:43:25 UTC 1 year ago
иногда встречаются правда оригинальные приколы, например сочетание "Cloud Computing" ЯхуМейл решил почемуто сделать ссылкой на какойто там справочник. ссылка получилась почти невидна на фоне и с доттед-подчеркиванием, мдя.
воoбще спасибо большое, особенно за эти всякие mailsub и pad_null :)
November 3 2010, 13:58:26 UTC 1 year ago
April 14 2012, 13:23:15 UTC 1 month ago
Надо вам вёрстку - сделайте её в нормальном формате (хотя бы pdf) и пришлите attach'ем. А в тексте письма - небольшую пояснительную записку. В plain text.