В этом гайде мы рассмотрим понятия кнопок в письмах и изучим основные принципы их создания. На реальных примерах вы получите полное представление о том, как цвет, текст и мобильная оптимизация влияют на их эффективность.
Кнопка в HTML-письме — один из столпов успешного email-маркетинга. Для меня это короткий путь на страницу сайта, элемент, побуждающий совершить покупку или прочитать статью в блоге. Однако чем больше писем получают получатели, тем привередливее они становятся. Есть ли из этого выход? Да!
Одна только адаптивность может увеличить кликабельность на 15%. Доступность, психология цвета и выбор текста дополнительно увеличивают шансы.
Так какой же рецепт кнопок в письмах должен покорить людей? И как их разработать без знаний кодинга?
Вместе мы ответим на эти вопросы, сравним, какие эмоции и действия вызывают разные кнопки, и узнаем, как создавать кнопки для HTML-писем с помощью Stripo. Давайте начнем!
Знакомство с кнопками HTML-писем
Прежде чем вы научитесь создавать кнопки для писем, я предлагаю ознакомиться с этими элементами и разобраться в их типах.
Что такое кнопка в HTML-письме?
HTML-кнопка — это кликабельный элемент письма, стилизованный с помощью каскадных таблиц стилей (CSS). В отличие от текстовых элементов, кнопки хорошо видны, поэтому их невозможно пропустить.
Кнопки в письме бывают разных форм и служат для разных целей. Именно тогда и возникает необходимость в дифференциации:
- Призыв к действию, или кнопка CTA: эта кнопка побуждает получателей к действию: совершению покупки, получению скидки, просмотру статьи или бронированию встречи — отсюда и название кнопки.
(Источник: письмо от ConnectTeam) - Текстовая кнопка: эта кнопка состоит только из текста без элементов оформления, характерных для кнопок. Текст с гиперссылками часто служит для отписки от рассылки или переадресовывает читателей к правилам и условиям сервиса.
(Источник: письмо от Travel Awaits) - Универсальная кнопка: дизайн этой кнопки обеспечивает корректное отображение во всех почтовых клиентах. Все дело в ее конструкции: она создается с помощью HTML-кода и встроенного CSS. Даже при отключенных изображениях в письме эти кнопки остаются неизменными. Существует несколько подтипов универсальных кнопок, с которыми можно работать:
- кнопки с подложкой: эта кнопка в письме основана на HTML-таблице и стилизована с помощью CSS, чтобы добавить больше пространства вокруг текста;
- кнопки VML: VML означает векторный язык разметки. Эта технология используется, в частности, при создании универсальных кнопок для Microsoft Outlook;
- кнопки с границами: вместо подложки в таблице кнопок вы оформляете их с помощью толстых границ, чтобы задать нужную форму.
(Источник: письмо от Ryanair)
- Кнопка с картинкой: для создания кнопок из картинок необходимы файлы изображений (JPG, PNG, JPEG), обозначающих кнопку. Можно поэкспериментировать со стилем или шрифтами, но этот вариант не совсем практичен. Письма, основанные исключительно на изображениях, могут загружаться медленно. Кроме того, при отключении изображений кнопка пропадает и письмо отображается некорректно:
Теперь давайте посмотрим на то же самое письмо с включенными картинками и кнопками в виде изображений:
(Источник: письмо от Reserved)
(Источник: письмо от Reserved) - Кнопка соцсети: этот тип кнопок в письмах ссылается на профили социальных сетей и чаще всего используется в хедере или футере. Кнопки имеют меньший размер и изображают платформу социальной сети.
(Источник: письмо от Brevo)
Понимание типов и преимуществ кнопок — ключ к улучшению email-кампаний. Теперь давайте обсудим их реальный эффект.
Почему кнопки в HTML-письмах важны?
В email-маркетинге нет ничего несущественного. Кнопки HTML-письма могут показаться тривиальными, но они влияют на вовлеченность и создают положительный пользовательский опыт. Каким образом?
Хорошо продуманная кнопка CTA может повысить кликабельность на 371% и увеличить продажи на 1617%.
Контрастные цвета, четкий текст и увеличенный шрифт позволяют кнопкам письма выделяться и мотивировать получателей к совершению действия.
Помимо внешнего вида, HTML-кнопки облегчают навигацию по письмам и часто разделяют длинный текст. Пример будет более наглядным!
Вы заметили, что на скриншоте ниже фраза «Explore Adventure Fix GO» использована дважды? Правильно! Первый раз она была упомянута в тексте, а второй — в тексте кнопки.
(Источник: письмо от Adventure Fix)
Сначала я заметила ее только на кнопке, и только внимательно прочитав текст, поняла, что она повторяется! Вот насколько эффективны и заметны кнопки.
Сообщение на кнопке никогда не бросается в глаза, поэтому правильно созданные кнопки в письмах — это не просто элемент, а инструмент. Предлагаю перейти к дизайну и посмотреть, что делает кнопки отличными!
Дизайн кнопок для HTML-писем
Создание кнопок — это и наука, и искусство. Они должны быть удобными, доступными, быстро загружаться и выглядеть эстетично. Визуальный облик HTML-кнопки может быть первым, что бросается в глаза, но доступность делает ее полезной для всех.
Кнопки писем, не адаптированные под скринридеры или людей с ограниченными возможностями, выпадают из контекста и теряются. Именно поэтому доступность — следующая тема, которую мы рассмотрим!
Доступность
Доступность позволяет взаимодействовать с письмами всем получателям, включая подписчиков с нарушениями зрения и тех, кто пользуется программами чтения с экрана.
Согласно Web Content Accessibility Guidelines, есть несколько моментов, которые следует учитывать при создании контента для писем:
- Ассистивные технологии должны уметь определять задачу кнопки по одному только тексту.
- Если HTML-кнопка анимирована, она не может мигать более 3 раз в секунду.
- Кнопка письма и цвет ее текста имеют минимальный коэффициент контрастности 4,5:1.
- Минимальный размер всей кнопки — 24 на 24 CSS-пикселя.
- Элементы макета, включая кнопки, должны полностью работать с клавиатуры.
Отличная новость: если вы создаете свои шаблоны писем в Stripo, то все, включая кнопки писем, будет доступно. Если вы используете другие инструменты или работаете с HTML-редактором, не забывайте об этих моментах, так как мы переходим к советам по дизайну!
Выбор цвета
Начну с психологии цвета. Знаете ли вы, что красный как фоновый цвет считается очень эффективным? Он ассоциируется с властью, поэтому кнопка письма внизу сразу же побудила меня кликнуть. Коэффициент контрастности 5,63 также делает ее визуально доступной и заметной.
(Источник: письмо от New Balance)
Однако если New Balance выгодно выбрать такой цвет фона, то медицинским компаниям лучше его избегать. Красный цвет может вызвать тревогу, поэтому лучше выбрать зеленый и синий, символизирующие спокойствие и стабильность.
Следующий пример цвета, который мы рассмотрим, — желтый, который часто ассоциируется со счастьем. С точки зрения контрастности он имеет коэффициент 6,51, что соответствует требованиям и привлекает внимание. Неудивительно, что авиакомпания выбрала такой цвет фона для кнопки!
(Источник: письмо от Ryanair)
Текст кнопки
Теперь, когда мы обсудили цвета, предлагаю перейти к тексту кнопки. Привлечь внимание читателя мало. Кнопка письма должна служить мотиватором и побуждать к действию.
Первая кнопка, которую мы изучим, точная и компактная. Она выделяет желаемое действие — совершить покупку прямо сейчас. Размер шрифта — 14 px, семейство шрифтов — Verdana, шрифт sans-serif. При коэффициенте контрастности 18,42 текст более чем читабелен и удобоварим.
(Источник: письмо от Zappos)
Текст следующей кнопки не столько побуждает к действию, сколько интригует. Поскольку это кнопка в виде картинки, HTML-код не содержит подробностей о размере шрифта или его семействе. Коэффициент контрастности составляет 20,12, но разница в стилях очевидна: курсив — для загадочности, а прописные буквы — для интенсивности.
(Источник: письмо от Reserved)
Выбор черных кнопок для писем не случаен: даже при одинаковых цветах каждая из них вызывает разные эмоции. Текст, который вы выбираете для кнопок, так же важен, как и их дизайн.
Теперь, будут ли мои кнопки писем соответствовать рекомендациям для мобильных устройств? Посмотрим!
Оптимизация для мобильных устройств
Кнопка письма должна работать на мобильных устройствах. Если вы все еще сомневаетесь, то цифры могут быть убедительными!
Около 61% получателей писем используют свои мобильные устройства для проверки почты.
Не оптимизировать элементы верстки — значит потерять потенциальных клиентов. Лично я делаю несколько кликов по кнопкам письма — если они не работают, значит, они для этого не предназначены. Конечно, с вашими письмами такого быть не должно.
Вот основные моменты на подумать:
- область касания: руководство по юзабилити Google рекомендует минимальную площадь касания 48x48 dp. Убедитесь, что по кнопкам писем легко тапать;
- размещение кнопок в письмах: избегайте нагромождения нескольких кнопок призыва к действию, так как это затрудняет касание нужной;
(Источник: письмо от The North Face)
- операционные системы: ОС могут по-разному обрабатывать одни и те же элементы, созданные с помощью HTML-кода. Устройства Android и iOS могут по-разному отображать кнопки писем. Рекомендую тестировать элементы во избежание этого.
Учитывая все ключевые моменты адаптивности, самое время создать кнопку в письме и перейти к практике!
Создание кнопок HTML-писем в Stripo
Кнопки писем — это крошечный элемент, который, тем не менее, должен быть доступен и оптимизирован для мобильных устройств. Однако на дизайн требуется время, которого у команды email-маркетинга может не быть.
Именно тогда конструктор шаблонов Stripo может выручить вас! Вот как можно создать кнопку:
- Откройте редактор в своем аккаунте.
- Перетащите блок кнопки письма в область шаблона:
- Кнопка добавлена!
После того как кнопка письма появилась в шаблоне, можно приступать к ее настройке. Если кликнуть на элемент, то появятся две вкладки.
- Вкладка настроек: здесь можно редактировать текст кнопки, добавлять ссылки, выравнивание, изменять отступы, регулировать высоту и вставлять иконки.
- Вкладка стилей: на вкладке можно выбрать цвет фона блока, цвет кнопки, семейство шрифтов, размер шрифта и закругление.
Чтобы кнопки писем были оптимизированы для мобильных устройств, используйте переключатель в правом верхнем углу. После переключения можно скрыть элементы на телефонах, чтобы освободить место, если письмо окажется перегруженным.
Кнопка, созданная в Stripo, уже доступна и семантически корректна, так что вы можете дать волю фантазии!
Если вы хотите сэкономить еще больше времени, у нашей команды есть библиотека шаблонов, которыми можно пользоваться. Все шаблоны писем можно редактировать, поэтому вы можете настроить их под свои задачи.
В завершение
Несмотря на свой размер, кнопки писем являются важной частью верстки. Если сделать кнопки доступными, контрастными и оптимизированными для различных почтовых клиентов и мобильных устройств, это улучшит email-кампании и повысит конверсию.
И с этим поможет справиться Stripo! Пока вы сосредоточитесь на дизайне и визуальном оформлении, мы займемся кодом.
Во второй части этого гайда мы узнаем, как создавать кнопки писем с помощью HTML-редактора и кода. Оставайтесь с нами, чтобы найти еще больше советов и экспертных трюков Stripo!
0 комментариев