Структура Шаблон How-to
~ 9 хв читати
19581 перегляди
оцінити
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!

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

← Попередні статті Наступні статті →
24 жовтня · 15 хв читати
Ліпші шрифти для емейлів: Поради використання

Однією з найяскравіших проблем в процесі створення електронного листа є вибір шрифту. Розмір, колір, форма, відстань … Чи має значення? Так, це так, але найголовніше – вибрати той, який легко читати, всі інші функції шрифту незначні. Дивіться наше коротке відео про шрифти, їх різновиди, як застосувати декоративні шрифти у редакторі Stripo. Та головне – як підібрати “той самий” шрифт для ваших шаблонів емейл-повідомлень: При виборі шрифту для вашого листа є два варіанти. Перший варіант – вибір веб-безпечного шрифту, який є стандартним...

Дизайн Шаблон
04 жовтня · 16 хв читати
Розмір емейл шаблону: Висота і Ширина елеметів листа

Це самий об’ємний пост, який ми коли-небудь публікували, тому що не достатньо лише двох речень або навіть двох абзаців, щоб пролити світло на всю тему. Стандартний розмір шаблону електронного листа для ширини становить 600 пікселів для настільних комп’ютерів, а також 320 пікселів для вертикального і 480 пікселів для горизонтального перегляду на мобільних пристроях. Висота не обмежена і залежить від довжини вмісту. Це все! Кілька років тому ширина 600 пікселів була обов’язковим стандартом і не мала альтернатив. На даний момент 600 пікселів –...

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