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

20 июля 2018

Оглавление

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

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

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

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

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

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

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

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

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

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 она имеет прямоугольную форму.

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

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

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

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

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

Она действительно сработала хорошо в Outlook, но, что было очень удивительным для меня, моя кнопка не открылась должным образом в 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 знаков. В противном случае, текст перейдет на следующую строку.

Примечание: разные почтовики применяют различные шрифты при замене вашего на веб-безопасный. А это значит, что ширина текста может немного увеличиться. Даже если вы используете всего 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. Кнопка-картинка

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

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

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

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

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

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

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

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

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

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

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

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

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

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