Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

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

Дата добавления: 31.08.2013 - 00:17
Добавил: Buger
Количество просмотров: 748
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Базовые правила HTML верстки писем для email рассылки
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Для того, чтобы email рассылка смотрелась максимально одинаково в большинстве почтовых клиентах, необходимо придерживаться некоторых базовыx правил HTML верстки email-писем.

Несколько примеров почтовых клиентов:

  • веб-версии у почтовых провайдеров (Gmail, Yandex, Mail, Yahoo и т.д.)
  • десктопные почтовые клиенты (Outlook, Bat, Thunderbird, MacMail)
  • мобильные почтовые клиенты (Blackberry, Android, Iphone, Ipad и т.д.)

К сожалению, не существует обязательного стандарта верстки писем, который бы универсально поддерживался бы всеми клиентами. Часть поддерживает CSS3, часть нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется даже в пределах одного почтового клиента от версии к версии. Последнее особенно заметно на примере Outlook (от Express и 2003 к Outlook 2011).


Что же необходимо знать тем, кто собирается самостоятельно верстать HTML-код для email-писем?

1. Табличная верстка.

Верстая таблицами и забыв про блочную верстку, вы однозначно убережете себя от проблем со старыми почтовыми клиентами. Также, не стоит забывать, что веб-версии у почтовых провайдеров могут открываться в самых разнообразных браузерах, вполне возможно, даже в IE 6.0. Таблицы помогут вам быть аккуратными и красивыми везде одинаково.

2. Использовать универсально-поддерживаемые аттрибуты у HTML-тегов.

 

ТэгАттрибуты
aclass, href, id, style, target
bclass, id, style
brclass, id, style
divalign, class, dir, id, style
fontclass, color, face, id, size, style
h1align, class, dir, id, style
h2align, class, dir, id, style
h3align, class, dir, id, style
h4align, class, dir, id, style
h5align, class, dir, id, style
h6align, class, dir, id, style
headdir, lang
hralign, size, width
imgalign, border, class, height, hspace, id, src, style, usemap, vspace, width
labelclass, id, style
liclass, dir, id, style, type
olclass, dir, id, style, type
palign, class, dir, id, style
spanclass, id, style
strongclass, id, style
tablealign, bgcolor, border, cellpadding, cellspacing, class, dir, frame, id, rules, style, width
tdabbr, align, bgcolor, class, colspan, dir, height, id, lang, rowspan, scope, style, valign, width
thabbr, align, background, bgcolor, class, colspan, dir, height, id, lang, scope, style, valign, width
tralign, bgcolor, class, dir, id, style, valign
uclass, id, style
ulclass, dir, id, style

 

3. Использовать универсально-поддерживаемые CSS-свойства

 

CSS Свойства (строго Inline)
backgroundbackground-colorborder
border-bottomborder-bottom-colorborder-bottom-style
border-bottom-widthborder-colorborder-left
border-left-colorborder-left-styleborder-left-width
border-rightborder-right-colorborder-right-style
border-right-widthborder-styleborder-top
border-top-colorborder-widthcolor
displayfontfont-family
font-sizefont-stylefont-variant
font-weightheightletter-spacing
line-heightlist-style-typepadding
padding-bottompadding-leftpadding-right
padding-toptable-layouttext-align
text-decorationtext-indenttext-transform
vertical-alignwidth 


4. Желательно использовать ширину всего документа в 600px.

Задайте максимальную ширину в 600 пикселей и обезопасьте себя от гневных отзывов о горизонтальной прокрутке в почтовых клиентах ваших подписчиков.

Использование этих правил позволит вам создать универсально отображаемую HTML-версию своего письма, а, значит, все ваши подписчики будут удовлетворены ее внешним видом без исключений!




Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.