Зачем верстальщику инструменты, а не только редактор кода
Среднее письмо открывают на смартфоне. По данным исследований, 42,3% пользователей удаляют письмо, если оно не оптимизировано для мобильных устройств. При этом адаптивная вёрстка поднимает кликабельность и, в конечном счёте, конверсию. Вёрстка письма отличается от вёрстки сайта: почтовые клиенты работают по своим правилам, и то, что корректно отображается в браузере, может полностью сломаться в Outlook или Яндекс.Почте.
Чтобы не изобретать велосипед при каждом новом письме, существуют специализированные инструменты. Одни ускоряют написание кода, другие помогают оформить изображения и кнопки, третьи проверяют результат до отправки. Ниже собраны 19 бесплатных решений, разбитых по задачам.
Фреймворк для написания кода
TJML
TJML — фреймворк для создания адаптивных HTML и AMP-писем. Это не просто набор шаблонов: фреймворк предоставляет готовые компоненты, которые корректно работают в большинстве почтовых клиентов. Верстальщик описывает структуру письма на языке фреймворка, а на выходе получает оптимизированный HTML-код. Такой подход снижает количество ошибок совместимости и сокращает время на рутинные задачи.
Инструменты для оформления писем
EMX Tools Background Generator
EMX Tools Background Generator создаёт HTML-контейнер с VML-блоком для фоновых изображений. Outlook 2007-2016 не поддерживает фоновые изображения, прописанные через CSS. Чтобы обойти это ограничение, используют язык векторной разметки VML от Microsoft. Составлять VML-код вручную сложно — генератор берёт эту работу на себя.
Bulletproof Email Buttons от Campaign Monitor
Bulletproof Email Buttons — способ создания кнопок, которые отображаются корректно в любом почтовом клиенте, включая Outlook. Стандартные HTML-кнопки в письмах ведут себя непредсказуемо. Bulletproof-кнопки реализованы через VML и гарантированно показываются как кнопки, а не как текст или разломанный блок.
PerfectPixel
PerfectPixel — браузерное расширение, которое накладывает изображение макета поверх вёрстки. Оно помогает увидеть несовпадения между дизайном и кодом. Даже если доступа к макету в Figma нет, достаточно JPG-картинки. При включении расширения макет отображается поверх страницы с настраиваемой прозрачностью, и верстальщик видит все отступления от оригинала.
TinyPNG
TinyPNG сжимает PNG и JPEG-изображения без видимой потери качества. Лёгкие картинки быстрее загружаются в письме, что критично для мобильных пользователей с медленным интернетом. Сервис работает онлайн без регистрации: достаточно перетащить файл в окно браузера.
Optimizilla
Optimizilla — ещё один инструмент сжатия изображений. В отличие от TinyPNG, он позволяет вручную настраивать уровень качества с предпросмотром результата до сохранения. Это удобно, когда нужно найти баланс между весом файла и чёткостью изображения.
Типограф от Студии Лебедева
Типограф расставляет правильные кавычки, тире, неразрывные пробелы и другие типографские знаки. В письмах кавычки-ёлочки смотрятся профессиональнее компьютерных дюймовых. Типограф автоматически приводит текст к правилам русской типографики.
Конвертер регистров от Студии Лебедева
Конвертер регистров переводит текст из ПРОПИСНЫХ букв в обычные или наоборот. В письмах нередко встречаются блоки с заголовками, написанными заглавными: если копировать такой текст из макета, он переходит в код как CAPS LOCK. Конвертер за секунду исправляет регистр без ручного перепечатывания.
Инструменты для настройки ссылок
EMX Tools Event Generator
EMX Tools Event Generator создаёт ссылку для добавления события в календарь получателя. Подписчик нажимает кнопку в письме и событие автоматически появляется в его Google Calendar, Outlook, iCal или другом поддерживаемом сервисе. Напоминалка в календаре работает лучше, чем отдельный email — доходимость на вебинары и офлайн-мероприятия заметно растёт.
EMX Tools Email Sharing
EMX Tools Email Sharing создаёт ссылку для распространения письма в социальных сетях или мессенджерах. Отдельная ссылка для шеринга позволяет отслеживать, сколько раз письмо было передано другим людям, и создать полноценную страницу-превью для социальных сетей.
URL Decoder/Encoder
URL Decoder/Encoder — простой инструмент для декодирования и кодирования URL-строк. Когда UTM-метки содержат кириллицу или специальные символы, ссылка кодируется и становится нечитаемой. Инструмент помогает разобрать, что зашифровано в длинном URL, и подготовить корректно закодированную строку.
CSS-гайды для вёрстки писем
Некоторые почтовики имеют особенности, которые могут испортить даже тщательно продуманную вёрстку. Чтобы не тратить силы впустую, нужно знать, что не поддаётся исправлению, а что можно обойти.
EMX Tools CSS Guide
EMX Tools CSS Guide — таблица с данными о поддержке стилевых свойств во всех типах почтовых клиентов. Справочник ориентирован на российский рынок: в нём учтены особенности Яндекс.Почты, Mail.ru и других популярных в России клиентов. Все стили сгруппированы для быстрого поиска по свойству.
Can I Email
Can I Email — международный аналог CSS Guide. Показывает уровень поддержки HTML и CSS-свойств в почтовых клиентах по всему миру. Интерфейс напоминает известный caniuse.com для браузеров: зелёные ячейки означают поддержку, красные — отсутствие. Незаменим, когда нужно убедиться, что конкретное свойство безопасно использовать в письме.
The Ultimate Guide to CSS от Campaign Monitor
The Ultimate Guide to CSS от Campaign Monitor — детальный справочник с информацией о поддержке CSS-свойств в крупных почтовых клиентах. Регулярно обновляется и охватывает актуальные версии Gmail, Outlook, Apple Mail и других.
Инструменты для проверки писем
EMX Tools Test Sender
EMX Tools Test Sender упрощает тестирование для тех, кто работает с письмами без доступа в сервисы рассылок. Можно загрузить список тестовых адресов и отправить письмо по всем им одновременно, вместо того чтобы делать это вручную через каждый почтовик по отдельности.
Markup Validation Service
Markup Validation Service от W3C проверяет HTML-код на соответствие стандартам. Невалидный код ведёт себя непредсказуемо в разных клиентах. Валидатор указывает на конкретные строки с ошибками и объясняет, что именно нарушено.
Webatic
Webatic — конвертер кодировок. Если письмо отображается с кракозябрами, причина чаще всего в несоответствии кодировок. Сервис помогает быстро перекодировать текст и найти проблемное место.
AMP-песочницы от Mail.ru и Gmail
AMP for Email позволяет создавать интерактивные письма: аккордеоны, карусели, формы прямо в теле письма. Чтобы проверить AMP-разметку до отправки, существуют песочницы. Песочница Mail.ru и Gmail AMP Playground позволяют вставить код и сразу увидеть, как будет выглядеть интерактивный блок.
Бесплатные конструкторы рассылок
Если нет возможности или времени верстать вручную, письмо можно собрать в конструкторе. Большинство из них работают по принципу drag-and-drop: блоки перетаскиваются на холст, настраиваются через боковую панель, а на выходе генерируется готовый HTML.
- PixCraft — пробный период 14 дней для одного участника, максимум 5 шаблонов и 20 блоков. Платные тарифы от 1490 рублей.
- Stripo — пробный период 1 месяц для двух участников, до 10 шаблонов. Платные тарифы от 20 долларов.
- Topol — пробный период 14 дней для одного участника с ограниченным числом шаблонов.
- MakeMail — бесплатный конструктор, позиционируется как решение для небольших команд.
- Dasha Mail — пробный период 1 месяц для одного участника, количество блоков и шаблонов не ограничено. Платные тарифы от 1925 рублей.
- CogaSystem — бессрочный бесплатный доступ для одного участника, количество шаблонов не ограничено. Платные тарифы от 540 рублей.
Частые вопросы по инструментам для вёрстки
Можно ли сверстать письмо без знания HTML?
Да. Конструкторы рассылок позволяют создать письмо без написания кода. Достаточно выбрать шаблон, перетащить нужные блоки и заполнить их текстом и изображениями. Ограничение — меньше гибкости в нестандартных решениях и сложнее реализовать кастомные анимации или AMP-элементы.
Как сделать письмо адаптивным для мобильных устройств?
Есть два подхода. Первый — медиазапросы: CSS-правила, которые меняют оформление в зависимости от ширины экрана. Но медиазапросы не поддерживают Яндекс.Почта и частично Outlook — они покажут десктопную версию. Второй — резиновая вёрстка: макет письма растягивается на всю ширину экрана. Если при масштабировании элементы не умещаются в одну колонку, они автоматически переносятся. Резиновая вёрстка работает в большинстве клиентов, включая Яндекс.Почту и Outlook.
Какие инструменты экономят больше всего времени?
Ответ зависит от задачи. Для регулярной вёрстки с нуля максимально ускоряет процесс фреймворк вроде TJML — он берёт на себя совместимость с почтовыми клиентами. PerfectPixel экономит время на сверку с макетом. TinyPNG и Optimizilla убирают ручную обработку изображений. EMX Tools Test Sender позволяет отправить тесты сразу на несколько адресов вместо последовательной отправки.
Как выстроить рабочий процесс
Инструменты работают лучше всего, когда встроены в процесс на разных этапах. При написании кода помогает фреймворк TJML. При оформлении кнопок и фонов — генераторы от Campaign Monitor и EMX Tools. При проверке совместимости CSS — Can I Email и CSS Guide. При тестировании готового письма — Test Sender и Markup Validation Service. При работе с изображениями — TinyPNG или Optimizilla.
Никто не обязан использовать все 19 инструментов сразу. Достаточно добавлять по одному в тех местах, где чаще всего возникают потери времени или ошибки. Со временем набор сложится в личный стек, который ускоряет работу без лишних усилий.
