Як зверстати кнопку в листі

Кнопка в листі — один із важливих елементів email-розсилки, який прикрашає лист і допомагає зробити його більш ефективним. Без заклику до дії вже важко уявити проморозсилки і транзакційні листи — вони просто необхідні, щоб захопити увагу клієнтів і спонукати їх купити/прочитати/перейти на сайт тощо.

Для продвинутих користувачів, напевно, простіше зверстати кнопку з нуля, аніж брати вже готову й морочитися з її змінюванням. Ми розглянули популярні практики, за допомогою яких можна зробити кнопку СТА в різні способи.

Короткий зміст статті про те, як зверстати кнопку:

• Кнопки у вигляді картинок

• Campaign Monitor

• MailChimp

• eSputnik

1. Кнопки у вигляді картинок

Якщо ви не бажаєте морочити голову з версткою або дизайн вашого листа потребує унікальних кнопок зі спецефектами, як от: тіні, підсвітка, анімація, градієнти або нестандартні шрифти, — ви завжди зможете використати кнопку, намальовану в графічному редакторі. Така кнопка виглядатиме  стовідсотково однаково всюди, але існує ймовірність, що деякі поштові клієнти її одразу не завантажать. Той самий Outlook за замовчуванням блокує завантаження картинок.

Не забувайте використовувати ALT-текст для кнопок-картинок. Дублюйте в ньому назву вашої кнопки, а також застосовуйте стилі для оформлення ALT-тексту.

2. Campaign Monitor

Компанія розробила інструмент для створення кнопок на основі VML. Мова VML використовується для коректного відображення кнопки в MS Outlook.

Можна легко створити таку кнопку за посиланням buttons.cm, вам треба буде тільки вказати вихідні параметри, і код для використання згенерується автоматично.

Залежно від редактора, у якому ви плануєте додати кнопку, її, можливо, доведеться трохи допрацьовувати.

Приклад коду для тестування:

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://company.com" style="height:35px;v-text-anchor:middle;width:120px;" arcsize="12%" stroke="f" fillcolor="#28b422">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="http://company.com"
style="background-color:#28b422;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:35px;text-align:center;text-decoration:none;width:120px;-webkit-text-size-adjust:none;">Купити</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>

Відверто кажучи, виходить забагато коду. В Outlook така кнопка має привабливий вигляд, але вона не є універсальною через її фіксовані розміри. Таким чином,  цю кнопку треба постійно генерувати наново, змінюючи розміри залежно від довжини назви.

3. MailChimp

Компанія пропонує використовувати кнопки на основі таблиці. Зразок кнопки ви можете знайти на сторінці Buttons.

Також компанія рекомендує використовувати адаптивні кнопки, у такому випадку ширина заклику до дії залежатиме від обсягу тексту всередині клітинки таблиці.

Приклад коду для тестування:

<table border="0" cellpadding="0" cellspacing="0" style="background-color:#28b422; border-radius:4px;">
  <tr>
    <td align="center" valign="middle" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:30px;">
      <a href="http://company.com" target="_blank" style="color:#FFFFFF; text-decoration:none;">Read More Stories On Our Blog</a>
    </td>
  </tr>
</table>

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

4. eSputnik

Ми верстаємо наші кнопки, використовуючи як основний елемент посилання, обгорнуте в елемент span для створення навколо кнопки ефектів межі або тіні

Ми не встановлюємо фіксованих розмірів для кнопок, тому розміри наших кнопок збільшуються відповідно до збільшення розмірів шрифту тексту та його довжини.

«Об’єм» кнопки, інакше кажучи, відступи навколо тексту, задається у вигляді товщини границь посилання. Цей прийом дозволяє кнопці лишитися об'ємною в Outlook і не перетворитися на посилання з кольоровим фоном. Однак Outlook не підтримує css-властивість border-radius (та ін.), тому закруглена кнопка в Outlook матиме гострі кути.

Ось такий вигляд мають CSS-класи зі стилями наших кнопок. Ви можете експериментувати з цими стилями, щоб досягти бажаного результату.

А це HTML-верстка самої кнопки:

Приклад коду для тестування:

<td align="center" class="esd-block-button es-p10" style="" bgcolor="transparent">
<span class="es-button-border" style="border-width: 4px; background: rgb(40, 180, 34);">
<a href="http://company.com" class="es-button" target="_blank"
style="background: rgb(40, 180, 34); border-color: rgb(40, 180, 34);">ПОКУПКИ ONLINE</a> </span> </td>

При створенні листа ви вибираєте блок кнопки й додаєте її до листа. Крім того, у нашій системі є готові набори кнопок, які можна додавати легким рухом руки.

Перед вами відкриються всі налаштування кнопки, які можна задати кількома кліками навіть без знань верстки. У тому числі адаптивність кнопки та розміщення в листі.

Створення кнопки, як і всього листа, не потребуватиме забагато часу. У редакторі ви зможете задати налаштування кнопки:

• відступи,

• обведення,

• вирівнювання,

• адресу посилання,

• розміщення в листі,

• адаптивність,

• кольорову гаму.

От і все! Залишиться тільки доповнити вашу кнопку привабливим закликом до дії.

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

До нових зустрічей!:)

P.S .: Налаштуйте додатковий канал комунікації для розсилок — Viber — кнопки тут робити так само легко.)