Слышали ли вы об аналогии «дизайн-студия» для email? Если ваша веб-страница — это ваш магазин, а ваше письмо — витрина, то кнопка призыва к действию (CTA) — это ваша потрясающая витрина, которая привлекает людей. Само собой разумеется, ваш CTA — одна из самых важных частей вашего письма, и если его трудно найти, трудно использовать или он каким-либо образом сломан, ваши подписчики не будут нажимать!
Но не волнуйтесь. Мы здесь, чтобы помочь вам сделать ваши кнопки CTA пуленепробиваемыми и видимыми для всех клиентов, независимо от почтового клиента или предпочтений просмотра.
В этой статье мы глубже погрузимся в методы создания пуленепробиваемых кнопок для ваших подписчиков, чтобы улучшить пользовательский опыт и эффективность ваших email-кампаний.
### Оглавление
— Что такое пуленепробиваемая кнопка?
— Лучшие практики дизайна кнопок
— 5 техник кодирования
— Продвинутые хаки и улучшения кнопок
— Поддержка почтовых клиентов (таблица) с советами для темного режима
## Что такое пуленепробиваемая кнопка?
Пуленепробиваемые кнопки — это кнопки призыва к действию, созданные с помощью кода, а не изображений. Вы можете надежно заменить свои GIF, PNG и JPEG на HTML и CSS. Используя только код, кнопка будет отображаться во всех почтовых клиентах, даже если изображения отключены, что делает их «пуленепробиваемыми».
Более того, вы можете обновлять контент и стиль своих кнопок, просто редактируя шаблон HTML. Вам больше не придется тратить время на создание кнопок в инструменте дизайна email, таком как Photoshop, загрузку их на сервер и обновление HTML.
## Не используйте изображения пуленепробиваемых кнопок
Я скажу это один раз и больше никогда не буду повторять. Единственная *по-настоящему* пуленепробиваемая кнопка — это изображение.
Я знаю. Но это действительно единственный способ гарантировать, что ваша кнопка будет выглядеть абсолютно одинаково во 100% почтовых клиентов. Ведь мы все знаем, насколько непоследовательно могут выглядеть наши письма в разных почтовых клиентах, приложениях и устройствах.
Несмотря на это, **вы никогда не должны использовать кнопку на основе изображений**. Кнопки-изображения теряются, когда изображения отключены из-за блокировки изображений, и они недоступны для ваших подписчиков, использующих программы чтения с экрана (об этом чуть позже).
Если ваши CTA содержатся в изображениях, есть большая вероятность, что подписчики упускают ваше сообщение. Что еще хуже, они не взаимодействуют с вашими кампаниями.
Использование CTA-кнопок на основе изображений также влияет на доступность вашего письма. Если вы скрываете контекст CTA внутри изображения, программы чтения с экрана могут не суметь его прочитать, делая ваше письмо недоступным для подписчиков с нарушениями зрения.
Теперь, когда вы знаете больше об изображениях кнопок, вы должны понять, что мое первоначальное утверждение верно лишь отчасти. Кнопки на основе изображений выглядят одинаково в каждом почтовом клиенте, *где изображения включены и только если подписчик не использует программу чтения с экрана*. Так действительно ли они пуленепробиваемые? Нет. И поскольку оба этих вышеупомянутых случая невозможно отследить с помощью стандартного отслеживания email, у вас нет способа узнать, какой процент ваших подписчиков испытывает этот плохой опыт.
Так что откажитесь от CTA-изображений, чтобы ваши подписчики могли видеть и использовать ваши CTA, независимо от того, какое устройство они используют.
## Что делает дизайн кнопки красивым?
Кнопки — это нечто большее, чем просто код. Существует несколько факторов, которые делают ваши кнопки удобными в использовании и привлекательными.
### Форма кнопки email
Правило номер один: сделайте так, чтобы ваши кнопки выглядели как кнопки.
Нам всем нравится создавать забавные и уникальные кнопки, но часто, если вы слишком сильно отклоняетесь от ожидаемого, подписчики не поймут намерения — и не предпримут действий. Да, слова могут говорить, что что-то кликабельно, но, как говорится, «картинка стоит тысячи слов».
Используйте стандартные формы кнопок, чтобы привлечь внимание, особенно если они просматривают. Стандартные формы включают:
— Скругленные углы
— Квадратные углы
— Форма таблетки
— Призрачная кнопка
— Кнопка с тенью
Это не значит, что вы не можете делать забавные вещи с кнопками. Magic Spoon добавил забавные анимированные GIF к своим кнопкам, чтобы еще больше привлечь к ним внимание.
### Размер кнопки email
Поскольку более 40% подписчиков открывают письма на мобильных устройствах, по данным нашего отчета «Состояние вовлеченности в email», важно, чтобы ваша кнопка была разработана так, чтобы она работала на всех устройствах.
Если ваша кнопка слишком мала, ее будет трудно нажать на мобильных устройствах. Если она слишком велика, она будет меньше походить на кнопку и больше на элемент дизайна.
Идеальный размер кнопок для легкого нажатия на мобильных устройствах был определен как между 42px и 72px (примерно 11–19 мм). Это средний размер высоты кнопок, встречающихся в Интернете, и кнопки, которые мы используем в Litmus, также попадают в этот диапазон.
### Пространство и отступы кнопки email
Убедитесь, что вокруг ваших кнопок достаточно пустого пространства, чтобы они выделялись. Это также облегчает подписчикам нажатие на нужную кнопку.
Лучший пример этого — письмо с несколькими ссылками в одном абзаце. Если вы сгруппируете ссылки близко друг к другу, ваши подписчики никогда не смогут точно нажать на то, что вы хотите, особенно на мобильных устройствах.
### Визуальная обратная связь
Не все почтовые клиенты поддерживают интерактивные письма, но там, где это возможно, добавление небольшой интерактивности для предоставления визуальной обратной связи помогает подписчикам понять, что их взаимодействие зарегистрировано.
Это дополнительный сигнал для них, что что-то кликабельно.
Это может быть простое изменение цвета или более сложное, в зависимости от ваших предпочтений. (Мы знаем, что иногда весело выкладываться по полной, так что не сдерживайтесь — но также знайте, когда остановиться.)
Наша стандартная кнопка имеет изменение цвета, а также эффект нажатия.
Но мы также попробовали что-то новое и отлично провели время с кнопками нашего январского выпуска. Отличный элемент дизайна, которым было также весело «нажимать».
### Текст и размер шрифта кнопки email
Сохраняйте фактический текст или метку CTA действенными и по существу. Четко и кратко сообщите подписчикам, что вы хотите, чтобы они сделали.
Обычно достаточно от одного до пяти слов.
Такая длина также делает ваше письмо сканируемым. А если вам нужно сказать больше? Включите это в заголовок над кнопкой. Регулярно удерживая CTA в пределах от одного до пяти слов, вы заставляете редкий момент, когда вы превышаете это, выделяться гораздо более значимым образом.
Успех email, основанный на данных
Принимайте более разумные решения с богатыми, надежными данными. Понимайте поведение подписчиков и увеличивайте свою ROI.
## 5 способов кодирования пуленепробиваемой CTA-кнопки
При более чем 300 000 потенциальных рендерингов email, действительно ли удивительно, что вы не можете создать универсальные стили кнопок, которые работают везде?
Что вы можете сделать, так это создать кнопку, которая работает *почти* везде. И существует несколько различных методов создания этих кнопок в зависимости от ваших потребностей. Просмотрите их, чтобы выяснить, какой из них лучше всего подходит для поддержки ваших подписчиков.
### 1. Кнопка с условным отступом
Спасибо Марку Роббинсу за эту кнопку с условным отступом. Это та, которую мы используем в Litmus.
Эта кнопка использует стилизацию ссылки для стилизации всех, кроме Outlook. Затем она использует условный код для добавления отступов и радиуса скругления, специфичных для Outlook. Поскольку отступы Outlook контролируются отдельно, вы можете редактировать отступы Outlook, не влияя на внешний вид кнопки в других почтовых клиентах.
#### Плюсы кнопок с условным отступом
— Отличная поддержка в большинстве почтовых клиентов (см. таблицу ниже).
— Вся кнопка кликабельна.
#### Минусы кнопок с условным отступом
— Требует манипуляций с условным кодом и тегами, чтобы получить точный отступ в Outlook.
— Версия для Outlook имеет квадратные углы, независимо от всего.
### 2. Кнопки на основе VML
Этот традиционный подход к пуленепробиваемым кнопкам был популяризирован Стигом, разработчиком в Campaign Monitor.
Этот подход использует стилизацию самой ссылки для структурирования и стилизации кнопки для большинства почтовых клиентов. Структура обеспечивается через отступы.
В качестве резервного варианта для Microsoft Outlook используется Vector Markup Language (VML) внутри условного комментария, специфичного для Outlook. VML создает рамку вокруг ссылки в Outlook, а затем стилизует тег якоря для создания дизайна кнопки для всех остальных.
Спасибо Уилберту Хейнену за код:
Для более сложных версий этой кнопки вы бы фактически создали две версии кнопки — одну в VML и одну для всего остального.
**Плюсы кнопок на основе VML**
— Отличная поддержка в большинстве почтовых клиентов (см. таблицу ниже).
— Вся кнопка кликабельна.
— Скругленные углы сохраняются в Outlook.
**Минусы кнопок на основе VML**
— Опирается на использование незнакомого языка — VML, который является проприетарным для пакета Microsoft Office, что делает создание новых пуленепробиваемых кнопок и обновление существующих трудоемким и разочаровывающим.
— Более сложные версии кнопки VML требуют двух URL-адресов, которые нужно изменить. И некоторые ESP не отслеживают URL в разделе VML.
### 3. Кнопки на основе отступов
Этот метод использует простую HTML-таблицу для кнопки. Он опирается на отступы на уровне ячейки таблицы для структурирования, а также на HTML-атрибуты и CSS для стилизации кнопки.
| Я — кнопка → |
#### Плюсы кнопок на основе отступов
— Использует HTML, VML не нужен.
#### Минусы кнопок на основе отступов
— Версия для Outlook имеет квадратные углы, независимо от всего.
— Кликабелен только текст внутри кнопки.
### 4. Кнопки на основе границ
Кнопки на основе границ используют подход, аналогичный предыдущему методу. Используя простой HTML и CSS, вы можете структурировать и стилизовать свои призывы к действию. Однако вместо того, чтобы полагаться на отступы на уровне ячейки таблицы для структуры, добавьте толстые границы к самой ссылке, чтобы создать ваш CTA.
a rel=»noopener» target=»_blank» rel=»noopener» target=»_blank» href=»http://litmus.com» target=»_blank» style=»font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none; border-radius: 5px; background-color: #1F7F4C; border-top: 12px solid #1F7F4C; border-bottom: 12px solid #1F7F4C; border-right: 18px solid #1F7F4C; border-left: 18px solid #1F7F4C; display: inline-block;»>Я — кнопка →
Обратите внимание, что тег ссылки установлен как блочный элемент, а границы используются для обеспечения «отступов». Это гарантирует, что вся кнопка будет наводимой и кликабельной, даже в старых настольных клиентах.
**Плюсы кнопок на основе границ**
— Вся стилизация находится на фактическом теге ссылки, что упрощает код.
— Используется только одна кнопка. Никаких двойных кнопок или запутанного кода VML не требуется.
— Вам не нужны специфические определения высоты или ширины, что делает кнопки очень масштабируемыми.
**Минусы кнопок на основе границ**
— Outlook незначительно уменьшает размер границ.
— Outlook не распознает теги **** как блочные элементы.
— Outlook не поддерживает скругленные углы.
— Нет возможности добавить более продвинутую стилизацию, такую как дополнительные границы на точном элементе ссылки.
### 5. Кнопки на основе отступов и границ
Кнопки на основе отступов и границ сочетают в себе элементы двух предыдущих подходов.
По сути, этот подход использует ту же структуру стилизации ссылки как с отступами, так и с как минимум сплошной границей толщиной 1 пиксель. Затем цвет фона применяется к **
| Я — кнопка → |
#### Плюсы кнопок на основе отступов и границ
— Требуется закодировать только одну кнопку, что упрощает обновление кнопок, использующих эту технику.
— Конкретные размеры для кнопок не требуются.
— Фоновые изображения могут быть поддержаны этим методом.
#### Минусы кнопок на основе отступов и границ
— Стилизация разделена между **
— Outlook не поддерживает скругленные углы.
### Семантические HTML-кнопки для email?
Мы любим использовать семантический HTML, но, к сожалению, тег **
Вложение div или таблиц внутри тегов якоря возможно. Но это не семантически правильно. Кроме того, оба этих метода приводят к кнопкам, которые не работают в Outlook. В случае с таблицами ссылка не кликабельна, а в случае с div… ну, сами увидите:
Призывы к действию в email, которые стимулируют вовлеченность
Создавайте письма, которые «кликнут», с убедительными призывами к действию, которые стимулируют более высокую вовлеченность и конверсию.
## Продвинутые хаки и улучшения пуленепробиваемых кнопок
Все вышеперечисленные методы являются отличными отправными точками для создания пуленепробиваемых кнопок, но каждая техника может быть дополнительно модифицирована для создания лучших пуленепробиваемых кнопок.
### Хак горизонтального отступа для Outlook
Outlook не поддерживает горизонтальные отступы, что может привести к тому, что текст CTA-письма будет очень близко к левому и правому краям пуленепробиваемой кнопки.
Быстрый хак, который можно использовать для увеличения горизонтального «отступа» для Outlook, — это условное добавление встроенного пробела (или нескольких) с каждой стороны ссылки. В дополнение, правый отступ также будет включать нулевой ширины пробел, чтобы кнопка правильно отображалась. Условная кнопка отступов уже использует это для добавления пространства по бокам кнопки.
Я — кнопка
### Прогрессивное улучшение с медиа-запросами
Чтобы улучшить дизайн вашей пуленепробиваемой кнопки, вы можете использовать продвинутые стили, такие как границы, градиенты, веб-шрифты, эффекты наведения и многое другое с помощью медиа-запросов.
### Улучшения Outlook с помощью VML
Знаете ли вы, что VML добавляет проблемы с доступностью? Из-за этого Outlook отказывается от старых настольных клиентов, использующих VML, и мы предлагаем вам сделать то же самое.
## Как выглядит поддержка почтовых клиентов?
Почтовые клиенты обновили свою поддержку с момента написания этого поста в 2017 году, поэтому эти кнопки очень близки к пуленепробиваемым. Наименьшая поддержка в Outlook, но даже там кнопки все еще функциональны.
Вы можете ознакомиться с полными тестами Litmus здесь.
** Скругленные углы не отображаются. † Размер кнопки искажен.
### Поддержка и хаки для темного режима
Темный режим приносит интересный поворот в пуленепробиваемые кнопки. Как и большинство HTML и CSS, вы можете управлять стилями темного режима для кнопок с помощью медиа-запросов.
Однако Gmail и Outlook.com могут инвертировать цвета кнопок.
Если вы хотите сохранить фоновые цвета на своих кнопках, есть несколько хаков. Однако будьте осторожны с инвертированием цвета текста на кнопках. Нет способа сохранить цвета шрифтов от переключения в Outlook, но вы можете сохранить белый текст на своих кнопках с помощью обходного решения Rémi Parmentier’s CSS blend workaround.
Самый большой недостаток поддержки в этих вариантах пуленепробиваемых кнопок — это VML-кнопки.
В темном режиме Office 365 инвертирует ваши фоновые цвета, но *не* инвертирует цвет заливки в VML. Так вы получаете кнопки, которые выглядят так:
Чтобы исправить это: убедитесь, что вы используете значение RGBA для фонового цвета в теге **** для вашей кнопки, например: