Ультимативний гайд про кнопки в HTML-листах (частина 1)

Кнопка в HTML-листі — один зі стовпів успішного email-маркетингу. Для мене це короткий шлях на сторінку сайту, елемент, що спонукає зробити покупку або прочитати статтю в блозі. Однак що більше листів отримують одержувачі, то вибагливішими вони стають. Чи є з цього вихід? Так! 

Одна лише адаптивність може збільшити клікабельність на 15%. Доступність, психологія кольору і вибір тексту додатково збільшують шанси.

Тож який рецепт кнопок у листах має підкорити людей? І як їх розробити без знань кодингу?  

Разом ми відповімо на ці запитання, порівняємо, які емоції та дії викликають різні кнопки, і дізнаємося, як створювати кнопки для HTML-листів за допомогою Stripo. Почнімо!

Знайомство з кнопками HTML-листів

Перш ніж ви навчитеся створювати кнопки для листів, я пропоную ознайомитися з цими елементами і розібратися в їх типах.

Що таке кнопка в HTML-листі?

HTML-кнопка — це клікабельний елемент листа, стилізований за допомогою каскадних таблиць стилів (CSS). На відміну від текстових елементів, кнопки добре видно, тому їх неможливо пропустити.

Кнопки в листі бувають різних форм і слугують для різних цілей. Саме тоді й виникає необхідність у диференціації:

1. Заклик до дії, або кнопка CTA: ця кнопка спонукає одержувачів до дії: здійснення покупки, отримання знижки, перегляду статті або бронювання зустрічі — звідси і назва кнопки.
   
   

   
   (Джерело: лист від ConnectTeam)

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

   
   (Джерело: лист від Travel Awaits)

3. Універсальна кнопка: дизайн цієї кнопки забезпечує коректне відображення у всіх поштових клієнтах. Уся справа в її конструкції: її створюють за допомогою HTML-коду і вбудованого CSS. Навіть за вимкнених зображень у листі ці кнопки залишаються незмінними. Існує кілька підтипів універсальних кнопок, з якими можна працювати: 
   • кнопки з підкладкою: ця кнопка в листі виконана на основі HTML-таблиці та стилізована за допомогою CSS, щоб додати більше простору навколо тексту;
   • кнопки VML: VML означає векторну мову розмітки. Ця технологія використовується, зокрема, під час створення універсальних кнопок для Microsoft Outlook;
   • кнопки з межами: замість підкладки в таблиці кнопок ви оформляєте їх за допомогою товстих меж, щоб надати потрібну форму.
     
     

     
     (Джерело: лист від Ryanair)

4. Кнопка з картинкою: для створення кнопок із картинок необхідні файли зображень (JPG, PNG, JPEG), що зображують кнопку. Можна поекспериментувати зі стилем або шрифтами, але цей варіант не зовсім практичний. Листи, побудовані виключно на зображеннях, можуть завантажуватися повільно. Крім того, у разі вимкнення зображень кнопка зникає і лист відображається некоректно:
   
   

   
   (Джерело: лист від Reserved)

   Тепер давайте подивимося на той самий лист з увімкненими картинками і кнопками у вигляді зображень:
   
   

   
   (Джерело: лист від Reserved)

5. Кнопка соцмережі: цей тип кнопок у листах посилається на профілі соціальних мереж і найчастіше використовується в хедері або футері. Кнопки мають менший розмір і зображують платформу соціальної мережі.
   
   

   
   (Джерело: лист від Brevo)

Розуміння типів і переваг кнопок — ключ до поліпшення email-кампаній. Тепер давайте обговоримо їхній реальний ефект.

Чому кнопки в HTML-листах важливі?

В email-маркетингу немає нічого дріб'язкового. Кнопки HTML-листа можуть здатися тривіальними, але вони впливають на залученість і створюють позитивний користувацький досвід. Яким чином?

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

Крім зовнішнього вигляду, HTML-кнопки полегшують навігацію листами і часто розділяють довгий текст. Приклад буде більш наочним!

Ви помітили, що на скриншоті нижче фраза «Explore Adventure Fix GO» використана двічі? Правильно! Перший раз вона була згадана в тексті, а другий — у тексті кнопки.

(Джерело: лист від Adventure Fix)

Спочатку я помітила її лише на кнопці, і тільки уважно прочитавши текст, зрозуміла, що вона повторюється! Ось наскільки ефективні та помітні кнопки.

Повідомлення на кнопці ніколи не привертає увагу, тому правильно створені кнопки в листах — це не просто елемент, а інструмент. Пропоную перейти до дизайну і подивитися, що робить кнопки чудовими!

Дизайн кнопок для HTML-листів 

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

Кнопки листів, не адаптовані під скринрідери або людей з обмеженими можливостями, випадають з контексту і губляться. Саме тому доступність — наступна тема, яку ми розглянемо!

Доступність

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

Згідно з Web Content Accessibility Guidelines, є кілька моментів, які слід враховувати під час створення контенту для листів:

1. Асистивні технології повинні вміти визначати призначення кнопки за одним лише текстом.
2. Якщо HTML-кнопка анімована, вона не може блимати понад 3 рази на секунду.
3. Кнопка листа і колір її тексту мають мінімальний коефіцієнт контрастності 4,5:1.
4. Мінімальний розмір усієї кнопки — 24 на 24 CSS-пікселі. 
5. Елементи макета разом із кнопками мають повністю працювати з клавіатури.

Чудова новина: якщо ви створюєте свої шаблони листів у Stripo, то все, включно з кнопками листів, буде доступно. Якщо ви використовуєте інші інструменти або працюєте з HTML-редактором, не забувайте про ці моменти, оскільки ми переходимо до порад щодо дизайну!

Вибір кольору

Почну з психології кольору. Чи знаєте ви, що червоний в якості фонового кольору вважається дуже ефективним? Він асоціюється з владою, тому кнопка листа внизу одразу ж спонукала мене клікнути. Коефіцієнт контрастності 5,63 також робить її візуально доступною та помітною.

(Джерело: лист від New Balance)

Однак якщо New Balance вигідно вибрати такий колір фону, то медичним компаніям краще його уникати. Червоний колір може викликати тривогу, тож краще взяти зелений і синій, що символізують спокій і стабільність. 

Наступний приклад кольору, який ми розглянемо, — жовтий, що часто асоціюється зі щастям. З точки зору контрастності він має коефіцієнт 6,51, що відповідає вимогам і привертає увагу. Не дивно, що авіакомпанія вибрала такий колір фону для кнопки! 

(Джерело: лист від Ryanair)

Текст кнопки 

Тепер, коли ми обговорили кольори, пропоную перейти до тексту кнопки. Привернути увагу читача замало. Кнопка листа має слугувати мотиватором і спонукати до дії. 

Перша кнопка, яку ми дослідимо, точна і компактна. Вона виділяє бажану дію — зробити покупку просто зараз. Розмір шрифту — 14 px, сімейство шрифтів — Verdana, шрифт sans-serif. При коефіцієнті контрастності 18,42 текст більш ніж читабельний і комфортний.

(Джерело: лист від Zappos)

Текст наступної кнопки не так спонукає до дії, як інтригує. Оскільки це кнопка у вигляді картинки, HTML-код не містить подробиць про розмір шрифту або його сімейство. Коефіцієнт контрастності становить 20,12, але різниця в стилях очевидна: курсив — для загадковості, а великі літери — для інтенсивності.

(Джерело: лист від Reserved)

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

Тепер, чи будуть мої кнопки листів відповідати рекомендаціям для мобільних пристроїв? Подивимося!

Оптимізація для мобільних пристроїв

Кнопка листа має працювати на мобільних пристроях. Якщо ви все ще сумніваєтеся, то цифри можуть бути переконливими!

Не оптимізувати елементи верстки — це втратити потенційних клієнтів. Особисто я роблю кілька кліків на кнопки листа — якщо вони не працюють, отже, вони для цього не призначені. Звичайно, з вашими листами такого бути не повинно. 

Ось основні моменти на роздуми:

• площина дотику: керівництво з юзабіліті Google рекомендує мінімальну площу торкання 48x48 dp. Переконайтеся, що по кнопках листів легко тапати;
• розташування кнопок у листах: уникайте насичення кількома кнопками заклику до дії, оскільки це ускладнює торкання потрібної з них;

(Джерело: лист від The North Face)

• операційні системи: ОС можуть по-різному обробляти одні й ті самі елементи, створені за допомогою HTML-коду. Пристрої Android та iOS можуть по-різному відображати кнопки листів. Рекомендую тестувати елементи, щоб уникнути цього.

З огляду на всі ключові моменти адаптивності, саме час створити кнопку в листі та перейти до практики!

Створення кнопок HTML-листів у Stripo

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

Саме тоді конструктор шаблонів Stripo може допомогти вам! Ось як можна створити кнопку:

1. Відкрийте редактор у своєму акаунті.
2. Перетягніть блок кнопки листа в площину шаблону:
   
   
3. Кнопку додано!

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

1. Вкладка налаштувань: тут можна редагувати текст кнопки, додавати посилання, вирівнювання, змінювати відступи, регулювати висоту і вставляти іконки.
   
   


2. Вкладка стилів: на вкладці можна вибрати колір фону блоку, колір кнопки, сімейство шрифтів, розмір шрифту і заокруглення.
   
   

Щоб кнопки листів були оптимізовані для мобільних пристроїв, використовуйте перемикач у правому верхньому куті. Після перемикання можна приховати елементи на телефонах, щоб звільнити місце, якщо лист виявиться перевантаженим.

Кнопка, створена в Stripo, вже доступна і семантично коректна, тож ви можете дати волю фантазії! 

Якщо ви хочете зекономити ще більше часу, у нашої команди є бібліотека шаблонів, якими можна користуватися. Усі шаблони листів можна редагувати, тому ви можете налаштувати їх під свої потреби.

На завершення

Незважаючи на свій розмір, кнопки листів є важливою частиною верстки. Якщо зробити кнопки доступними, контрастними та оптимізованими для різних поштових клієнтів і мобільних пристроїв, це поліпшить email-кампанії та підвищить конверсію. 

І з цим допоможе впоратися Stripo! Поки ви зосередитеся на дизайні та візуальному оформленні, ми займемося кодом.

У другій частині цього гайду ми дізнаємося, як створювати кнопки листів за допомогою HTML-редактора та коду. Залишайтеся з нами, щоб знайти ще більше порад та експертних трюків Stripo!