Базовые правила 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-версию своего письма, а, значит, все ваши подписчики будут удовлетворены ее внешним видом без исключений!
В данном материале использованы сервисы Печкин.Лаборатории, в которой вы можете найти инструменты для автоматизации верстки, создания текстовых версий письма и других вещей.
Возможно, вам будет интересно
Адаптивная верстка. Правильные медиа выражения для retina.
10 редких тегов HTML, которые редко используют
Icon Fonts или SVG?
CSS прижать footer к низу окна браузера
