Як створити підпис листа з клікабельними посиланнями (покроковий гайд)

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

Додавання клікабельного посилання в підпис листа здається простим завданням, доки не виникають проблеми. Посилання може виглядати клікабельним, але при цьому нікуди не вести. Іконка соцмережі може втратити гіперпосилання після вставки підпису в поштовик. Багато підписів виявляються неробочими через те, що посилання додані неправильно, зникають після пересилання чи їх погано видно в темному режимі.

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

Ключові висновки 

1. Ви можете зробити клікабельним практично будь-який елемент у своєму підписі: сайт, email-адресу, номер телефону, додаток, зображення чи банер, карту, календар або сторінку бронювання.
2. Клікабельні посилання у підписі листа можна додавати кількома способами: безпосередньо в поштовику, за допомогою HTML-коду, в підписі у вигляді зображення або за допомогою генератора підписів.
3. Посилання у підписі листа можуть не працювати з різних причин. До найпоширеніших належать обмеження розміру підпису в Gmail, відсутність URL-протоколів, використання сервісів скорочення URL-адрес, а також проблеми, характерні для окремих поштовиків.
4. UTM-параметри дають змогу відстежувати ефективність посилань та вимірювати трафік, що генерується підписом листа.
5. Переконайтеся, що всі посилання працюють, і завжди перевіряйте їх у світлому й темному режимах.

Що таке клікабельний підпис листа?

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

(Джерело: шаблон Stripo)

У цій статті ми в деталях розповідаємо, як створити підпис листа в Stripo.

Чому клікабельні посилання такі важливі

У підписі листа вже вказано всі необхідні дані: ім’я, посада та контакти. То чи справді потрібно додавати клікабельні посилання? Відповідь — так. Завдяки правильним посиланням підпис стає не просто способом надати контактну інформацію.

За допомогою клікабельних посилань у підписі листа можна:

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

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

(Джерело: Exclaimer)

Що можна зробити клікабельним у підписі

Коротка відповідь: практично все. 

До найпоширеніших клікабельних елементів у підписі листа належать:

• посилання на сайт чи портфоліо;
• клікабельні посилання на соцмережі;
• клікабельна email-адреса;
• клікабельний номер телефону;
• посилання на сторінку бронювання чи календар;
• відгуки клієнтів чи рекомендації;
• посилання на застосунок;
• посилання на афіліатну програму;
• клікабельне посилання на спеціальні пропозиції та акції;
• клікабельне зображення чи банер;
• посилання на карту чи адресу офісу;
• посилання на сторінку підписки на розсилку.

(Джерело: Exclaimer)

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

Як додати клікабельні посилання в підпис листа

Раніше ми вже розповідали про те, як створити підпис листа в різних поштовиках. У цьому розділі йтиметься про додавання клікабельних посилань. Зробити це можна кількома способами.

Метод 1: у поштовику (лише текст)

У більшості поштовиків цей процес виглядає приблизно так:

1. Додайте всю необхідну інформацію, зокрема ім'я, посаду, email-адресу, номер телефону, сайт, профілі в соцмережах і CTA на кшталт «Записатися на зустріч».
2. Підкресліть текст, який хочете перетворити на гіперпосилання. Наприклад, виділіть слово «LinkedIn».
3. Клікніть на кнопку «Посилання» чи іконку ланцюжка на панелі інструментів.
4. У полі «Введіть або вставте посилання» вставте URL-адресу.
5. Після додавання посилання при наведенні курсора на слово «LinkedIn» відображатиметься URL-адреса сайту. За замовчуванням текст також буде підкреслений і пофарбований у синій колір.
6. Якщо хочете зробити посилання більш помітним, можете застосувати жирний шрифт чи змінити його колір.

Метод 2: зверстаний HTML-підпис 

Другий варіант — створити підпис листа у форматі HTML і додати посилання напряму в код. У цій статті ми розповідаємо, як крок за кроком створити HTML-підпис листа.

Далі в цьому гайді також наведено приклади HTML-коду, які можна використовувати як відправну точку для створення власного підпису листа.

Метод 3: графічний підпис

Ще один варіант — створити власний підпис у вигляді зображення за допомогою програми для графічного дизайну, наприклад Canva, Figma чи Photoshop. Готовий дизайн зазвичай експортується у форматі PNG, а потім додається в поштовик.

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

Спосіб 4: у конструкторі підписів листів (Stripo)

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

Цей інструмент доступний окремо від email-платформи Stripo, і кожен охочий може скористатися ним безплатно. Створений підпис можна додати в будь-який поштовик. 

Генератор містить готові шаблони, тому потрібно просто замінити зразок контенту власною інформацією.

Також можна скористатися шаблонами підписів листів, доступними в редакторі Stripo. Використовуйте їх як джерело натхнення або модифікуйте для створення потрібного підпису. 

Типи посилань у HTML: референс (з кодом)

Нижче наведено кілька прикладів HTML-коду, які демонструють, як слід оформлювати різні типи клікабельних посилань.

• Посилання на сайт

<a href="https://dr-gill.com" target="_blank">Visit our website</a>

Переконайтеся, що URL-адреса починається з https://. Інакше поштовик може сприйняти адресу як відносний шлях, внаслідок чого посилання перестане працювати.

• Посилання на email-адресу

<a href="mailto:m.gill@example.com">m.gill@example.com</a>

• Посилання на номер телефону

<a href="tel:+48756461001">+48 75 64 61 001</a>

• Посилання у вигляді зображення чи іконки соцмережі

<a href="https://linkedin.com/in/you" target="_blank"><img src="..." alt="LinkedIn" width="24" height="24" style="border:0"></a>

Варто взяти до уваги кілька моментів:

• атрибут src повинен містити повну URL-адресу зображення, розміщеного на вашому домені;
• завжди вказуйте атрибут alt. Це підвищує доступність і слугує фолбеком на випадок блокування зображень поштовиком;
• або у випадку іконок із гіперпосиланнями атрибут alt зображення виконує дві функції. Коли зображення входить до складу гіперпосилання без видимого тексту, атрибут alt стає доступною назвою цього гіперпосилання. Без нього скринрідер може озвучити лише назву файлу чи сказати «посилання», внаслідок чого користувачі не отримають жодної інформації про те, куди веде це посилання;
• використовуйте параметр border:0, щоб уникнути появи блакитних рамок навколо зображень із посиланнями у старих версіях Outlook;
• вкажіть width та height як атрибути HTML, а не покладайтеся виключно на CSS.

• Підкреслене посилання для темного режиму

<a href="https://example.com" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;"> Visit our website 
</a> 
 

Не слід покладатися на колір як на єдину ознаку того, що текст є клікабельним. У темному режимі поштовики часто інвертують кольори, через що посилання можуть зливатися з навколишнім текстом. Такі властивості, як text-decoration: underline та font-weight: bold, не залежать від кольору, тому залишаються видимими навіть після інверсії кольорів.

• Посилання на сторінку бронювання чи CTA-кнопку

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td align="center" bgcolor="#2B5CE6" style="border-radius:4px; mso-padding-alt:12px 24px;">
     <a href="https://calendly.com/yourname/30min"
 style="display:inline-block; padding:12px 24px; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold; color:#ffffff; text-decoration:none; border-radius:4px;">
       Book a 30-min call
     </a>
   </td>
 </tr>
</table>

Кнопка у підписі листа — це компромісне рішення, тому її краще використовувати лише в тому випадку, якщо CTA є основним елементом підпису.

Простіша альтернатива — текстове посилання зі зрозумілим анкором:

<a href="https://calendly.com/yourname/30min"
  style="font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold; color:#2B5CE6; text-decoration:underline;">
 Book a 30-min call →
</a>

Досі ми розглядали окремі складові HTML-підпису в листі. Повний підпис об’єднує всі ці елементи в єдину розмітку.

Як приклад візьмемо такий підпис листа: 

Майк Гілл

General Practitioner

Сайт: dr-gill.com

Телефон: +48 75 64 61 001

Email: m.gill@example.com

Facebook 

LinkedIn

Призначити зустріч

Нижче наведено повний HTML-код для цього підпису.

<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,Helvetica,sans-serif; font-size:14px; line-height:20px; color:#333333;">
 <tr>
   <td style="padding-bottom:8px;">
 <span style="font-size:16px; font-weight:bold; color:#1a1a1a;">Mike Gill</span><br>
     <span style="font-size:14px; color:#555555;">General Practitioner</span>
   </td>
 </tr>
 <tr>
   <td style="padding-bottom:2px;">
   Website:
 <a href="https://dr-gill.com" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;">dr-gill.com</a>
   </td>
 </tr> 
 <tr>
   <td style="padding-bottom:2px;">
     Phone:
     <a href="tel:+48756461001" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;">+48 75 64 61 001</a>
   </td>
 </tr>
 <tr>
   <td style="padding-bottom:12px;">
     Email:
     <a href="mailto:m.gill@example.com" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;">m.gill@example.com</a>
   </td>
 </tr>
 <tr>
   <td style="padding-bottom:12px;">
     <a href="https://facebook.com/drmikegill" style="text-decoration:none;">
       <img src="https://yourdomain.com/icons/facebook.png" alt="Facebook" width="24" height="24" style="border:0; display:inline-block; vertical-align:middle;">
     </a>
     &nbsp;
     <a href="https://linkedin.com/in/drmikegill" style="text-decoration:none;">
       <img src="https://yourdomain.com/icons/linkedin.png" alt="LinkedIn" width="24" height="24" style="border:0; display:inline-block; vertical-align:middle;">
     </a>
   </td>
 </tr>
 <tr>
   <td>
     <table role="presentation" cellpadding="0" cellspacing="0" border="0">
       <tr>
         <td align="center" bgcolor="#1F4BC4" style="border-radius:4px; mso-padding-alt:12px 24px;">
           <a href="https://dr-gill.com/book?utm_source=email-signature&utm_medium=signature&utm_campaign=appointments"
              style="display:inline-block; padding:12px 24px; font-size:14px; font-weight:bold; color:#ffffff; text-decoration:none; border-radius:4px;">
             Book an appointment
           </a>
         </td>
       </tr>
     </table>
   </td>
 </tr>
</table>

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

Як зробити посилання справді клікабельними

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

Увімкніть підкреслення посилань у Stripo

Найпростіший спосіб зробити посилання більш помітними — увімкнути в Stripo параметр «Підкреслення посилань». Цей перемикач дозволяє одним кліком увімкнути чи вимкнути підкреслення посилань у всьому шаблоні листа.

Ця функція може виявитися особливо корисною, якщо в brand guidelines зазначено один з варіантів email-дизайну, якого слід дотримуватися: або підкреслити посилання лише кольором, або підкреслити всі текстові гіперпосилання.

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

Інші візуальні орієнтири

Підкреслення — не єдиний спосіб показати, що текст є клікабельним. Ось кілька інших прийомів:

• виділяйте посилання контрастним кольором. Зробіть так, щоб посилання виділялися на фоні навколишнього тексту. Наприклад, якщо в тексті листа використовується темно-синій колір шрифту, можна зробити посилання помаранчевими чи виділити їх іншим контрастним кольором;
• використовуйте жирний чи напівжирний шрифт. Трохи жирніший шрифт допомагає привернути увагу до важливих посилань;
• додайте іконку чи стрілку. Невеликі візуальні елементи підказують одержувачам, що вони можуть клікнути, щоб дізнатися більше чи виконати якусь дію;
• використовуйте кнопку як основну CTA. Кнопки є гарним варіантом для таких дій, як «замовити демо», коли CTA стає основним акцентом підпису;
• додайте впізнавані іконки соцмереж. Більшість одержувачів уже знають, що іконки LinkedIn, Instagram, Facebook та інших соцмереж є клікабельними;
• складіть зрозумілий анкорний текст. Текст посилання, наприклад «запланувати дзвінок», дозволяє одразу зрозуміти, що станеться після кліку.

(Джерело: шаблон Stripo)

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

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

Діагностика: чому посилання у підписі не працюють (і як це виправити)

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

Обмеження щодо розміру підпису

Однією з поширених причин є обмеження на розмір підпису в Gmail. Gmail дозволяє використовувати підписи довжиною приблизно 10000 символів, включно з видимим текстом, а також супутнім HTML-кодом, форматуванням та довгими URL-адресами.

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

(Джерело: Gmail)

Для усунення цієї проблеми спробуйте зробити наступне:

• вставте підпис у вигляді простого тексту;
• видаліть зайве форматування;
• зменшіть розмір зображень;
• якщо це не допоможе, видаліть підпис і створіть його заново в Gmail, щоб видалити всю приховану HTML-розмітку.

В URL відсутній протокол

Ще одна поширена проблема — відсутність протоколу в URL-адресі. Якщо адреса сайту не містить https://, поштовик може не розпізнати її як дійсне посилання. Текст може залишатися блакитним, підкресленим чи навіть клікабельним, але посилання не працюватиме належним чином при кліку.

Для уникнення цієї проблеми під час створення посилань завжди використовуйте повний протокол. URL-адреси сайту мають починатися з https://, посилання на електронну пошту — з mailto:, а номери телефонів — з tel:.

Переслані листи чи реплаї

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

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

Сервіси скорочення URL-адрес

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

Деякі проблеми зі зламаними посиланнями характерні для окремих поштовиків.

Наприклад, Outlook іноді може відображати посилання у вигляді простого тексту. У деяких випадках, коли ви додаєте посилання до зображення, воно з’являється над ним, а не прив’язується до нього.

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

Об'єднання різних частин одного зображення

Цей механізм називається «карта зображення». На сайтах вона створюється за допомогою HTML-елементів <map> та <area>, які визначають області зображення, на які можна клікнути. Кожна така область може вказувати на свою URL-адресу. 

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

Отже, при розміщенні посилань на зображення у підписі листа є два варіанти:

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

   
   (Джерело: Exclaimer)

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

Використання одного зображення в якості підпису листа здебільшого не є оптимальним рішенням. У цій статті ми детальніше розповідаємо про переваги та недоліки підписів у вигляді зображень.

Відстежуйте кліки на посилання в підписах (UTM-параметри)

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

Додавання UTM-параметрів допоможе:

• оцінювати ефективність кампаній, визначаючи джерела трафіку;
• краще розуміти поведінку аудиторії та з’ясовувати, які посилання викликають у неї найбільшу залученість;
• оптимізувати маркетингові зусилля на основі каналів і кампаній, що дають найкращі результати;
• проводити А/Б-тести та порівнювати ефективність різних посилань у підписі.

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

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

Доступність і темний режим

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

Забезпечте доступність посилань

Щоб зробити посилання доступними, дотримуйтесь таких рекомендацій:

• використовуйте реальні посилання. Завжди використовуйте правильний HTML-елемент <a href>, щоб посилання розпізнавалися скринрідерами, системами навігації з клавіатури та іншими асистивними технологіями;
• не орієнтуйтеся лише на колір. Це вимога WCAG 2.2 Success Criterion 1.4.1 (Use of Color). Якщо посилання відрізняється від навколишнього тексту лише кольором, люди з дальтонізмом можуть його не розпізнати. Додайте підкреслення чи жирний шрифт;
• забезпечте достатню контрастність. WCAG 2.2 Success Criterion 1.4.3 (Contrast (Minimum)) вимагає коефіцієнта контрастності не менше 4,5:1 між текстом і фоном. Перевірте посилання у світлому й темному режимах. Посилання, яке добре читається на білому фоні, може не мати достатньої контрастності на темному;
• використовуйте описовий анкорний текст. Згідно з WCAG 2.2 Success Criterion 2.4.4 (Link Purpose), призначення посилання має бути зрозумілим з його тексту. Замість загальних формулювань на кшталт «Клікнути тут» або «Детальніше» використовуйте такі формулювання, як «Призначити зустріч»;
• додайте alt-текст до іконок із посиланнями. Без альтернативного тексту скринрідери не можуть визначити призначення піктограми. Це є обов’язковим відповідно до WCAG 2.2 Success Criterion 1.1.1 (Non-text Content); 
• зробіть клікабельну область достатньо великою. WCAG 2.2 Success Criterion 2.5.8 (Target Size (Minimum)) рекомендує мінімальний розмір іконки 24 × 24 пікселі у CSS. Залишайте достатню відстань між сусідніми іконками для зручності дотику на мобільних пристроях. 

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

Щоб переконатися у відповідності підпису листа вимогам доступності, перед надсиланням запустіть перевірку за допомогою інструменту доступності від Stripo.

Як рендеряться посилання в темному режимі

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

(Джерело: шаблон Stripo)

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

Слідкуйте за узгодженістю підписів усіх членів команди

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

Якщо кожен співробітник створюватиме власний підпис, ймовірність помилок буде високою. У результаті можуть з’явитися різні шрифти та кольори, різні формати телефонних номерів, непрацюючі посилання чи посилання, що неправильно оформлені за допомогою елемента <a href>. 

Для уникнення подібних ситуацій слід використовувати єдиний затверджений HTML-шаблон для підписів. Змінюватися мають лише особисті дані, як-от ім’я співробітника, посада й контактна інформація, а структура та стиль мають залишатися незмінними. 

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

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

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

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

Підпис листа з клікабельними посиланнями — це не просто блок контактної інформації. Ці посилання допомагають одержувачам дізнатися більше про компанію, відвідати сайт, записатися на консультацію чи підписатися на розсилку. Використовуйте ці можливості з максимальною ефективністю, відстежуючи результативність посилань за допомогою UTM-параметрів та регулярно перевіряючи стан підпису. 

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

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

FAQ

1. Як додати гіперпосилання в підпис листа в Outlook?

Для додавання гіперпосилання в Outlook відкрийте вкладку «Insert» і виділіть текст, який хочете перетворити на посилання. Виберіть «Link» і «Insert Hyperlink», а потім вставте URL-адресу у діалогове вікно.

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

2. Що таке клікабельний HTML-підпис у листі?

Це підпис листа з гіперпосиланнями, за якими одержувачі можуть перейти, щоб виконати певну дію. До таких дій можуть належати: відвідування сайту, телефонний дзвінок, підписка на розсилку, бронювання зустрічі, запис на консультацію чи перехід на сторінки в соцмережах. 

3. Як зробити так, щоб номер телефону в підписі листа став клікабельним?

Виберіть номер телефону, натисніть комбінацію клавіш «Ctrl+K» або клікніть на іконку «Link», а потім введіть «tel:», після чого вкажіть номер телефону в міжнародному форматі.

Якщо ви створюєте HTML-код самостійно, він матиме такий вигляд:

<a href="tel:+48756461001">+48 75 64 61 001</a> 

У HTML-коді номер телефону слід вказувати у міжнародному форматі з префіксом «+» та кодом країни. Не використовуйте пробіли, дужки чи дефіси всередині значення атрибута href.

4. Як зробити мою електронну адресу клікабельною у підписі листа?

Найпростіший спосіб — додати email-адресу в редакторі підпису. Виберіть email-адресу, скористайтеся комбінацією клавіш «Ctrl+K» або клікніть на іконку «Link» і введіть у полі URL наступне: 

mailto: та адреса без пробілів.

Якщо ви створюєте свій підпис у форматі HTML, скористайтеся таким кодом:

<a href="mailto:m.gill@example.com">m.gill@example.com</a> 

Не забудьте вказати префікс mailto:. Без нього поштовик не розпізнає адресу як посилання на електронну пошту, і при кліку на неї не відкриється новий лист. 

5. Чому посилання в моєму підписі листа є неклікабельними?

Існує кілька поширених причин, через які посилання у підписі листа можуть не працювати: 

• в URL-адресі відсутній правильний протокол. Кожне посилання має починатися з https://, mailto: або tel:. Без відповідного префікса поштовик може не розпізнати його як дійсне посилання;
• це не є дійсним гіперпосиланням. Текст може відображатися блакитним кольором і з підкресленням, але якщо він не міститься в тегу <a href>, то це лише стиль, що надає йому вигляд посилання, і на нього не можна буде клікнути;
• ваш підпис — це одне зображення. Підпис у вигляді зображення може містити лише одне клікабельне посилання. Будь-які інші контактні дані, що відображаються всередині зображення, не можуть бути окремими посиланнями.

6. Чи можна зробити так, щоб різні частини підпису-картинки були клікабельними?

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

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