636 Полезно

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

Для того, чтобы email рассылка смотрелась максимально одинаково в большинстве почтовых клиентах, необходимо придерживаться некоторых базовыx правил HTML верстки email-писем.

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

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

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

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

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

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

Тэг
Аттрибуты
a
class, href, id, style, target
b
class, id, style
br
class, id, style
div
align, class, dir, id, style
font
class, color, face, id, size, style
h1
align, class, dir, id, style
h2
align, class, dir, id, style
h3
align, class, dir, id, style
h4
align, class, dir, id, style
h5
align, class, dir, id, style
h6
align, class, dir, id, style
head
dir, lang
hr
align, size, width
img
align, border, class, height, hspace, id, src, style, usemap, vspace, width
label
class, id, style
li
class, dir, id, style, type
ol
class, dir, id, style, type
p
align, class, dir, id, style
span
class, id, style
strong
class, id, style
table
align, bgcolor, border, cellpadding, cellspacing, class, dir, frame, id, rules, style, width
td
abbr, align, bgcolor, class, colspan, dir, height, id, lang, rowspan, scope, style, valign, width
th
abbr, align, background, bgcolor, class, colspan, dir, height, id, lang, scope, style, valign, width
tr
align, bgcolor, class, dir, id, style, valign
u
class, id, style
ul
class, dir, id, style


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

CSS Свойства (строго Inline)
background
background-color
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-width
color
display
font
font-family
font-size
font-style
font-variant
font-weight
height
letter-spacing
line-height
list-style-type
padding
padding-bottom
padding-left
padding-right
padding-top
table-layout
text-align
text-decoration
text-indent
text-transform
vertical-align
width
 

Использование CSS строго Inline.

Забудьте про блочные css в начале документа. Только inline-стили. Конечно, это может вызвать геморрой при ручном приведении html-документа в порядок, но устранения подобных проблем существует сервис Печкин, который предлагает автоматический CSS-inliner, в рамках проекта Печкин.Лаборатория.

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

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

В данном материале использованы сервисы Печкин.Лаборатории, в которой вы можете найти инструменты для автоматизации верстки, создания текстовых версий письма и других вещей.

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи