Рекомендация первая: забудьте про блочную верстку. Весь лэйаут должен быть на таблицах. При этом, без крайней необходимости — их тоже лучше не использовать. Также следует выкинуть из головы представления о семантике, сокращенных css-правилах, валидации, плавающих блоках — и прочее. Самый распространенный в РФ почтовый сервис на данный момент (mail.ru) вообще не понимает стили (css). Любые тэги/атрибуты style заменяются на xstyle и не работают. Вообще все.
Так что, фактически, при вёрстке html для почтовой рассылки надо мысленно переместиться в 90-ые годы прошлого века и смело использовать все распространенные приёмы того времени.
Для тех, кто с ними не знаком (как я был) — напомню:
ещё раз — лэйаут на таблицах (никакого позиционирования средствами css, никаких float'ов, clear'ов и пр.), причём, mail.ru автоматически добавляет довольно внушительные padding'и для всех td, это также надо учитывать(например, если одна картинка порезана на куски и распихана по разным ячейкам — добиться их бесшовного соединения будет невозомжно)… но, хвала богам, мы можем использовать класс из стилей самого mail.ru, обнуляющий паддинги, он так и называется — pad_null! спасибо, rybyakov!;
для тех случаев, когда стили всё-таки будут поняты — существует ещё одно ограничение: все стили должны быть инлайновыми (т.е. находиться в атрибутах style):
горизонтальные отступы, по идее, делались в былые времена при помощи дополнительных ячеек таблицы… однако! нормальные веб-сервисы (типа gmail, yandex и rambler) не поймут любимой многими в прошлом конструкции:
серединная ячейка растянется на все 100% (несмотря на nowrap), а левая и правая ячейки — исчезнут (т.е. их ширина будет равна нулю), поэтому горизонтальные отступы «придётся» задавать при помощи css (а для сочетания «mail.ru + резиновый дизайн», видимо, вариантов нет — только фиксированные размеры всех ячеек);
для создания вертикальных отступов надо использовать, как ни странно — картинки (!), т.е., действительно, сделать «пустую» картинку (лучше не 1×1, а хотя бы 10×10, чтобы письмо не оказалось вдруг в папке со спамом) и путём задания для неё нужной высоты формировать соответствующий отступ (также мы помещаем картинку в div, понятно, думаю, зачем):
следует помнить, что единицы измерения (px) в значении атрибута не указываются — в соответствии со стандартами (спасибо, alemiks);
чтобы поменять гарнитуру/размер/цвет шрифта придётся каждый раз задавать ВСЕ эти параметры при помощи архаичного тэга font (каждый раз — вообще для любого текста внутри любых блочных тэгов и все):
если нужно поменять цвет ссылки, тэг font располагается внутри a;
ещё по ссылкам — следует не забывать добавлять атрибут target (да-да, невалидный) со значением _blank (чтобы ваш сайт не пытался открыться прямо в окне почтового клиента) и если вы привыкли ставить «до поры до времени» в пустые ссылки решетку (#), не удивляйтесь, что gmail и yandex такие ссылки за ссылки не посчитают — проще говоря, лучше сразу задавать реальные адреса;
для того, чтобы сделать прямоугольный блок с текстом, залитый каким-нибудь фоновым цветом, придётся делать таблицу, в ней строку, в ней ячейку и для ячейки — атрибут bgcolor, больше вариантов нет… кроме того, при задании любого цвета в шестнадцатеричном формате нельзя использовать сокращенную запись (например, #FFF вместо #FFFFFF) — заданный таким образом цвет автоматически трансформируется в чёрный;
несмотря на то, что в любом самоучителе по html тех самых прекрасных времён рассказывалось, как можно сделать обтекание текста вокруг картинки (без всякого css) — при помощи атрибутов тэга img, а именно align, vspace и hspace — воспользоваться этим нам тоже нельзя :) некоторые почтовые клиенты (и среди них, например, the bat) эти атрибуты проигнорируют, при этом, float:left будет работать в них также криво (или не работать вообще) — вывод: опять спасаемся таблицами;
т.к. в background адреса картинок мы прописывать, фактически, не можем — все оформительские рисунки придётся включать при помощи тэга img и лучше обнулить межстрочный интервал, чтобы предотвратить возникновение нежелательных (и непонятных) отступов в том же the bat:
и знайте, что прозрачные картинки (даже gif'ы) the bat заливает чёрным;
… точнее его отсутствие — для тестирования рассылки я, к моему сожалению (и удивлению), ничего лучше outlook express не нашёл — он позволяет легко создавать html-письма на основе шаблона (Сообщение → Создать с использованием → Выбор бланка...), но буду благодарен хабрасообществу за советы по этой части… да и вообще по всем :)
Статья моя — первая. Т.е. первая моя статья на Хабрахабре, но, конечно, не первое исследование в этой области, полезные ссылки — вот:
А то, что я написал, на роль исследования не претендует, но всё подкреплено личным опытом. Любые мнения и дополнения, как я уже сказал, приветствуются.
PS: если кого-то заинтересуют точные (и современные) данные по отдельным почтовым клиентам и веб-сервисам — могу продолжить в дальнейших публикациях.
Так что, фактически, при вёрстке html для почтовой рассылки надо мысленно переместиться в 90-ые годы прошлого века и смело использовать все распространенные приёмы того времени.
Для тех, кто с ними не знаком (как я был) — напомню:
1) layout
ещё раз — лэйаут на таблицах (никакого позиционирования средствами css, никаких float'ов, clear'ов и пр.), причём, mail.ru автоматически добавляет довольно внушительные padding'и для всех td, это также надо учитывать
2) css
для тех случаев, когда стили всё-таки будут поняты — существует ещё одно ограничение: все стили должны быть инлайновыми (т.е. находиться в атрибутах style):
<div style="...">...</div>3) padding-left, padding-right
горизонтальные отступы, по идее, делались в былые времена при помощи дополнительных ячеек таблицы… однако! нормальные веб-сервисы (типа gmail, yandex и rambler) не поймут любимой многими в прошлом конструкции:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="10" nowrap></td>
<td width="100%"></td>
<td width="10" nowrap></td>
</tr>
</table>серединная ячейка растянется на все 100% (несмотря на nowrap), а левая и правая ячейки — исчезнут (т.е. их ширина будет равна нулю), поэтому горизонтальные отступы «придётся» задавать при помощи css (а для сочетания «mail.ru + резиновый дизайн», видимо, вариантов нет — только фиксированные размеры всех ячеек);
была мысль использовать для создания левого отступа средствами чистого html соответствующий тэг, имеющий левый отступ «по умолчанию» — dd… однако! outlook 2007, осуществляющий рендеринг html-страниц при помощи движка от microsoft office word (!), начинает при этом страшно глючить, так что вариант отпадает;
4) padding-top, padding-bottom
для создания вертикальных отступов надо использовать, как ни странно — картинки (!), т.е., действительно, сделать «пустую» картинку (лучше не 1×1, а хотя бы 10×10, чтобы письмо не оказалось вдруг в папке со спамом) и путём задания для неё нужной высоты формировать соответствующий отступ (также мы помещаем картинку в div, понятно, думаю, зачем):
<div><img src="padding.png" alt="" border="0" height="10"></div>следует помнить, что единицы измерения (px) в значении атрибута не указываются — в соответствии со стандартами (спасибо, alemiks);
5) font
чтобы поменять гарнитуру/размер/цвет шрифта придётся каждый раз задавать ВСЕ эти параметры при помощи архаичного тэга font (каждый раз — вообще для любого текста внутри любых блочных тэгов и все):
<font face="tahoma,sans-serif" color="#000000" size="2">текст ссылки</font>если нужно поменять цвет ссылки, тэг font располагается внутри a;
6) ссылки
ещё по ссылкам — следует не забывать добавлять атрибут target (да-да, невалидный) со значением _blank (чтобы ваш сайт не пытался открыться прямо в окне почтового клиента) и если вы привыкли ставить «до поры до времени» в пустые ссылки решетку (#), не удивляйтесь, что gmail и yandex такие ссылки за ссылки не посчитают — проще говоря, лучше сразу задавать реальные адреса;
7) цвета
для того, чтобы сделать прямоугольный блок с текстом, залитый каким-нибудь фоновым цветом, придётся делать таблицу, в ней строку, в ней ячейку и для ячейки — атрибут bgcolor, больше вариантов нет… кроме того, при задании любого цвета в шестнадцатеричном формате нельзя использовать сокращенную запись (например, #FFF вместо #FFFFFF) — заданный таким образом цвет автоматически трансформируется в чёрный;
8) картинки в тексте
несмотря на то, что в любом самоучителе по html тех самых прекрасных времён рассказывалось, как можно сделать обтекание текста вокруг картинки (без всякого css) — при помощи атрибутов тэга img, а именно align, vspace и hspace — воспользоваться этим нам тоже нельзя :) некоторые почтовые клиенты (и среди них, например, the bat) эти атрибуты проигнорируют, при этом, float:left будет работать в них также криво (или не работать вообще) — вывод: опять спасаемся таблицами;
9) картинки в оформлении
т.к. в background адреса картинок мы прописывать, фактически, не можем — все оформительские рисунки придётся включать при помощи тэга img и лучше обнулить межстрочный интервал, чтобы предотвратить возникновение нежелательных (и непонятных) отступов в том же the bat:
<div style="line-height:0;"><img src="border.png" alt=""></div>и знайте, что прозрачные картинки (даже gif'ы) the bat заливает чёрным;
10) программы и инструментарий
… точнее его отсутствие — для тестирования рассылки я, к моему сожалению (и удивлению), ничего лучше outlook express не нашёл — он позволяет легко создавать html-письма на основе шаблона (Сообщение → Создать с использованием → Выбор бланка...), но буду благодарен хабрасообществу за советы по этой части… да и вообще по всем :)
Статья моя — первая. Т.е. первая моя статья на Хабрахабре, но, конечно, не первое исследование в этой области, полезные ссылки — вот:
- Поддержка CSS в почтовых системах Рунета (правда, данные, например, по rambler — устарели);
- A Guide to CSS Support in Email: 2007 Edition (на английском)
- Как правильно сверстать письмо в HTML формате (переводная)
А то, что я написал, на роль исследования не претендует, но всё подкреплено личным опытом. Любые мнения и дополнения, как я уже сказал, приветствуются.
PS: если кого-то заинтересуют точные (и современные) данные по отдельным почтовым клиентам и веб-сервисам — могу продолжить в дальнейших публикациях.
