Ваше руководство по созданию «непробиваемых» кнопок для email-рассылок

Слышали ли вы аналогию дизайна email с витриной магазина? Если ваш сайт — это магазин, а письмо — витрина, то кнопка призыва к действию (CTA) — это та самая яркая вывеска, которая привлекает покупателей. Очевидно, что CTA — одна из важнейших частей письма. Если ее трудно найти, сложно нажать или она некорректно отображается, ваши подписчики просто не будут кликать!

Не волнуйтесь. Мы поможем сделать ваши CTA-кнопки «непробиваемыми», чтобы их видели все клиенты, независимо от почтового сервиса или настроек отображения.

В этой статье мы подробно разберем методы создания таких кнопок, чтобы улучшить пользовательский опыт и эффективность ваших email-кампаний.

### Содержание

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

— Лучшие практики дизайна кнопок

— 5 методов кодирования

— Продвинутые приемы и улучшения

— Таблица поддержки почтовыми клиентами и советы для темной темы

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

«Непробиваемые» кнопки — это CTA-кнопки, созданные с помощью кода, а не изображений. Вы можете уверенно заменить свои GIF, PNG и JPEG на HTML и CSS. Поскольку используется только код, кнопка будет отображаться во всех почтовых клиентах, даже если изображения отключены, что делает их «непробиваемыми».

Более того, вы можете обновлять контент и стиль кнопок, просто редактируя HTML-шаблон. Вам больше не нужно тратить время на создание кнопок в Photoshop, загрузку на сервер и обновление кода.

## Не используйте изображения вместо кнопок

Я скажу это один раз и больше никогда не повторю: единственная *по-настоящему* «непробиваемая» кнопка — это изображение.

Я знаю, звучит странно. Но это единственный способ гарантировать, что кнопка выглядит абсолютно одинаково во всех 100% почтовых клиентов. Мы все знаем, насколько нестабильно могут выглядеть письма в разных приложениях и устройствах.

Несмотря на это, **вы никогда не должны использовать кнопку-картинку**. Такие кнопки исчезают, когда изображения блокируются, и они недоступны для программ чтения с экрана (скринридеров).

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

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

Теперь, когда вы знаете больше о картинках-кнопках, вы должны понимать: мое изначальное утверждение верно лишь отчасти. Они выглядят одинаково только там, где картинки включены, а подписчик не использует скринридер. Являются ли они непробиваемыми? Нет.

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

## Что делает дизайн кнопки идеальным?

Кнопки — это не только код. Есть несколько факторов, которые делают их удобными и привлекательными.

### Форма кнопки

Правило номер один: кнопка должна выглядеть как кнопка.

Мы все любим креатив, но если уйти слишком далеко от ожидаемого, подписчики не поймут, что это интерактивный элемент. Используйте стандартные формы: скругленные углы, квадратные, овальные, «призрачные» кнопки или кнопки с тенью.

### Размер кнопки

Более 40% писем открываются на мобильных устройствах. Если кнопка слишком мала, по ней сложно попасть пальцем. Если слишком велика — она выглядит как дизайнерский элемент, а не как кнопка. Идеальная высота — от 42px до 72px (примерно 11-19 мм).

### Отступы и «воздух»

Убедитесь, что вокруг кнопки достаточно свободного места, чтобы она выделялась. Это особенно критично для мобильных устройств, чтобы пользователь случайно не нажал соседнюю ссылку.

### Визуальная обратная связь

Там, где это возможно, добавляйте интерактивность: изменение цвета при наведении или эффект «нажатия». Это дает подписчику сигнал, что элемент кликабелен.

### Текст и шрифт

Ваш CTA должен быть четким и побуждающим к действию. Одной-пяти слов обычно достаточно. Это сохраняет письмо читабельным и «сканируемым».

## 5 способов создать «непробиваемую» CTA-кнопку

Учитывая более 300 000 способов отображения email, невозможно создать одну универсальную кнопку. Но можно сделать ту, которая будет работать *почти везде*.

1. **Кнопка с условными отступами:** использует стиль для всех клиентов, кроме Outlook, для которого задаются отдельные параметры через условный код.

2. **Кнопка на основе VML:** традиционный подход для Outlook с использованием Vector Markup Language. Надежно, но требует специфических знаний.

3. **Кнопка на базе таблицы:** самый простой способ, использующий ячейки таблицы для структуры. Но у такого метода есть свои ограничения по кликабельности.

4. **Кнопка на основе границ (border):** использует толстые рамки для создания формы кнопки, что позволяет не зависеть от специфических отступов.

5. **Комбинированный метод (отступы + границы):** объединяет лучшие черты предыдущих подходов, обеспечивая лучшую поддержку в разных почтовиках.

## А ваши кампании «непробиваемы»?

Независимо от выбранного метода, использование кнопок на основе кода — лучший выбор по сравнению с картинками. Даже в клиентах, которые блокируют изображения, «непробиваемые» кнопки гарантируют, что ваше сообщение будет понятно аудитории. Никаких «сломанных» писем больше не будет!