Pull to refresh

10 рекомендаций по html-верстке электронных писем

Reading time 4 min
Views 106K
Рекомендация первая: забудьте про блочную верстку. Весь лэйаут должен быть на таблицах. При этом, без крайней необходимости — их тоже лучше не использовать. Также следует выкинуть из головы представления о семантике, сокращенных css-правилах, валидации, плавающих блоках — и прочее. Самый распространенный в РФ почтовый сервис на данный момент (mail.ru) вообще не понимает стили (css). Любые тэги/атрибуты style заменяются на xstyle и не работают. Вообще все.

Так что, фактически, при вёрстке html для почтовой рассылки надо мысленно переместиться в 90-ые годы прошлого века и смело использовать все распространенные приёмы того времени.

Для тех, кто с ними не знаком (как я был) — напомню:

1) layout


ещё раз — лэйаут на таблицах (никакого позиционирования средствами css, никаких float'ов, clear'ов и пр.), причём, mail.ru автоматически добавляет довольно внушительные padding'и для всех td, это также надо учитывать (например, если одна картинка порезана на куски и распихана по разным ячейкам — добиться их бесшовного соединения будет невозомжно)… но, хвала богам, мы можем использовать класс из стилей самого mail.ru, обнуляющий паддинги, он так и называется — pad_null! спасибо, rybyakov!;

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-письма на основе шаблона (Сообщение → Создать с использованием → Выбор бланка...), но буду благодарен хабрасообществу за советы по этой части… да и вообще по всем :)




Статья моя — первая. Т.е. первая моя статья на Хабрахабре, но, конечно, не первое исследование в этой области, полезные ссылки — вот:



А то, что я написал, на роль исследования не претендует, но всё подкреплено личным опытом. Любые мнения и дополнения, как я уже сказал, приветствуются.

PS: если кого-то заинтересуют точные (и современные) данные по отдельным почтовым клиентам и веб-сервисам — могу продолжить в дальнейших публикациях.
Tags:
Hubs:
+98
Comments 104
Comments Comments 104

Articles