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 px, то в неї не можна вписати більш ніж 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 при розміщенні кнопки-зображення. Так одержувачі зрозуміють, де розташована CTA кнопка. Це приклад, як Hubspot використовує кнопку-зображення:

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

Анімована кнопка – чудова заміна кнопці-зображення. Існує 2 методи застосувати кнопку: ви можете намалювати банер або будь-яке інше зображення, включаючи зображення товарів, поверх неї розташуйте анімовану кнопку. Або ж анімуйте весь банер. Після чого додайте до нього посилання.

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

Кожен метод верстки має свої переваги та недоліки. Оберіть той, який підходить саме вам. Але, обираючи його, будь ласка, пам’ятайте, про те, що розмір HTML коду впливає на загальний вигляд листа. Чим важче лист, тим більше у вас шансів потрапити у спам.

Наприклад, Gmail обрізає повідомлення, якщо його вага перебільшує 102 kB.

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

Згідно з численними дослідами, форма кнопки не має значення. Але що дійсно важливо на думку Ніла Пателя, так це: