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

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

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 93 средняя оценка: 4.83 (рейтинг: 97%)

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

Viber-рассылка - как SMS, только дешевле и с картинкой

Для продвинутых пользователей, наверное, проще сверстать кнопку с нуля, чем брать уже готовую и заморачиваться над изменениями. Мы разобрали популярные практики, как можно сделать кнопку СТА разными способами.

Краткое содержание статьи, как сверстать кнопку:

1. Кнопки в виде картинок

Если вы не хотите мучиться с вёрсткой или дизайн вашего письма требует уникальных кнопок со спец. эффектами, такими как: тени, свечения, анимация, градиенты или нестандартные шрифты — вы всегда сможете использовать кнопку нарисованную в графическом редакторе. Такая кнопка будет выглядеть 100% одинаково везде, но есть вероятность, что некоторые почтовые клиенты сразу ее не загрузят. Тот же Outlook по-умолчанию блокирует загрузку картинок.

Не забывайте использовать ALT-текст для кнопок-картинок. Дублируйте в нем название вашей кнопки, а так же применяйте стили для оформления ALT-текста.

2. Campaign Monitor (http://buttons.cm)

Компания разработала инструмент для создания кнопок на основе VML. Язык VML используется для корректного отображения кнопки в MS Outlook.

Кнопка в CampaingMonitor

Вёрстка кнопки Campaign Monitor

В Outlook такая кнопка хорошо смотрится, но она не универсальная из-за фиксированных размеров. Получается, её нужно постоянно генерировать заново, изменяя размеры в зависимости от длины названия.

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

Оцените eSputnik в действии!
 
 
 

3. MailChimp

Предлагает использовать кнопки на основе таблицы

Кнопка от MailChimp

Кнопка в MailChimp

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

4. eSputnik

Мы верстаем наши кнопки используя в качестве основного элемента — ссылку <a>, которая обвернута в <span> элемент для создания эффектов границы вокруг кнопки или отбрасывания тени.

Мы не задаем фиксированных размеров кнопкам, поэтому наши кнопки увеличиваются в размерах вместе с увеличением размеров шрифта текста и его длины.

«Объем» кнопки, или иными словами отступы вокруг текста, задается в виде толщины границ ссылки <a>. Этот прием позволяет кнопке остаться объемной в Outlook и не превратиться в ссылку с цветным фоном. Однако Outlook не поддерживает css-свойство border-radius (и др.), поэтому закругленная кнопка в Outlook будет с острыми углами.

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

СSS классы со стилями кнопок

А это HTML верстка самой кнопки

Вёрстка кнопки

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

Готовые кнопки в системе eSputnik

При создании письма выбираете наиболее подходящую кнопку и добавляете её в письмо. Всё:) Остаётся только задать ссылку и полюбоваться письмом.

Всем нашим новым пользователям (для комфортного пользования нашей системой и быстрого старта) мы дарим первый бесплатный шаблон в стиле сайта клиента. В шаблоне так же создаем стили для главной и второстепенной кнопки вашей будущей рассылки.

До новой встречи!:)

PS: Настройте дополнительный канал коммуникации для рассылок — Viber — кнопки здесь делаются так же просто.

Добавить комментарий

alex_86t@list.ru
15:55, 18 апреля 2015

Что же вы ссылку на источник не указываете, Наталья?)
Последний абзац узнаю полностью: http://email-practice.ru/?p=3175
Опубликовано в июне 2014.

Наталья Устименко
natalia.ustimenko
19:27, 18 апреля 2015

Упс, убрала. Его там вообще быть не должно:)

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

Text.ru почему-то не признал Вашего авторства, когда я проверяла статью перед публикацией.

alex_86t@list.ru
00:16, 19 апреля 2015

Вообще, читаю ваш блог с большим удовольствием.
Последний цикл статей про аналитику - так вообще супер, как и видео Дмитрия.
Так что немного удивился, когда узнал свой текст.
Такое уже случалось, но на гораздо менее качественных ресурсах.
Всякое бывает) Спасибо!

Дмитрий Спунтик
admin
19:28, 18 апреля 2015

Добрый день, Алексей.

Интересно, для меня тоже это оказалось новостью. Очевидно, что последний абзац PS Ваш.

Скажите, есть ли у Вас вопросы по контенту самой статьи? Материалы по ней подготовлены на основании работ нашего дизайнера и верстальщика Романа Бурдыги и моей работы с ним.

Наталья это все оформила, и, наконец-то, опубликовала придав этому соответсвующий вид. Очень удивительно, что туда попал абзац с Вашего ресурса, скорее всего это случилось из-за неаккуратной работы с черновиками, которые содержали намного больше информации и copy & paste с разных ресурсов (а источник потерялся). А я к своему стыду так долго утверждал содержание статьи (4 месяца), что чей это текст потерялась Ну об этом Наталья сама ответит.

Тем не менее, хочу обратить Ваше внимание, и прошу получить этому подтверждение — сама статья не вызывает у вас чувства "дежа вю" о том, что Вы это читали в любом другом источнике?

Мы не переписываем чужих статей в нашем блоге, хотя случается что мы их перерабатываем так как нам кажется более уместным. Тем более не перепечатываем отечественные сайты.

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

alex_86t@list.ru
00:20, 19 апреля 2015

Дмитрий, здравствуйте.
По контенту самой статьи нет вопросов.
Про кнопки в самом деле трудно написать что-то новое.
А про использование материалов email-practice, если они вам понадобятся - ради бога, только со ссылками, пожалуйста. Мне такая реклама будет очень даже полезна)

Борис
20:16, 13 июля 2015

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

Наталья Устименко
natalia.ustimenko
16:12, 25 августа 2015

Здравствуйте! В нашей системе есть готовые блоки, в том числе и кнопки, которые можно использовать в письмах даже без глубоких знаний HTML

denis.raichuk@g...
11:17, 29 июля 2015

Спасибо за совет. Переделал мейлчимповскую кнопку на span по esputnik-овски.
Но есть один ньюанс - если стили вставить в [style] и прописать классы для [a] и [span] то почтовики это порежут (или я криворукий)

но если стили прописать в style="" для каждого элемента - то все работает как часики (разве, что в Outlook не проверил, потому что лень :) )

п.с. Esputnik, у вас тэги вставляются как есть - лучше их "эскейпить" хотя бы

Фёдер
16:39, 30 сентября 2015

Всё верно, большинство почтовых клиентов, в т.ч. яндексы, мейлы и др., вырезают стили полностью. Верстать нужно только через таблицы или таблицы + картинки, если есть потребность в тенях и других красивостях. Чтобы нажимать можно было не только на текст, ссылке нужно прописать display: block, width: 100%.

Лесь
20:33, 12 июля 2016

Добрый день.
Можете дать совет - если я хочу создать кнопку, которая будет открывать и прятать текст, то как мне лучше ее написать, если жс некоторыми ресурсы просто игнорируют ?
Писать в штмл жс код или ?
Спасибо за совет.