Все что нужно знать о верстке html писем для рассылки

Дата публикации:

Из сегодняшней статьи вы узнаете как правильно верстать письма для рассылок. Увидите простой шаблон письма html и многое другое.

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

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

Основные правила верстки html писем

При верстке писем email, необходимо помнить о правилах, следуя которым, ваши письма будут одинаково красиво выглядеть на всех устройствах.

Правило 1: Верстайте письма в блоке фиксированной ширины. Это необходимо для того чтоб вы наглядно видели конечный результат. Письмо которое верстается на весь 24 дюймовый экран будет выглядеть не очень уж поверьте.
Например, задавайте максимальную ширину письма в 600 пикселей.

<table style="width:100%;max-width: 600px;"border="1px">

Правило 2: Не используйте параграфы и заголовки. Для этого используйте строчный тег span, а уже ему задавайте нужные свойства, через аттрибут style. Не знаю, почему так. Это как устоявшиеся правила что-ли.

<span style="display: block;text-align: center;font-size: 20px;color: black;padding: 10px;">
Заголовок
</span>
<span style="display: block;text-align: center;font-size: 16px;color: #999;padding: 0px 50px;">
Обычный текст
</span>

Правило 3: Делайте кнопки из ссылок, никаких сандартных тегов типа button и input. Плюс ко всему этому, дабавляя ссылки в письме. Не забывайте добавлять аттрибут target=_blank. Чтобы пользователь ненароком не закрыл свою почту и ваше письмо в том числе.

<a target="_blank" href="" style="display: block;width: 150px;background: blue;padding: 5px;margin: 10px auto;">Confirn account</a>

Правило 4: Если вы хотите изменить фон письма, то изменяйте саму таблицу. Не все почтовые клиенты обработают фон, который прописан через стили. Поэтому свойство background и его собратьев (background-image, background-visibility, background-size и т.д) лучше не применять. При верстке HTML-писем фон задают через атрибуты background и bgcolor для тега <table>

Новый коментарий
Ff
Материалы по теме# Минимализм в веб дизайне
Реклама