Как создать красивые пуленепробиваемые кнопки электронной почты, которые абсолютно работают

Для более сложных версий этой кнопки вы фактически создадите две версии кнопки - одну в VML и одну для всех остальных.

Плюсы и минусы кнопки на основе VML

Плюсы:

• В большинстве почтовых клиентов есть отличная поддержка (см. Таблицу ниже).
• Сама кнопка активна.
• Закругленные углы сохраняются в Outlook.

Минусы:

• Он основан на использовании незнакомого языка - VML - проприетарного для пакета Microsoft Office, что делает создание новых пуленепробиваемых кнопок и обновление существующих трудоемким и утомительным.
• Необходимо указать ширину и высоту пуленепробиваемой кнопки, поэтому любое изменение копии CTA потребует изменения размеров кнопки.
• Более сложные версии кнопки VML требуют изменения двух URL-адресов. А некоторые ESP не отслеживают URL-адрес в разделе VML.
• VML требует фиксированной высоты и ширины, поэтому эта кнопка не очень хорошо работает для шаблонов, где длина копии в CTA может варьироваться.

Если вы не хотите изучать тонкости VML (и, честно говоря, кто это делает?), У Campaign Monitor есть бесплатный онлайн-инструмент для создания традиционных пуленепробиваемых кнопок. Buttons.cm позволяет легко создавать новые кнопки с призывом к действию, которые будут отлично смотреться и хорошо работать в большинстве почтовых клиентов.

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

3. Кнопки с заполнением

В этом методе для кнопки используется простая таблица HTML. Он полагается на заполнение на уровне ячейки таблицы для структурирования кнопки, а также на атрибуты HTML и CSS для стилизации кнопки.

Плюсы и минусы кнопки с отступом

Плюсы:

• Он хорошо работает с большинством почтовых клиентов (см. Таблицу ниже).
• Он использует код, с которым знакомы дизайнеры электронной почты, - HTML и CSS, - что упрощает создание новых пуленепробиваемых кнопок и обновление существующих.

Минусы:

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

4. Кнопки с границами

Кнопки на основе границ используют тот же подход, что и предыдущий метод. Используя простой HTML и CSS, вы можете структурировать и стилизовать свои призывы к действию. Однако вместо того, чтобы полагаться на заполнение на уровне ячейки таблицы для структуры, добавьте толстые границы к самой ссылке, чтобы создать свой CTA.

Обратите внимание, что тег ссылки настроен как элемент уровня блока и что границы используются для обеспечения нашего «отступа». Это гарантирует, что вся кнопка будет зависать и нажиматься даже в старых клиентах для настольных ПК.

Плюсы и минусы кнопки с рамкой

Плюсы:

• Все стили выполнены на самом теге ссылки, что упрощает код.
• Используется только одна кнопка. Никаких двойных кнопок или запутанного кода VML не требуется.
• Вам не нужны конкретные определения высоты или ширины, что делает кнопки легко масштабируемыми.

Минусы:

• Outlook немного уменьшает размер границ.
• Outlook не распознает теги <a> как элементы уровня блока.
• Outlook не поддерживает закругленные углы.
• Невозможно добавить более сложные стили, такие как дополнительные границы, на конкретный элемент ссылки.

5. Кнопки с отступом и рамкой.

Кнопки на основе отступов и границ объединяют элементы двух предыдущих подходов.

По сути, этот подход использует ту же структуру стилизации ссылки как с отступом, так и со сплошной рамкой размером не менее 1 пикселя. Затем к <td> применяется цвет фона, чтобы заполнить весь фон ссылки. Цвет фона необходимо применить к <td> вместо <a> в этом случае, потому что Outlook не распознает горизонтальное заполнение тега <a> (поскольку он не поддерживает такой стиль для HTML неблочного уровня. элементы).

Плюсы и минусы кнопки с отступом и рамкой

Плюсы:

• Необходимо закодировать только одну кнопку, что упрощает обновление кнопок, использующих эту технику.
• Особых размеров для кнопок не требуется.
• Фоновые изображения могут поддерживаться этим методом.

Минусы:

• Стиль разделен между <td> и <a>, поэтому оба элемента необходимо обновлять при изменении стиля кнопки.
• Outlook не поддерживает закругленные углы.

А как насчет семантического HTML?

Нам нравится использовать семантический html, но, к сожалению, тег <button> просто не поддерживается в электронной почте. В большинстве почтовых клиентов он сокращен до <div>, который либо не активен, либо отображается некорректно.

Вложенные div или таблицы внутри ваших якорных тегов могут быть выполнены. Но это семантически неверно. Кроме того, оба этих метода приводят к тому, что кнопки не работают в Outlook. В случае таблиц ссылка не кликабельна, а в случае с div ... ну, убедитесь сами:

Кнопка Div	Кнопка Div в Outlook

Продвинутые хаки и улучшения

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

Хак по горизонтали для Outlook

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

Быстрый прием, который можно использовать для увеличения горизонтального «заполнения» для Outlook, - это условно добавить встроенные неразрывные пробелы с каждой стороны ссылки. Кнопка условного заполнения уже использует это вместе со свойством letter-spacing, чтобы добавить пространство по бокам кнопки.

Прогрессивное улучшение с помощью медиа-запросов

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

Улучшения Outlook с помощью VML

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

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

Посмотрите нашу кнопку из нашего январского информационного бюллетеня для примера:

Итак, что такое поддержка почтового клиента?

Почтовые клиенты обновили свою поддержку с тех пор, как этот пост был впервые написан в 2017 году, поэтому эти кнопки очень близки к пуленепробиваемым. Как и ожидалось, наименьшая поддержка в Outlook, но даже там кнопки не сильно сломаны.

Вы можете ознакомиться с полными тестами Litmus здесь.

* Закругленные углы не отображаются. † Размер кнопки искажен.

Поддержка темного режима и хаки

Темный режим привносит интересный поворот в пуленепробиваемые кнопки. Как и большинство HTML и CSS, вы можете управлять стилями темного режима для кнопок с медиа-запросами.

Однако Gmail и Outlook.com могут инвертировать цвета кнопок.

Если вы хотите сохранить цвет фона на кнопках, есть несколько хитростей. Однако будьте осторожны, чтобы не инвертировать цвет копии на кнопках. Невозможно предотвратить переключение цветов шрифтов в Outlook, но вы можете оставить белый текст на кнопках белым с помощью обходного пути наложения CSS Реми Парментье.

Самый большой недостаток поддержки в этих пуленепробиваемых кнопках - это кнопки VML.

В темном режиме Office 365 инвертирует цвета фона, но не инвертирует цвет заливки в VML. Таким образом, вы получаете кнопки, которые выглядят так:

Для этого есть исправление: обязательно используйте значение RGBA для цвета фона в теге <a> для вашей кнопки, например:

Таким образом, вы получаете кнопку, которая выглядит так (намного лучше, не так ли?):

Значение RGBA в качестве цвета фона не поддерживается в Outlook, поэтому оно возвращается к цвету VML. Спасибо Wilbert Heinen за это исправление! Поскольку мы не можем контролировать цвет шрифта в темном режиме в Outlook, если вы собираетесь использовать эту кнопку, убедитесь, что ваш выбор цвета учитывает доступность, когда цвет вашего шрифта также инвертирован. (Пример, который мы использовали, является хорошим примером того, какие цвета не использовать.)

Ваши кампании пуленепробиваемые?

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

Создавайте фирменные электронные письма без ошибок с Litmus Неработающие электронные письма, особенно кнопки с призывом к действию, означают меньше кликов и конверсий. Ой. Litmus поможет вам убедиться, что все идеально, с помощью автоматической проверки на блокировку изображений, неработающие ссылки и многое другое. Начать бесплатную пробную версию →

Какая ваша любимая техника пуленепробиваемой пуговицы?

Сообщите нам, как вы создаете пуленепробиваемые кнопки электронной почты, в комментариях ниже.

Первоначально опубликовано 1 ноября 2017 г. Джейсоном Родригесом. Последнее обновление 22 июня 2021 г.