Грабли при верстке HTML писем Хабрахабр. Довольно часто наши клиенты устраивают регулярные рассылки с новостями. Почти всегда их не устраивают текстовые рассылки или простое оформление HTML рассылок. Наши дизайнеры вовсю креативят, а мы потом набиваем шишки при верстке их макетов с корректным отображением во множестве почтовых клиентов. Ниже список встретившихся нам особенностей и способы их разрешения как то упорядочить их мне не удалось, поэтому вс идет единым спискомЧтобы не было проблем с кодировками верстаем в UTF 8, в HEAD нужно указазываем lt meta http equivContent Type contenttexthtml charsetutf 8 Mail. Яндекса и Рамблера вырезают весь css, поэтому верстать надо с помощью HTML3. Mail. ru делает большие отступы у элементов, чтобы их не было надо обернуть письмо в lt div idmailsub Mail. Яндекс превращает отступыt в коде в nbsp поэтому код не должен отбиваться табами В текстовой версии нельзя использовать html entities, потому что это текстовая версия, а не HTML. Также, в текстовой версии нельзя использовать unicode символы, которых нет в windows 1. Мы правда нашли 1 хак можно указать background image для body. Тогда этот Outlook покажет фон. Мы правда нашли 1 хак можно указать backgroundimage для body. Тогда этот Outlook покажет фон. Но хак не работает, если мы используем backgroundposition или backgroundrepeat. В web клиентах этот фон не будет показан, поэтому нужно дублировать его указание в style у body. Используйте встроенный CSS inline для получения большего контроля над другими элементами письма шрифты, цвет фона и т. CSS Inliner от Печкина. Самый простой способ увидеть, как HTMLтаблицы и встроенный CSS могут использоваться в шаблонах. Желаете пройти весь курс по сервису Джастклик Это здесь httpbakinruss. Фон под текстом должен быть однородным просто заливка цветом, желательно белый, градиент и картинки делать не стоит, т. Крайне желательно для текстового блока использовать общепринятые шрифты. Нюанс в том, что если у пользователя нет какогото. Но хак не работает, если мы используем background position или background repeat. В web клиентах этот фон не будет показан, поэтому нужно дублировать его указание в style у body для Outlook, и в background у корневой table для веб клиентов Outlook 2. У table с cellpadding0 cellspacing0 таких полей нет В последних рассылках Диснея нам пришлось полностью отказаться от использования фоновых картинок, т. Текст при этом тоже включается в картинки, ссылки расставляются с помощью areamapareamap использовать нельзя, т. Фон Для Писем' title='Фон Для Писем' />Надо нарезать письмо на картинки и сохранять их таблице В Gmail если у картинки, которая является единственной в ячейке таблицы, появляется 3px отступ снизу, его можно устранить, указав styledisplay block этой картинке В Рамблер картинки, указанные в теле письма, сливаются на их сервер с подменой ссылок, соответственно если смотреть рассылку отправленную со своих серверов, закрытых извне http авторизаций, то картинки не будут отображаться В Яндексе если тело письма поместить внутрь. При этом картинки могут не отображаться, а ссылки не открываться Чтобы в IE6 внизу картинок не отображался 3px отступ, надо, чтобы между тегом картинки и тегом закрытия ячейки не было пробельных символов при этом допускается использование для переноса строки комментария вида lt td lt img src. Надо использовать картинки один к одному как указано в макете Иногда бывают в Outlook 2. В этом случае отображается часть целого изображения картинки. Проблема не решалась без разрезания объединнной ячейки на несколько одиночных и дробления проблемной картинки на несколько частей, каждая из которых занимала бы одну простую ячейку таблицы На некоторых инсталляциях Outlook письмо без переносов строк начинает корежить очень странным образом. Инструкция По Эксплуатации Скороварки Скарлет тут. Можно делать без переносов отдельные таблицы, но очень длинных строк надо избегать В The BatБелый лист в. Бумага Листок из школьной тетради желтый фоны. Листок из шк. Бумага Бумага для писем фоны. Бумага для п. Бумага Клеточка фоны. Клеточка Бумага Красивый текст фоны. Красивый текст. Бумага Старая тетрадьв линеечку фоны. Старая тетра. Бумага Текст письма с бабочкой фоны.