19 бесплатных инструментов для емейл-вёрстки, которые ускоряют и упрощают работу
Впервые опубликовано 10.06.2021. Обновили 05.12.2025: дополнили список инструментов, рассказали, как создать рассылку без знания HTML-кода, как адаптировать письмо для мобильных телефонов, добавили актуальные ссылки по теме.
Маркетологи знают, что емейл-вёрстка полна сюрпризов, и порой не самых приятных. Ты так старался над письмом, а в итоге картинки разбежались, текст наслоился на другие элементы, кнопку перекосило — одним словом, вёрстка поехала. Понятно, что эффективной такая рассылка не будет.
От ошибок не застрахован никто, мы тоже периодически замечаем у себя баги на тестах. Благо есть бесплатные инструменты, которые облегчают вёрстку писем и помогают предотвращать ошибки. В этой статье поделюсь сервисами, которыми пользуется техкоманда EMAILMATRIX. Некоторые ребята изобрели сами.
Все сервисы для вёрстки мы разделили по задачам. Выбирайте, что вам нужно сделать, и забирайте подходящий инструмент, чтобы облегчить себе работу.
Фреймворк для создания кода
TJML
Чтобы элементы не наслаивались друг на друга, используется табличная вёрстка. Для этого создаётся главная таблица и в неё помещают вложенные таблицы, в которые упакован контент.
Табличная вёрстка — это способ создания структуры письма, при котором все графические и текстовые компоненты размещаются в HTML-таблицах.
Такой способ удобен в плане распределения всех элементов «по полочкам», но в нём можно запутаться. Упростить вёрстку нам помогает емейл-фреймворк. Это готовая разметка для вёрстки письма, которая позволяет написать понятный и легко читаемый код быстрее, чем стандартный HTML. Также с помощью фреймворка намного проще научиться верстать рассылки, если вы не делали этого раньше.
Емейл-фреймворк — это платформа с инструментами и шаблонами для вёрстки писем.
Сервисы для оформления писем
EMX Tools Background Generator
Чтобы подписчикам было проще взаимодействовать с рассылкой, используется адаптивная емейл-вёрстка. Удобное расположение элементов письма на любом устройстве повышает вовлечённость, кликабельность и в конечном счёте конверсию. А вот если емейл не оптимизирован для мобильных, 42,3% пользователей удалят его.
Адаптивная емейл-вёрстка — это способ оформления писем, при котором они корректно отображаются на любом устройстве.
Основа адаптивной вёрстки ― CSS-медиазапросы, работа с которыми имеет свои нюансы. Например, Outlook 2007–2016 не поддерживает фоновые изображения, прописанные в CSS. Чтобы обойти это ограничение, используют язык векторной разметки VML от Microsoft.
CSS-медиазапросы — это правила, по которым оформление писем подстраивается под технические параметры разных устройств.
Составлять VML-код непросто — генератор бэкграундов помогает сделать это без ошибок. Он создаёт HTML-контейнер с VML-блоком, где будет прописано фоновое изображение со всеми необходимыми параметрами, чтобы оно отображалось во всех почтовиках.
Bulletproof email buttons от Campaign Monitor
Генератор VML-кнопок позволяет быстро получить код для Outlook. Для этого достаточно выбрать нужные визуальные параметры кнопки.
PerfectPixel
Без этого расширения для браузеров как без рук. Оно позволяет сравнить вёрстку с макетом и избежать отступлений. Даже если у вас нет доступа к макету в Фигме или Фотошопе, вёрстку удастся сделать по JPG-картинке.
При включении расширения поверх вёрстки накладывается картинка макета. Это помогает увидеть несовпадения.
TinyPNG
Сжимает изображения, чтобы они меньше весили и быстрее грузились в письмах, но при этом сильно не теряли в качестве.
Optimizilla
Альтернатива предыдущему инструменту. Сжимает PNG- и JPG-картинки.
Типограф от Студии Лебедева
Автоматически расставляет корректную типографику. С Типографом вам не придётся выискивать двойные и расставлять неразрывные пробелы и тратить время на другие ручные исправления.
Конвертер регистров от Студии Лебедева
Приводит все символы к одному регистру. Поддерживает все языки, в которых есть прописные и строчные буквы.
Сервисы для настройки ссылок
EMX Tools Event Generator
Создаёт ссылку, по которой подписчик сможет легко внести событие из письма в свой календарь. Это поможет привлечь больше участников на ваши мероприятия: благодаря напоминалке в календаре люди не забудут о событии.
Для генерации укажите основные параметры события. Созданные ссылки поддерживают Outlook, iCal, Gmail и другие сервисы.
EMX Tools Email Sharing
Облегчает создание ссылок для шеринга рассылки в VK, «Однаклассниках» и других соцсетях. Можно прописать Open Graph — микроразметку кода для настройки сниппета.
URL Decoder/Encoder
Сервис нужен при работе с шерингом ссылок. С ним можно легко прописать данные для превью — декодировать или закодировать их.
Интерфейс максимально простой: поле ввода и две кнопки.
CSS-гайды
Некоторые почтовики имеют особенности, которые могут значительно подпортить даже самую тщательно продуманную вёрстку. Чтобы не тратить силы впустую, нужно иметь в виду, что не поддаётся исправлению и что можно исправить, но с большими трудозатратами.
Яндекс:
- не поддерживает медиазапросы, из-за чего сложно настроить мобильную версию.
Gmail:
- не отображает тени;
- в тёмной теме на iOS инвертирует даже тёмные письма;
- в неадаптивной вёрстке сжимает ширину и высоту между элементами до минимального значения — текст или иконки могут прилипать к ближайшим элементам.
Outlook на Windows:
- не поддерживает скругление углов, фоновые изображения и тени;
- произвольно появляются линии в разных частях письма.
Также практически все почтовые клиенты имеют веб-версии, которые не обновляются с давних пор, из-за чего современные письма отображаются не так, как задумывалось.
Евгений Шишков
CPO EmailMaker
Убедиться, что цвет, размер, отступы и другие параметры HTML-элементов корректно отобразятся у получателей, помогают CSS-гайды. Это справочники по селекторам, стилевым свойствам, их значениям и тому, какие почтовики их поддерживают. Можем порекомендовать несколько таких гайдов.
EMX Tools CSS Guide
Таблица с актуальными данными о поддержке стилевых свойств во всех типах почтовых клиентов. Все стили сгруппированы для быстрого поиска. Сервис ориентирован на российский рынок и содержит информацию по Яндексу, Mail.ru, Rambler.
Can I email
Сервис для проверки того, как почтовые клиенты поддерживают разные свойства и теги. Из минусов — не содержит данных о российских почтовых клиентах, за исключением Mail.ru.
The Ultimate Guide to CSS от Campaign Monitor
Аналог предыдущего гайда, тоже проверяет отображение вёрстки только в зарубежных почтовиках и Mail.ru. Можно попробовать оба инструмента и выбрать более удобный интерфейс.
Открывается с иностранных IP-адресов.
Сервисы для проверки писем
Тестирование отправки писем — неотъемлемый этап перед отправкой рассылки клиентам. Важно проводить тесты во всех версиях почтовиков. Например, почтовики могут посчитать некоторые части текста ссылкой на какой-то ресурс. Это часто происходит с адресом, ценой, идентификаторами юрлиц и так далее. Из-за этого теряются акценты в письме, ведь в нём могут быть реальные гиперссылки, а ошибочные вводят получателей в заблуждение, ухудшают восприятие письма и делают CTA менее заметными.
Допускать ошибки и после тестов — нормальная практика даже для опытных специалистов. Главное — правильно идентифицировать ошибку, чтобы не повторять её в дальнейшем. На этот случай есть несколько эффективных помощников.
Артём Чепков
Senior HTML Coder
EMX Tools Test Sender
Упрощает тестирование для тех, кто работает с письмами без доступа в сервисы рассылок. Например, верстальщикам, которые не настраивают кампании.
Сервис позволяет использовать тестовые списки. Вместо того чтобы вручную слать тесты внутри каждого почтовика по отдельности, можно загрузить адреса в сервис, и письма отправятся по ним одномоментно. Это значительно экономит время.
Если на тесте удалось выявить ошибку, её причину можно найти с помощью сервисов, о которых расскажу ниже. Впрочем, их можно использовать и когда ошибка вскрылась, и после отправки письма клиентам.
Markup Validation Service
Инструмент для максимально полной валидации кода. В случае ошибки указывает её точное расположение в коде, составляет полное описание и объясняет, как исправить. Некритичные ошибки выделяются отдельно как предупреждение, к ним также добавляется описание.
Валидация кода — проверка кода на соответствие стандартам вёрстки.
Webatic
Набор бесплатных онлайн-утилит для веб-разработчиков. В нём есть в том числе таблица HTML-сущностей и таблица ASCII.
Таблица ASCII — это набор букв латинского алфавита, цифр и специальных символов, которым присвоены коды в формате определённых чисел.
Пригодится, если нужно посмотреть, из-за чего возникла ошибка в коде или как в целом устроено какое-либо письмо.
AMP-песочницы от Mail.ru и Gmail
Песочница (sandbox) — это система для безопасного запуска и тестирования программы или кода.
AMP-письма требуют особой бдительности. Бывает, что ошибка в их коде не влияет на работоспособность рассылки, то есть отследить баг визуально не выйдет. Но из-за него вместо AMP у пользователей отобразится HTML-версия.
AMP-письма — это рассылка с интерактивными элементами, которые позволяют выполнять целевые действия прямо в инбоксе.
Песочницы удобны тем, что подсвечивают даже такие ошибки и дают подсказки по устранению.
Бесплатные конструкторы рассылок
Техническая команда EMAILMATRIX предпочитает верстать письма вручную, потому что это позволяет создавать уникальный визуал. Но есть и альтернативный вариант — конструкторы рассылок. В них можно собирать емейлы из готовых блоков: это быстрее, дешевле и не требует глубокого знания кода. Однако стоит учитывать, что конструкторы обычно ограничены в функционале и могут не учитывать некоторые особенности почтовиков.
Если такой способ емейл-вёрстки вам ближе, то у нас на примете есть несколько конструкторов с бесплатными версиями.
| Конструктор | Нюансы бесплатных тарифов | Цена платных тарифов в месяц |
|---|---|---|
| PixCraft | Доступ на 14 дней для 1 участника, максимум 5 шаблонов и 20 блоков. | от 1490 рублей |
| Stripo | Доступ на 1 месяц для 2 участников до 10 шаблонов. | от 20 долларов |
| Topol | Доступ на 14 дней для 1 участника, количество шаблонов не ограничено. | от 15 долларов |
| MakeMail | Доступ на всё время для 1 участника, максимум 3 шаблона. | от 1000 рублей |
| Dasha Mail | Доступ на 1 месяц для 1 участника, количество блоков и шаблонов не ограничено. | от 1925 рублей |
| CogaSystem | Доступ на всё время для 1 участника, количество шаблонов не ограничено. | от 540 рублей |
Инструменты для емейл-вёрстки: частые вопросы
Можно ли сверстать рассылку без знания HTML?
Да, конструкторы рассылок могут помочь в создании писем без владения HTML-вёрсткой, но нужно быть готовыми к некоторым сложностям.
Часто конструкторы автоматически нагружают HTML-код избыточными тегами и другими атрибутами. Например, Gmail ограничивает размер кода до 102 КБ, поэтому при повышенном лимите письмо может обрезаться или могут пропасть добавленные элементы.
Также при вёрстке писем нужно учитывать особенности почтовых клиентов. Бывает, что в одном почтовике тег работает корректно, а в другом — нет. Исправить это без знания HTML — настоящее испытание, особенно для новичков.
Если вы в начале пути, конструкторы могут стать хорошим подручным инструментом для создания писем с несложным оформлением. Но в дальнейшем лучше всё-таки освоить вёрстку, чтобы делать уникальные письма и избегать ошибок.
Как сделать письмо адаптивным для мобильных устройств?
Адаптировать письмо для смартфонов можно двумя способами:
- Медиазапросы. Но нужно помнить, что их не поддерживают Яндекс и частично Outlook. Они покажут десктопную версию. Если большинство ваших клиентов используют именно эти почтовики, то вам больше подойдёт второй способ.
- Резиновая вёрстка. Она растягивает макет письма на всю ширину экрана. Если при масштабировании какие-то элементы не умещаются на одну строку, они перестроятся так, чтобы не ломать структуру письма.
Какие инструменты ускоряют емейл-вёрстку?
В этом помогают все перечисленные инструменты, но нас чаще всего выручает этот набор:
- TJML — помогает писать код.
- PerfectPixel — проверяет соответствие вёрстки макету.
- Optimizilla — качественно сжимает картинки.
- EMX Tools Test Sender — отправляет тестовые письма на любое количество почтовых ящиков в один клик.
Инструменты для емейл-вёрстки: выводы
Чтобы создавать письма с креативным оформлением, потребуются глубокие знания HTML-вёрстки. Для писем с обычными блоками подойдут конструкторы рассылок. Но в обоих случаях нужно быть готовыми к тому, что почтовики могут исказить элементы письма или вовсе их не отобразить. В большинстве случаев выручает адаптивная вёрстка, но с некоторыми такими особенностями придётся просто смириться. Поэтому лучше делать акцент на содержании письма, чтобы полезная информация нивелировала неидеальную форму.
Ни в коем случае не пренебрегайте этапом тестирования письма во всех почтовых клиентах: это помогает получить более точную информацию об ошибках.
