Структура Шаблоны How-to
~ 9 мин читать
17394 просмотры
оценить
20 июля 2018

Кнопка. Почему мы предпочли именно этот метод верстки

Stripo / Blog / Кнопка. Почему мы предпочли именно этот метод верстки

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

Вы можете либо воспользоваться нашим базовым блоком «Кнопка», либо же создать свою.  К сожалению, не все кнопки одинаково хороши в различных почтовиках. К примеру, в Outlook кнопка технически не может быть закругленной. Это вызвано тем, что данный почтовик не поддерживает свойство border-radius языка CSS.

Именно по этой причине многие пользователи предпочитают сверстать кнопку собственноручно.

Мы решили рассмотреть наиболее популярные методы верстки кнопки.

Конечно, если у вас совершенно нет опыта в кодировании с помощью HTML или вы не располагаете временем, то вы можете воспользоваться нашим базовым блоком «Кнопка».

Методы верстки

  1. Метод верстки на базе таблицы;
  2. Кнопка, написанная языком VML;
  3. Метод верстки Stripo;
  4. Кнопка-картинка;
  5. Кнопка-гиф.

1. Метод верстки на базе таблицы

MailChimp, один из крупнейших ESP, использует именно этот метод.

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

Вот так выглядит код кнопки, сверстанной на основе таблицы:

<table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important; border-radius: 3px; background-color: rgb(43, 170, 223);">
                    <tbody>
                        <tr>
                            <td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial; font-size: 16px; padding: 15px;">
                                <a class="mcnButton " title="Buy it right now" href="http://mailchimp.com" target="_blank" style="font-weight: bold; letter-spacing: normal; line-height: 100%; text-align: center; text-decoration: none; color: rgb(255, 255, 255);">Buy it right now</a>
                            </td>
                        </tr>
                    </tbody>
                </table>

Примечание: эти кнопки во всех почтовиках выглядят именно так, как вы задумали. Но в Outlook она имеет прямоугольную форму.

Stripo-Button-Table-Based-Button-in-Outlook

2. Кнопка, написанная языком VML

Во-первых, хочу напомнить, что VML — это vector markup язык, основанный на XML. Он разработан именно для MS Office.

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

Я создала кнопку с помощью сервиса Buttons.cm, который предоставляет уже готовый к использованию VML код. Мне нужно было только выбрать цвет кнопки и текста.

Моя кнопка должна была отображаться во всех почтовиках следующим образом:

Stripo-Button-VML-Button-in-all-Email-Clients

Она действительно сработала хорошо в Outlook, но, что было очень удивительным для меня, моя кнопка не открылась должным образом в Windows 10 Mail:

Stripo-Button-VML-in-Windows-10-Mail

Код кнопки, созданной в VML:

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" strokecolor="#1e3650" fill="t">
    <v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#556270" />
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">hello I wonder many characters I can put here</center>
  </v:roundrect>
<![endif]--><a href="http://"
style="background-color:#556270;background-image:url(https://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:300px;-webkit-text-size-adjust:none;mso-hide:all;">hello I wonder many characters I can put here</a></div>

О чем важно помнить, если используете VML кнопку:

Кнопки, написанные языком VML, имеют ограничение по количеству символов. Например, если длина вашей кнопки 200 рх, то в нее нельзя вписать более 27 знаков. В противном случае, текст перейдет на следующую строку.

Stripo-Button-VML-two-Lines-Button

Примечание: разные почтовики применяют различные шрифты при замене вашего на веб-безопасный. А это значит, что ширина текста может немного увеличиться. Даже если вы используете всего 27 символов, ваш текст все равно может разместиться на 2 строках. Во избежание этого постарайтесь сделать его максимально коротким!

3. Метод верстки Stripo

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

Отступы вокруг текста задаются в виде толщины границ ссылки <a>.  Данная опция позволяет кнопке сохранить пространство между текстом и ее краями.

Примечание: как мы уже сказали, Outlook не поддерживает css-свойство border-radius. В связи с этим, какую бы форму ни задали вашей кнопке, в данном почтовике она все равно будет прямоугольной формы.

HTML код нашей кнопки:

<span class="es-button-border" style="">
        <a href="" class="es-button" target="_blank">Button </a>
    </span>

CSS код:

a.es-button {
    border-style: solid;
    border-color: #31cb4b;
    border-width: 10px 20px 10px 20px;
    display: inline-block;
    background: #31cb4b;
    border-radius: 30px;
    font-size: 18px;
    font-family: arial, 'helvetica neue', helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 120%;
    color: #ffffff;
    text-decoration: none !important;
    width: auto;
    text-align: center;
}
 
.es-button-border {
    border-style: solid solid solid solid;
    border-color: #2cb543 #2cb543 #2cb543 #2cb543;
    background: #2cb543;
    border-width: 0px 0px 2px 0px;
    display: inline-block;
    border-radius: 30px;
    width: auto;

4. Кнопка-картинка

В качестве альтернативы, вы можете нарисовать картинку/баннер с изображением кнопки поверх нее или же просто разместить дополнительную картинку поверх баннера и подставить к нему ссылку. Готово!!

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

Stripo-Button-Images

Иными словами, в случае, если вы хотите создать нестандартную уникальную кнопку призыва к действию, вы можете либо прописать ее кодом, либо же нарисовать.

Примечание: ссылки, которые спрятаны под картинки, в сообщениях не видны сами по себе. Обязательно добавляйте alt text  при размещении кнопки-картинки. Так получатели поймут, где расположена СТА кнопка.

Это пример, как  Hubspot использует кнопку-картинку:

Stripo-Button-Hubspot

5. Кнопка-гиф

Анимированная кнопка — прекрасная замена кнопке-картинке.

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

После добавьте к нему ссылку.

Традиционно, анимированные кнопки применяются для привлечения внимания к видео.

Stripo-Button-Animated-GIF-button

Каждый метод верстки имеет свои преимущества и недостатки. Выберите тот,  который подходит именно вам. Но, выбирая его, пожалуйста, помните, что размер HTML кода влияет на общий вес письма. Чем тяжелее письмо, тем больше у вас шансов попасть в спам.

Например, Gmail обрезает сообщение, если его вес превышает 102 kB.

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

Согласно многочисленным исследованиям,  форма кнопки не имеет значения. Но что действительно важно по мнению Нила Пателя, так это:

  1. Цвет;
  2. Понятный текст;
  3. Отступы между краями кнопки и самим текстом;
  4. Четкие границы кнопки.

Кнопки в наших шаблонах соответствуют перечисленным выше требованиям.

Но если вы сверстали свою, то вам нужно вставить ее код в блок HTML.

Я искренне желаю вам удачи! Пусть ваши кнопки будут эффективны и повышают ваш CTOR!

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
04 августа
Виды баннеров: как создать баннер в Stripo Email Builder за считанные минуты

Сложно представить современную промо-рассылку без баннера. Вы видели тысячи писем – и с хорошими баннерами, и с плохими. Как известно, баннер – это самый первый элемент, который увидят наши получатели. Следовательно, он должен быть броским, привлекательным и эмоциональным. Возможно, вы уже знаете, какой баннер вам нужен для будущих кампаний. Но так ли просто создать именно такой баннер, который действительно будет соответствовать всем вашим требованиям? Как правило, нам нужно найти подходящее изображение или сделать фото, отредактировать его в Photoshop, написать текст...

Дизайн Структура Шаблоны How-to
Video in Email Marketing- Everything You Need to Know_Featured Image
29 июля
Раскрутка онлайн-бизнеса: видео в email-маркетинге

По исследованиям Statista, в США электронная почта — третья по популярности тактика маркетинга малого бизнеса. Будучи пионером цифрового маркетинга, email все еще остается отличным оружием, потому что в нем есть все, что нужно маркетологам и рекламодателям для продвижения товаров и услуг. И хотя реклама становится все более автоматизированной, человеческий фактор от этого становится только еще сильнее и эффективнее, причем в любой сфере. Поэтому компании могут добавлять в письма любой контент, чтобы привлечь потенциальных клиентов. Это может быть текст, изображения, аудио...

Дизайн Маркетинг How-to
Будьте всегда в курсе последних новостей в области email маркетинга!