Базовые правила HTML верстки писем для E-Mail рассылки
Для того, чтобы 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-писем?
Табличная верстка.
Верстая таблицами и забыв про блочную верстку, вы однозначно убережете себя от проблем со старыми почтовыми клиентами. Также, не стоит забывать, что веб-версии у почтовых провайдеров могут открываться в самых разнообразных браузерах, вполне возможно, даже в IE 6.0. Таблицы помогут вам быть аккуратными и красивыми везде одинаково.
Использовать универсально-поддерживаемые аттрибуты у 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 |
Использовать универсально-поддерживаемые 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, в рамках проекта Печкин.Лаборатория.
Желательно использовать ширину всего документа в 600px.
Задайте максимальную ширину в 600 пикселей и обезопасьте себя от гневных отзывов о горизонтальной прокрутке в почтовых клиентах ваших подписчиков.
Использование этих правил позволит вам создать универсально отображаемую HTML-версию своего письма, а, значит, все ваши подписчики будут удовлетворены ее внешним видом без исключений!
В данном материале использованы сервисы Печкин.Лаборатории, в которой вы можете найти инструменты для автоматизации верстки, создания текстовых версий письма и других вещей.