Базовые правила 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-версию своего письма, а, значит, все ваши подписчики будут удовлетворены ее внешним видом без исключений!

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

2.92
1
2
3
4
5

Голосов: 1740

Про новые CSS псевдоклассы - :is() :where() :has() 10 редких тегов HTML, которые редко используют Косая граница блока или граница с наклоном Как в CSS связывать объекты? Масштабирование в CSS средствами zoom и transform Эффект пульсации элемента на чистом CSS Красивая форма обратной связи на чистом CSS Что такое Pixel Perfect верстка? Адаптивная верстка. Правильные медиа выражения для retina. Формат ссылки для телефонных звонков Icon Fonts или SVG? Скошенные элементы на CSS3 Стилизуем placeholder при помощи CSS Адаптивный CSS3 Manasory без JavaScript Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки. CSS прижать footer к низу окна браузера Создаём отзывчивые письма без медиа-запросов Кроссбраузерная стилизация select на CSS Специальные символы HTML Треугольники по средствам CSS Стилизация элементов checkbox и radio button на CSS3 Как убрать свечение вокруг текстового поля? Как отключить преобразование телефонных номеров в ссылки в мобильных браузерах 17 CSS/HTML эффектов с кроссбраузерными решениями Пять полезных CSS селекторов Медиа типы в CSS Базовые правила HTML верстки писем для E-Mail рассылки Создаём адаптивный сайт

Возможно, вам будет интересно

Скошенные элементы на CSS3

Всегда необычно видеть угловатые элементы в веб-дизайне. Сегодня мы посмотрим, как с помощью только CSS3 можно сделать такие угловатые, скошенные элементы.

Читать подробнее

Пять полезных CSS селекторов

Помимо обычных селекторов тегов, потомков, классов и id селекторов, CSS располагает псевдо-классами, селекторы которых позволяют оформить HTML теги на основе их позиции в документе. В этой статье рассмотрим 5 полезных CSS селекторов, стоящих внимания при оформлении веб-страниц и приложений.

Читать подробнее