Как верстать Email письма

В этой статье я не много разберём как верстать Email письма, это стоит разобрать, так как есть разница между вёрсткой Email и обычных HTML страниц.

Также перед прочтением можете посмотреть наши учебника по HTML и CSS, если вы плохо знаете вёрстку.

Зачем изучать вёрстку Email:

наверное главный вопрос с которым сталкиваются новички, так это, зачем вообще изучать вёрстку писем, разве это не одно и тоже, что и создание HTML страниц?

Дело в том, что если вы сделаете как обычную HTML страницу, то в таком случае у вас только в браузере всё будет нормально отображаться, а в каких нибудь приложениях и на Android или Windows не факт, так происходит потому что не все Email клиенты поддерживают все стандарты языков HTML и CSS.

Поэтому эту тему нужно обязательно знать, чтобы потом если что не быть в замешательстве, если вы начнёте делать письмо, но потом окажется оно не везде нормально работает.

HTML для Email:

Для начала нужно разобрать как создавать HTML, как он должен быть устроен, что бы нормально отображался в письме.

Для этого нужно использовать не обычные блоки div, а табличную вёрстку, что как бы может быть не удобным для новичков, так как это их возвращает в 90-x годы.

Вот вам не большой пример HTML для письма:

Всё это внутри тега body, как видите мы используем обычную таблицу для создания HTML, тут всё просто, но если вы не знаете как делать таблицы, то посмотрите на нашем сайте как делать HTML таблицы.

То есть для создание нормально отображаемого письма нам нужно использовать таблицы, также стоит сказать о пару важных моментах, первое вообще не нужно использовать header и footer.

Также есть список тегов которые можно использовать, вот он: a, area, b, blockquote, br, center, dd, del, div, dl, dt, em, font, hr, hx, i, img, ins, il, map, ol, p, pre, small, span, strike, strong, sub, sup, table, tbody, td, th, tr, tt, u, ul.

CSS для Email:

Со CSS всё немного интереснее, так как в целом вы можете как угодно назначать стили, как и при создание обычной страницы, но обычно принято прямо в тегах, в качестве атрибутов указывать стили, в крайнем случае в head, но лучше в самом теге, примерно вот так:

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

Атрибуты для письма:

• border=«0» — толщина рамки у таблицы;
• cellpadding=«0» — расстояние от рамки до содержимого таблицы;
• cellspacing=«0» —  отступ между ячейками.

Стили для письма:

• «margin: 0;» — отступ от края таблицы до других элементов письма;
• «padding: 0;»— внутренний отступ до содержимого таблицы.

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

Если в этом пункте что то не понятно, то прочитайте про работу с DOM в CSS.

Адаптивная вёрстка Email письма:

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

Тестирование Email верстки:

Последние что мы рассмотрим, это то как происходит тестирование email верстки, есть два способа, первый это через сайт, например, litmus.com или emailonacid.com, также как вариант, можно просто проверять через рассылку, как отображается в разных местах, так обычно делаеют профессионалы.

Вывод:

В этой статье мы разобрали как верстать email письма, и как видите это достаточно трудно, надо знать табличную вёрстку, которая сложная.

Подписываетесь на соц-сети:

Оценка:

(Пока оценок нет)

Загрузка...

Поделится:

Пока кнопок поделиться нет

Также рекомендую: