Как сделать красивую кнопку в письме

Дата публикации
16.10.2014

То, как выглядит ваше письмо, имеет очень большое значение для подписчика. Контент, конечно, король, но, если вы будете  рассылать только текст, с торчащими отовсюду ссылками и расставленными невпопад картинками, а ваш конкурент отправит ту же информацию, но оформит ее красиво и профессионально, как думаете — кого выберут подписчики? Правильно!

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

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

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

Впрочем, в запасе у нас, как всегда, есть парочка обходных путей :)

Кнопка

Как вставить кнопку в письмо

#1. Разместить кнопку картинкой

Очевидный способ: находим подходящее изображение кнопки (просим нарисовать дизайнера), пишем мотивирующую к действию надпись — узнать больше, читать полностью — и аккуратно вырезаем то, что получилось, и вставляем в нужное место письма. Это подходит, если вы пользуетесь профессиональным сервисом для рыссылок SendExpert

Если же вы еще пользуетесь обычными почтовыми сервисами, то вам помогут советы, изложенные ниже. Для почтовых клиентов, которые по умолчанию могут не загружать картинки (например, gmail), страхуемся: прописываем в html-коде изображения стили фона и шрифта, а также alt-текст:

Перейти к консультации

«Подкладываем» под картинку нужную ссылку и добавляем последний штрих — атрибут title.

Пусть при наведении на кнопку подписчику демонстрируется небольшая подсказка, что именно произойдёт, если он кликнет на изображение:

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

Недостатки: кнопка в этом случае — всё же обычная картинка, которая может и не загрузиться в части почтовых клиентов.

#2. Разместить кнопку таблицей

Кнопку в письме можно сверстать «классическим» html-кодом.
Для этого просто создаем ее как ячейку во вложенной таблице. Для ячейки прописываем цвет фона, обрамление границей, стиль/размер/цвет шрифта:

Зарегистрироваться

Такую кнопку удобно редактировать: поменять цвет, вписать другой текст (не забываем про ссылку с атрибутом title, чтобы расшифровать подписчику действие кнопки).

Таблица гарантированно отобразится во всех почтовых клиентах. Ее достаточно просто можно адаптировать под мобильные устройства (можно задать ширину таблицы в % от ширины экрана).

Кнопки могут украсить ваше письмо. Правильно оформленная и размещенная кнопка поможет приподнять и клики.

Однако надеяться, что этот «волшебный» рецепт увеличения кликабельности в 2-3 раза, не стоит. Решающую роль в email маркетинге, все-таки, играет контент ваших писем. Если предложение подписчика не заинтересует, никакая сила не заставит его сделать клик мыши, даже если все ваше письмо будет одной сплошной кнопкой.

Читайте также

Подпишитесь на дайджест по email-маркетингу!