Готовые блоки
Шапки, герой, колонки, карточки товара, отзывы, соцсети и подвал. Каждый блок настраивается полями, а не правкой кода.
Сборка для вёрстки писем
Письма, которые одинаково выглядят в Outlook и на телефоне
Собираете письмо из готовых блоков, меняете тексты и цвета полями, забираете чистый HTML. Внутри уже лежат ghost-таблицы, VML-кнопки и адаптация, которая работает без единого медиа-запроса.
- готовых блоков
- 17готовых блоков
- медиа-запросов
- 0медиа-запросов
- версии Outlook
- 2007+версии Outlook
- лимит Gmail под контролем
- 102 КБлимит Gmail под контролем
Собрали всё важное за месяц
Всё, что нужно для боевой рассылки
Не набор красивых шаблонов, а рабочая сборка: разметка, проверка и подготовка картинок в одном месте.
Адаптив без медиа-запросов
Колонки переносятся сами за счёт inline-block и фиксированной ширины. Письмо не сломается, даже если клиент вырежет тег style.
Ghost-таблицы для Outlook
Условные комментарии, PixelsPerInch, AllowPNG и mso-line-height-rule уже внутри. Outlook 2007 и новее рисует то же самое.
Пуленепробиваемые кнопки
VML-версия для Outlook и обычная ссылка для остальных. Кликается вся площадь кнопки, скругление на месте.
Проверка вёрстки
Незакрытые теги, flexbox, относительные адреса картинок, вес больше 102 КБ и ещё два десятка правил с понятным объяснением.
Сжатие картинок
Уменьшение и пережатие прямо в браузере, ретина-режим, загрузка на CDN и постоянная ссылка для вставки в письмо.
Главная идея
Одно и то же письмо на 320 и на 600 пикселях
Слева то же самое письмо в ширину телефона. Ни одного медиа-запроса не сработало: колонки перестроились сами, потому что не поместились в строку. Значит, письмо переживёт и пересылку, и корпоративный шлюз, и клиент, который вырезает тег style.
- Всё оформление лежит в атрибутах style на элементах
- Ширина колонки задана в пикселях, а max-width страхует от переполнения
- Outlook получает собственную жёсткую сетку в ghost-таблице
Библиотека блоков
Любой блок можно взять фрагментом в свою вёрстку: на странице каталога рядом с предпросмотром лежит готовый HTML.
Шапки
- Шапка с логотипом
- Шапка с меню
Контент
- Герой
- Текстовый блок
- Картинка и текст
- Две колонки
- Три колонки
- Список преимуществ
- Цифры в ряд
- Отзыв
- Карточка товара
Медиа
- Картинка
Действие
- Кнопка
Подвал
- Соцсети
- Подвал
Служебные
- Разделитель
- Отступ
Валидатор письма
Проверка идёт по готовому HTML, а не по конструктору: тот же код, который уйдёт в рассылочный сервис. Каждая находка объясняет, в каком клиенте она выстрелит.
- Незакрытые и лишние теги в разметке
- Flexbox, Grid и абсолютное позиционирование
- Картинки без alt, без width и с относительным адресом
- Таблицы без role, cellpadding и cellspacing
- Ссылки на решётку и незащищённые http-адреса
- Вес письма и риск обрезки в Gmail
- VML без объявленных пространств имён
- Отсутствие прехедера и ссылки на отписку
Картинки для письма
Сжатие идёт в браузере, файл не уходит никуда, пока вы сами не нажмёте загрузку. Дальше получаете постоянную ссылку и готовый тег с width и alt.
- Пережатие в JPEG, PNG или WebP с настройкой качества
- Ретина-режим: файл вдвое больше, в теге указана видимая ширина
- Видно, сколько веса удалось снять с каждой картинки
- Загрузка на CDN и постоянный адрес по https
Первое письмо соберётся за десять минут
Черновик сохраняется в браузере, проект выгружается файлом, готовый HTML копируется одной кнопкой прямо в рассылочный сервис.
Открыть студию