Как создать неубиваемые кнопки для email (HTML, CSS и VML)

At least 1 in 3 people have their email images turned off.

Многие пользователи просто не видят ваш потрясающий дизайн писем. А значит, кнопка призыва к действию (CTA) в письме — ваш единственный шанс получить конверсии.

Но если эта кнопка тоже изображение, её никто не заметит.

А что, если защитить свои email-рассылки от этой проблемы? Что, если кнопки CTA в письмах стали... **непр

Что такое «непробиваемые» кнопки?

Надежная кнопка в email — это CTA, которая отображается во ВСЕХ почтовых клиентах

Потому что она написана на HTML без картинок, такая кнопка будет видна получателю — независимо от того, загружает ли он изображения в письмах или нет.

Решение о том, удалить ваше письмо или нет, пользователи принимают менее чем за 3 секунды. И это даже в том случае, если они видят ваши графические элементы.

Вы тратите много времени на подготовку email-рассылок. Успешные маркетинговые кампании основываются на лучших практиках:

Если вы используете кнопки CTA на основе изображений, вы оставляете критическую брешь в своей стратегии — и все лучшие практики потеряют смысл.

Wonder Woman bulletproof

Ваши письма должны быть как Чудо-женщина: неуязвимы для пуль (или отключённых картинок)

Когда-то почтовые клиенты блокировали отображение картинок по умолчанию, чтобы защитить пользователей от вредоносного ПО, распространяемого спамерами.

В 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

Без изображений: Поэтому нельзя полагаться на картинки в работе. Я не брошу всё ради того, чтобы показать вам отсутствующую Valfre Electric Garden Palette.

Почему это письмо без изображений не работает:

  • Нет надёжной кнопки. Высокий CTR невозможен, если не за что кликнуть
  • Нет текста. Маркетинговый текст и призыв к действию спрятаны в изображении — значит, как минимум треть читателей их не увидит
  • Нет альтернативного текста (alt-тегов). Нет описания, что скрыто на картинке. Непонятно, зачем её скачивать. Это письмо так же пусто, как и наш интерес к тому, что они пытаются продвинуть.

Письмо с изображениями:

Valfre email

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

stanley donwood email

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

Почему это письмо без изображений работает:

  • Чёткие описания продукта. Подробное текстовое описание сохраняет информацию, даже если картинки в письме отключены
  • Надёжная кнопка (bulletproof). CTA с отличным микрокопирайтом

Письмо с изображениями:

Stanley donwood email

3. Лучший (Quip)

Quip email

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

Почему это письмо без изображений отличное:

  • Адаптивный дизайн. В письме используются "пуленепробиваемые" кнопки — и адаптивный фон. Вы даже не заметите, что изображений нет.
  • Удобный для восприятия текст. Текст оформлен так, что его легко (и приятно) читать даже при отключённых картинках. А рассылка — отличный способ вовлечь аудиторию.

Письмо с изображениями:

Quip email

Mautibox автоматически создаёт надёжные кнопки для email-рассылок

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

Попробуйте прямо сейчас — бесплатно

Без привязки банковской карты. Быстрая настройка за 5 минут.

Заблокированные картинки в письмах могут испортить репутацию и лишить вас лидов, подписчиков и продаж… но решение простое.

Картинки должны повышать вовлечённость, а не передавать ключевую информацию. Если вы используете универсальные кнопки без изображений с продуманным дизайном и убедительным текстом, ваша аудитория всегда получит письма с нужной информацией — независимо от настроек почтового клиента.

ActiveCampaign emails

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

Next Post Previous Post