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

Stripo-Button-Hubspot

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

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

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

Stripo-Button-Animated-GIF-button

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

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

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

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

  1. Колір;
  2. Зрозумілий текст;
  3. Відступи між краями кнопки та самим текстом;
  4. Чіткі межі кнопки.

Кнопки в шаблонах Stripo відповідають переліченим вище вимогам.

Але якщо ви зверстали свою, то вам потрібно вставити її код у блок HTML.

Я щиро бажаю вам успіхів! Хай ваші кнопки будуть ефективними та підвищують ваш CTOR!

Вас також може зацікавити

← Попередні статті Наступні статті →
13 днів тому
Stripo. Адаптивність повідомлень

Адаптивність повідомлення для мобільних пристроїв вже не унікальна можливість, а частина необхідного функціоналу, саме тому в Stripo ви можете користуватися бібліотекою адаптивних шаблонів, які вже готові до використання, а повідомлення, створені на їх основі, коректно відображатимуться на будь-яких пристроях. Але так часто буває, що потрібно вирішити нестандартну задачу з відображення на  мобільному пристрої. Саме про адаптацію піде мова нижче. 1. Адаптивне зображення Найпростіша функція, якою ви можете користуватися, — “Адаптивне зображення”. Включивши цю опцію, ви убезпечите себе від зайвого горизонтального скролу...

Структура Шаблон How-to
28 травня
Кращі прийоми заклику до дії в email-повідомленнях (з прикладами)

Головна мета будь-якої маркетингової кампанії – переконати клієнтів купувати саме ваш продукт. Іншими словами – примусити людей робити те, що потрібно вам. Досягти своєї мети ви можете за допомогою слів заклику до дії в розсилці. Не має значення, наскільки красивим є ваше емейл-повідомлення, але якщо воно не спонукає до дії, то шанси, що покупці перейдуть за посиланням на ваш сайт, дуже малі. Тож, чи варто обговорювати необхідність й актуальність імейл-кампаній з закликом до дії? Звісно ж, що ні! Адже, у разі, якщо ви...

Дизайн Маркетинг How-to
Будьте завжди в курсі останніх новин у сфері email маркетингу