Блог saintista

Весь лэйаут должен быть таблицами. При этом, без крайней необходимости — их тоже лучше не использовать. Забываем семантику, сокращенные css-правилах, валидацию, плавающих блоках — и прочее.

При вёрстке html для почтовой рассылки используем приемы 90-ых годов XX века.

layout

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

css

все стили должны быть инлайновыми (т.е. находиться в атрибутах style):

<div style=»…»>…</div>

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>

только фиксированные размеры всех ячеек;

Можно для создания левого отступа средствами чистого html использовать соответствующий тэг, имеющий левый отступ «по умолчанию» — dd… но outlook 2007, осуществляющий рендеринг html-страниц при помощи движка от microsoft office word (!), начинает при этом страшно глючить, так что вариант отпадает

padding-top, padding-bottom

для создания вертикальных отступов надо использовать картинки , сделать «пустую» картинку (лучше не 1?1, а хотя бы 10?10, чтобы письмо не оказалось вдруг в папке со спамом) и путём задания для неё нужной высоты формировать соответствующий отступ (также мы помещаем картинку в div, понятно, думаю, зачем):

<div><img src=»padding.png» alt=»" border=»0″ height=»10″></div>

единицы измерения (px) в значении атрибута не указываются — в соответствии со стандартами;

font

чтобы поменять гарнитуру/размер/цвет шрифта придётся каждый раз задавать все параметры при помощи архаичного тэга font (каждый раз — вообще для любого текста внутри любых блочных тэгов и все):

<font face=»tahoma,sans-serif» color=»#000000″ size=»2″>текст ссылки</font>

нужно поменять цвет ссылки, тэг font располагаем внутри a;

ссылки

следует не забывать добавлять атрибут target со значением _blank (чтобы ваш сайт не пытался открыться прямо в окне почтового клиента) и если вы привыкли ставить «до поры до времени» в пустые ссылки решетку (#), не удивляйтесь, что gmail и yandex такие ссылки за ссылки не посчитают — проще говоря, следует сразу задавать реальные адреса;

цвета

для того, чтобы сделать прямоугольный блок с текстом, залитый каким-нибудь фоновым цветом, делаем таблицу, в ней строку, в ней ячейку и для ячейки — атрибут bgcolor, больше вариантов нет… кроме того, при задании любого цвета в шестнадцатеричном формате нельзя использовать сокращенную запись (например, #FFF вместо #FFFFFF) — заданный таким образом цвет автоматически трансформируется в чёрный;

картинки в тексте

В любом самоучителе по html тех времён рассказывалось, как можно сделать обтекание текста вокруг картинки (без всякого css) — при помощи атрибутов тэга img, а именно align, vspace и hspace — воспользоваться этим нам тоже нельзя некоторые почтовые клиенты (и среди них, например, the bat) эти атрибуты проигнорируют, при этом, float:left будет работать в них также криво (или не работать вообще) — вывод: опять спасаемся таблицами;

картинки в оформлении

т.к. в background адреса картинок мы прописывать, фактически, не можем — все оформительские рисунки придётся включать при помощи тэга img и лучше обнулить межстрочный интервал, чтобы предотвратить возникновение нежелательных (и непонятных) отступов в том же the bat:

<div style=»line-height:0;»><img src=»border.png» alt=»"></div>

программы и инструментарий

ничего лучше outlook express нет — он позволяет легко создавать html-письма на основе шаблона (Сообщение ? Создать с использованием ? Выбор бланка…)

вот пример верстки в html для email рассылки

смотри код как и что

ps:в примере ссылки на изображения относительные, в рабочем варианте нужно делать как было сказано полными

Валидация email в WordPress

Верстка email рассылок (семь простых правил)

Получить полный код ссылки html

Парсер email-адрессов

php codeigniter отправка писем кириллицей

WordPress term_description используем html

jQuery table sort сортировка таблиц

Сбор email Twitter пользователей

вставка в html flash swf и z-index

phpQuery шпоргалка

Prototype и jQuery используем одновременно

Антиспам (спамфильтр)

Запись была опубликована Вторник, мая 26, 2009 в 21:33 в рубрике Верстка. Читать рассылку RSS 2.0. Вы можете оставить комментарий или трэкбек с Вашего сайта.