Как разместить кнопки в «теле» письма (№43)

В прошлый раз мы занимались сегментацией подписчиков по географии. Сегодня поговорим о содержании/контенте писем.
Безусловно, контент стоит подавать красиво:
в фирменном шаблоне и стиле.
Одним из элементов, который помогает здорово оживить и украсить рассылку (а также повысить количество кликов), является кнопка в письме.

Согласитесь, есть разница:

Кнопка в письме вместо ссылки

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

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

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

 

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

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

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

Вставляем картинкой в нужное место письма:

Кнопка в письме картинкой

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

<img alt=“Перейти к консультации” height=“38” src=“http://image.png” style=“font: Bold 16px Verdana, Tahoma, Arial, Helvetica, sans-serif; color: #43708d; background-color: #ffffff;” width=“201”>

 

Тогда в отсутствие картинки кнопка в письме тоже будет смотреться приемлемо:

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

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

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

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

 

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

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

<table border=“0” cellpadding=“0” cellspacing=“0” style=“background-color: #ff9112; width: 220px; border-collapse: collapse;”>
<tbody>
<tr>
<td style=“border-collapse: collapse; border-spacing: 0; font-family: ‘Trebuchet MS’, sans-serif; font-size: 18px; text-align: center; color: #FFFFFF;  text-shadow: 1px 1px 0 #ff9444; border: 1px solid #e25500; padding: 13px;”>
<a href=“http://link.ru” style=“text-decoration: none; color: #FFFFFF;” target=“_self”>Зарегистрироваться</a></td>
</tr>
</tbody>
</table>

 

В итоге получается совсем неплохо:

Кнопка в письме таблицей

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

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

Кнопка в письме: адаптация под мобильные

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

Какой способ предпочтительнее? Здесь нет 100% верного ответа, многое зависит от шаблона, который вы собираетесь использовать.

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

 

Кнопки в Мэйл Чимп

Графический редактор MailChimp (Drag&Drop) предусматривает возможность автоматической вставки кнопок:

Кнопка в письме в редакторе Мэйл Чимп

Кнопки, которые предлагает MailChimp, простые и несколько однообразные, но работать с ними удобно.

Настраивается текст, ссылка, граница, радиус скругления углов, цвет фона и расположение. Кнопка автоматически адаптируется под мобильные устройства.

Мэйл Чимп использует в этом случае метод таблицы, однако выполняет всю рутинные операции по вёрстке за пользователя — стоит “перетащить” блок с кнопкой на поле письма, как готовый html-код будет встроен туда автоматически.

Дополнительная возможность — кнопки расшаривания социальных сетей:

 

Они также снабжены достаточно гибкими настройками (набор социальных сетей, оформление, расположение и тип кнопок).

Правда, пока в наличии только кнопки западных соцсетей (Facebook, Twitter, Google+ и проч.). Вставить, к примеру, кнопочку Вконтакте или Одноклассники с помощью этого функционала нельзя.

 

Заключение

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

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

 

P.S. В следующей статье побольше поговорим о Мэйл Чимп. Посмотрим, как работать с тегами в этом рассылочном сервисе, создавая персонализацию и динамический контент.

 

P.P.S. Если вы ещё не подписались на мою рассылку — самое время это сделать. Я не только анонсирую свежие статьи блога, но и делюсь с подписчиками бонусной информацией, а также показываю отдельные приёмы email маркетинга на практике. До встречи в вашем почтовом ящике! 🙂