В прошлый раз мы занимались сегментацией подписчиков по географии. Сегодня поговорим о содержании/контенте писем. | |
Безусловно, контент стоит подавать красиво: в фирменном шаблоне и стиле. |
|
Одним из элементов, который помогает здорово оживить и украсить рассылку (а также повысить количество кликов), является кнопка в письме. | |
Согласитесь, есть разница:
Однако здесь не обойтись и без сложностей. Как видео и опросы, кнопка в письме относится к интерактивному контенту. В идеале хочется видеть её объёмной, кликабельной и реагирующей на щелчок пользователя — так же, как на сайте:
Однако как раз последнего эффекта в рассылке достичь крайне сложно.
Из-за технических особенностей почтовых клиентов вставить кнопку тем же кодом, что и на сайте, в письмо не получится.
Впрочем, в запасе у нас как всегда есть парочка обходных путей:)
Как вставить кнопку в письмо
#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 маркетинга на практике. До встречи в вашем почтовом ящике! 🙂