Правила верстки email-писем

К сожалению, не существует единого стандарта верстки писем, универсально поддерживаемого бы всеми почтовыми клиентами. Некоторые поддерживают CSS3, некоторые нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется в пределах одного почтового клиента от версии к версии.

Верстайте письма таблицами

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

Используйте только универсально-поддерживаемые аттрибуты у 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, h2, h3, h4, h5, 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-свойства

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.

Необходимо использовать только inline-стили

Да, это всё геморройно, но зато будет работать.

Используйте ширину документа не более 600px

При использовании максимальной ширины в 600 пикселей вы оградите пользователей от небходимости прокручивать письмо горизонтально (это очень неудобно).

Оставить комментарий: