CSS, HTML
Некоторые полезные возможности CSS и HTML.

Верстка для писем существенно отличается от верстки под браузеры. Несмотря на постоянно выходящие новые версии почтовых программ и офисных пакетов, стандарты верстки не меняются и как были архаичными, такими и остались.

Общие правила верстки

Обычно письма верстают в хтмл файлике в Хроме или Firefox, потом проверяют в IE и затем загружают в почтовую программу или приложение для рассылок. Важно помнить следующие вещи при верстке:

  • CSS-файлы не подключаются к рассылке;
  • CSS в виде куска кода в начале письма также не работает;
  • В большинстве случаев <div> не поддерживаются, поэтому стоит использовать таблицы. Обязательно надо учитывать, что для каждой вложенной таблицы придется задавать размер шрифта, межстрочное расстояние, цвет шрифта, если они отличаются от базовых;
  • В большинстве случаев работает тег style для элементов, так что писать <font> не обязательно.
  • Не использовать DOCTYPE, т.к. Email-клиенты его вырезают;
  • Не использовать JavaScript в коде шаблона;

Картинки

Фоновые картинки не работают, работает только фон на все письмо (background для body).

В письмах не работают такие атрибуты картинок, как align, vspace и hspace. Также очень сложно добиться бесшовного склеивания картинки, если она порезана на куски. Обтекание картинки текстом можно сымитировать только с помощью таблицы.
Если после картинки образуется отступ - перенесите следующий тег сразу за картинку без переноса строки.
Если картинка одна в таблице, то стиль style=«display:block» этой картинке.
Outlook 2007 иногда не ресайзит растянутые картинки. Надо использовать картинки один к одному как указано в макете.
Рекомендуется для картинок указывать высоту и ширину.
Рекомендуется использовать атрибут alt у изображений.
Лучше, если картинки в рассылке будут выложены на сервер и в письме будут даны на них абсолютные ссылки.

 

Ссылки

Пока нет возможности задавать цвет ссылки при наведении, цвет активной и просмотренной ссылки. Цвет обычной ссылки можно задать стилем. Для каждой ссылки придется задавать его вручную.
Чтобы ссылка открывалась в новом окне - надо ей добавлять target = "_blank".

Позиционирование блоков

Нет поддержки float и clear.
Не работает абсолютное, относительное и фиксированное позиционирование. CSS-правила position вырезаются почтовыми клиентами в целях безопасности.

Фоны и заливка

Заливка блока какой-либо картиной не срабатывает, только одним цветом. Причем использовать надо заливку ячейки таблицы и атрибут bgcolor или style="background:...". Цвет надо задавать в шестнадцатеричном формате, не в сокращенной форме - "#000". Так что фоновые картинки придется вставлять обычным тегом img.

Таблицы
Желательно устанавливать фиксированную ширину таблиц в шаблоне. Стоит использовать атрибуты cellpadding и cellspacing в теге ‘<table>’.

Карты изображений

Если у вас в макете есть фоновая картинка, на которой должен быть кликабельный текст, то лучше использовать карты изображений <map>, где координатами указываются положения ссылок. Однако некоторые почтовые клиенты могут карту изображений не видеть.

Реклама на сайте

Аренда коттеджа с бассейном в Москве
Типовые договора по аренде и найму. Об аренде недвижимости
avroraspahotel.ru
http://car-reta.ru
Прокат лимузинов
car-reta.ru