Инструкции 06.05.2025

Как верстать письма: пошаговое руководство

Верстка email-писем — это отдельное искусство.
Почему? Потому что в отличие от сайтов, email-клиенты сильно ограничивают использование современного HTML и CSS, а значит, приходится действовать по особым правилам.
В этой статье мы подготовили пошаговое руководство, которое поможет сверстать письмо правильно — даже если ты новичок.

Шаг 1. Определи структуру письма

Шапка (логотип, навигация)
Главный баннер или оффер
Основной текстовый блок
Блоки с товарами или услугами
Призыв к действию (CTA)
Подвал (контакты, отписка, ссылки)

Совет: сначала нарисуй макет на бумаге или в Figma — это поможет увидеть логику.

Шаг 2. Используй таблицы вместо div-ов

❌ div плохо поддерживаются многими почтовыми клиентами.
✅ Используй <table>, <tr>, <td> для разметки блоков.

Пример:

<tr>

<td align=»center»>Ваш контент здесь</td>

</tr>

</table>

Шаг 3. Пиши инлайновые стили

❌ Внешние CSS-файлы или <style> внутри <head> часто игнорируются.
✅ Добавляй стили прямо в теги:

Шаг 4. Устанавливай ширину контейнера

Максимальная ширина письма — 600–650 px.
Для мобильных — ширина 100%.

Совет: используй адаптивные блоки или медиазапросы, если уверенно работаешь с CSS.

Шаг 5. Подключай изображения правильно

✅ Используй <img> с атрибутами:

alt — для альтернативного текста,
width и height — для задания размеров,
style=»display: block;» — чтобы убрать лишние отступы.

Шаг 6. Делай кнопки из таблиц

❌ Не используй <button>.
✅ Строй кнопки из <table> + <a>:

<tr>

<a href=»#» style=»color: #fff; text-decoration: none;»>Нажми сюда</a>

</td>