Как создать неубиваемые кнопки для email (HTML, CSS и VML)
At least 1 in 3 people have their email images turned off.
Многие пользователи просто не видят ваш потрясающий дизайн писем. А значит, кнопка призыва к действию (CTA) в письме — ваш единственный шанс получить конверсии.
Но если эта кнопка тоже изображение, её никто не заметит.
А что, если защитить свои email-рассылки от этой проблемы? Что, если кнопки CTA в письмах стали... **непр
Что такое «непробиваемые» кнопки?
Надежная кнопка в email — это CTA, которая отображается во ВСЕХ почтовых клиентах
Потому что она написана на HTML без картинок, такая кнопка будет видна получателю — независимо от того, загружает ли он изображения в письмах или нет.
Решение о том, удалить ваше письмо или нет, пользователи принимают менее чем за 3 секунды. И это даже в том случае, если они видят ваши графические элементы.
Вы тратите много времени на подготовку email-рассылок. Успешные маркетинговые кампании основываются на лучших практиках:
- Заголовки писем
- Прехeder (текст перед заголовком)
- Как писать продающие тексты
- Какие письма отправлять клиентам
- Как нарастить email-базу
Если вы используете кнопки CTA на основе изображений, вы оставляете критическую брешь в своей стратегии — и все лучшие практики потеряют смысл.

Ваши письма должны быть как Чудо-женщина: неуязвимы для пуль (или отключённых картинок)
Когда-то почтовые клиенты блокировали отображение картинок по умолчанию, чтобы защитить пользователей от вредоносного ПО, распространяемого спамерами.
В 2013 году Gmail изменил правила игры, пропуская изображения через свои защищённые серверы. Баннер «Показать картинки ниже» ушёл в прошлое. Это было отличной новостью для бизнеса — графические кнопки с гиперссылками и изображения товаров отображались сразу при открытии письма.
Но уже через год Litmus опубликовал статистику: 43% пользователей Gmail вернули настройки, отключив автоматическую загрузку изображений.
А многие другие почтовые клиенты, например Outlook, вообще не загружают картинки автоматически.
Почему пользователи отключают изображения в письмах?
Причины, по которым картинки не отображаются по умолчанию (и почему стоит использовать «пуленепробиваемые» кнопки):
- Практичность. Картинки могут не загружаться (или грузиться слишком долго), если скорость интернета низкая или соединение нестабильное.
- Доступность. Программы экранного доступа (которые «читают» текст вслух) не распознают текст на GIF или JPEG. Из-за этого ваше письмо станет недоступным для подписчиков с нарушениями зрения.
- Конфиденциальность. В сети полно статей с рекомендацией отключить автоматическую загрузку изображений, чтобы избежать отслеживания.
Хорошая новость: многие сервисы рассылок (например, Mautibox или amoCRM) автоматически генерируют «пуленепробиваемые» кнопки. А что делать, если нужно создать их вручную с помощью кода?
4 способа создать неубиваемые кнопки в ваших email-рассылках
Вот четыре стиля оформления кнопок, которые помогут создать надёжные кнопки для email-рассылок:
- Кнопки на основе VML
- Кнопки с отступами
- Кнопки с рамкой
- Комбинированные кнопки (отступы + рамка)
1. Кнопки на основе VML
VML (Vector Markup Language) — популярный способ создания надёжных кнопок для email-рассылок. Если вы не знакомы с этим языком разметки, может быть сложно добиться правильного результата. К счастью, сервис buttons.cm сгенерирует готовый код для VML-кнопки и упростит процесс.
Профи: Вся кнопка кликабельна
Минус: Приходится использовать сложный язык программирования
2. Кнопки с отступами
"Бронестойкая" кнопка в email-рассылке с отступами создаётся с помощью HTML-таблицы, где ячейка с заданными отступами формирует структуру. Для оформления используются HTML-атрибуты и CSS-стили.
Плюс: Использует HTML, что упрощает написание кода и обновление
Минус: Кликабелен только текст внутри кнопки, что может сбивать пользователей с толку
3. Кнопки с рамкой
Кнопка с рамкой в email-рассылке, устойчивая к искажениям, во многом похожа на кнопку с отступами. Оба варианта используют HTML и CSS для создания и оформления кнопки. Но вместо отступов в ячейке таблицы для структурирования кнопки здесь добавляются толстые рамки к ссылке.
Профи: Упрощённый код и высокая масштабируемость
Минус: Outlook некорректно отображает эти кнопки (не распознаёт теги <a> как блочные элементы) и автоматически уменьшает их размер
4. Комбинированные кнопки с отступами и рамкой
Комбинированные bulletproof-кнопки для email-рассылок сочетают внутренние отступы (padding), сплошную рамку и цвет фона.
Профи: Легко обновлять, поддерживаются фоновые изображения
Минус: Стили прописаны в тегах < a > и < tr >, поэтому при изменении дизайна придётся править оба
Плохо, лучше, идеально: 3 примера неубиваемых кнопок в действии
Вот три способа, как «непробиваемые» кнопки могут либо улучшить, либо испортить пользовательский опыт вашего email-рассылки.
Плохо (Valfre)

Без изображений: Поэтому нельзя полагаться на картинки в работе. Я не брошу всё ради того, чтобы показать вам отсутствующую Valfre Electric Garden Palette.
Почему это письмо без изображений не работает:
- Нет надёжной кнопки. Высокий CTR невозможен, если не за что кликнуть
- Нет текста. Маркетинговый текст и призыв к действию спрятаны в изображении — значит, как минимум треть читателей их не увидит
- Нет альтернативного текста (alt-тегов). Нет описания, что скрыто на картинке. Непонятно, зачем её скачивать. Это письмо так же пусто, как и наш интерес к тому, что они пытаются продвинуть.
Письмо с изображениями:

2. Better (Стэнли Донвуд)

Без изображений: Если ваш продукт — это картина или фотография, легко недооценить важность надёжных кнопок в email-рассылках. Художник Стэнли Донвуд так не считает. Вы не видите его работы — но он делает так, что вам хочется кликнуть на кнопку и перейти на лендинг.
Почему это письмо без изображений работает:
- Чёткие описания продукта. Подробное текстовое описание сохраняет информацию, даже если картинки в письме отключены
- Надёжная кнопка (bulletproof). CTA с отличным микрокопирайтом
Письмо с изображениями:

3. Лучший (Quip)

Без изображений: Quip создал идеальный пример рассылки, доказывающий, что отсутствие картинок не равно отсутствию целостного дизайна. Такое письмо доступно всем, а "пуленепробиваемые" кнопки выделяются — именно так и должен работать призыв к действию (CTA).
Почему это письмо без изображений отличное:
- Адаптивный дизайн. В письме используются "пуленепробиваемые" кнопки — и адаптивный фон. Вы даже не заметите, что изображений нет.
- Удобный для восприятия текст. Текст оформлен так, что его легко (и приятно) читать даже при отключённых картинках. А рассылка — отличный способ вовлечь аудиторию.
Письмо с изображениями:

Mautibox автоматически создаёт надёжные кнопки для email-рассылок
ActiveCampaign автоматически создаёт надёжные кнопки для ваших email-рассылок. Наш редактор дизайна предлагает инструменты для создания динамических писем с CTA, которые будут отображаться в почтовых ящиках получателей точно так, как вы их оформили — без исключений.
Попробуйте прямо сейчас — бесплатно
Без привязки банковской карты. Быстрая настройка за 5 минут.
Заблокированные картинки в письмах могут испортить репутацию и лишить вас лидов, подписчиков и продаж… но решение простое.
Картинки должны повышать вовлечённость, а не передавать ключевую информацию. Если вы используете универсальные кнопки без изображений с продуманным дизайном и убедительным текстом, ваша аудитория всегда получит письма с нужной информацией — независимо от настроек почтового клиента.

У писем есть задача: конвертировать получателей с помощью кнопки призыва к действию. Вот пример из Mautibox, где это работает… даже без графики.