Вёрстка писем для рассылок интернет-магазина товаров для сада и дачи: набор модульных шаблонов, из которых маркетолог сам собирает сезонные подборки, письма о брошенной корзине и уведомления о статусе заказа. Верстал вручную Евгений Росляков — письма и сайты он делает с 2016 года. Он самозанятый, работает по договору, для юрлиц готовит закрывающие документы. Встретиться можно в Москве, обычно же всё идёт удалённо.
Магазин продаёт семена, инструмент, теплицы и всё, что нужно на участке. Рассылки идут круглый год, но пик приходится на весну: начинается сезон, и писем нужно много.
Письма раньше собирали в конструкторе рассылок, и выглядели они у всех по-разному. В Outlook блоки разъезжались, колонки с товарами съезжали друг под друга. На телефонах кнопки получались мелкими. Заголовки акций были картинками с текстом, и когда почтовая программа отключала картинки, вместо предложения человек видел пустую рамку. Тёмная тема на телефонах перекрашивала фон, и тёмный логотип на нём пропадал.
Маркетолог каждый раз правил письмо руками и прогонял его через три почтовые программы. На одну рассылку уходило слишком много времени, а сезонные письма должны выходить быстро.
Нужны были шаблоны, которые одинаково выглядят у получателей, и готовые блоки, чтобы маркетологу не приходилось лезть в код.
Основа любого письма — HTML и CSS, но не такие, как на сайте. Почтовые клиенты разбирают разметку каждый по-своему. Outlook на компьютере рисует письмо движком текстового редактора Word, и современные приёмы вёрстки он не понимает. Поэтому даже в 2026 году для писем нужны приёмы двадцатилетней давности.
Каркас сделал на таблицах, в синтаксисе XHTML 1.0 Transitional: теги закрыты, атрибуты в кавычках, ширина ячеек задана явно. Для Outlook это самый предсказуемый вариант. Стили записал прямо в теги, потому что часть клиентов вырезает блок стилей из заголовка письма.
Свойства CSS ограничил уровнем CSS2: поля, границы, фон, выравнивание, ширина. Гибких сеток и сложных позиционирований нет, на них Outlook ломается. Для него же добавил условные комментарии с отдельными правилами. Кнопки сделал «пуленепробиваемыми»: это ячейка таблицы с цветным фоном и ссылкой внутри, а не картинка, поэтому кнопка видна и нажимается, даже если картинки не загрузились.
Заголовки и предложения набраны текстом. У каждой картинки есть ALT-текст, так что при отключённых картинках письмо читается. Для клиентов, которые понимают media queries, добавил адаптив: колонки встают друг под друга, кнопки становятся крупнее.
С тёмной темой пришлось работать двумя способами. Логотип лежит в двух версиях, светлая подменяется там, где почтовый клиент сообщает о тёмной теме. Но Gmail и некоторые приложения перекрашивают письмо сами, не спрашивая. Для них у логотипа прозрачный фон и тонкая светлая обводка: на любом фоне он читается.
Кросс-браузерная проверка у писем своя: вместо браузеров — почтовые клиенты. Смотрел веб-версию письма, Яндекс Почту, Почту Mail.ru, Gmail, Outlook и Apple Mail на телефоне. Каждый блок прошёл все шесть.
Из этого собрал блоки: товар, подборка, сезонный баннер, промокод, подвал с отпиской. Каждый работает отдельно, блоки можно переставлять как угодно.
Маркетолог теперь собирает письмо из готовых блоков. Вставил товары, поправил текст, проверил превью и отправил. Править разметку и гонять каждую рассылку по трём почтовым программам больше не нужно.
Письма стали выглядеть одинаково. В Outlook колонки остаются на месте, на телефоне по кнопке удобно попасть пальцем, при отключённых картинках видны и предложение, и кнопка. Логотип не теряется в тёмной теме.
Изменилась и работа над сезонными подборками. Раньше каждая весенняя рассылка была маленьким отдельным проектом. Теперь это сборка: основное время уходит на выбор товаров и текст, а вёрстка почти не мешает.
Есть ограничение. Вид письма в разных клиентах всё равно немного отличается: скругления, шрифты и отступы в Outlook проще, чем в Gmail. Я проектировал так, чтобы разница не ломала смысл, но пиксель в пиксель не получится нигде, и обещать этого нельзя. Почтовые программы обновляются, так что раз в год шаблоны стоит прогонять через проверку заново.
Дальше планируют добавить блоки для писем о возврате и для просьбы оставить отзыв после покупки. Схема под них готова, нужно только нарисовать сами блоки и пройти те же шесть клиентов.
Если ваши рассылки разъезжаются в Outlook или маркетолог до сих пор правит письма в коде, расскажите мне об этом в сообщении на freelance.ru. Пришлите пару последних писем, и я скажу, что в них сломано.
