Від автора: в інтернеті є така річ, як телефонні посилання. Вони схожі на звичайні посилання, при натисканні на які відкриваються веб-сторінки, однак по кліку на телефонну посилання відбувається набір на пристрої, з якого можна здійснювати телефонні дзвінки. Дуже довго вони крутилися навколо нас, але досі я гублюся при їх вигляді. Приміром, багато пристрою автоматично розпізнають номери і роблять з них посилання. Проте так відбувається не завжди.
Частка трафіку на мобільних пристроях досить висока, так і додатків, здатних здійснювати телефонні дзвінки, на настільних комп’ютерах достатньо, тому нам варто трохи краще познайомитися з тим, що таке телефонні посилання.
Використання за замовчуванням
На сайті CSS-Tricks з 2011 року існує телефонна посилання:
1-562-867-5309
Текстова посилання також працює:
Click to Call!
tel: — не стільки функція, як протокол, майже так само як http: і mailto: протоколи для посилання . У специфікації з цього приводу нічого не сказано, хоча підтримує HTML5 обробники користувальницьких протоколів, що і дозволяє їх використовувати.
Вам, можливо, цікаво, чому tel: вважається значенням за замовчуванням, коли про нього в специфікації нічого не сказано. Даний стандарт був запропонований ще в далекому 2000 році, а пізніше він був прийнятий iOS, що де-факто забезпечило йому життєздатність 2007. Існують і інші телефонні протоколи (про них ми поговоримо пізніше), однак, враховуючи відносну популярність tel: зараз ми зосередимося саме на ньому.
Підтримка в браузерах
Ми знаємо, що tel: є обробником протоколу телефонних посилань без документації; а де немає документації, там є відмінності в поведінці в браузерах. Це не означає, що тег просто не буде розпізнаватися браузерами, вони можуть приймати різні рішення при натисканні на таке посилання. Наприклад, браузер може припустити, що потрібно запустити інший додаток і откроект віконце з вибором програми. Або ж посилання може просто не працювати.
Стилізація телефонних посилань
До телефонних посиланнями стилі додаються точно так само, як і до будь-яким іншим посиланням. А насправді ж стилі успадковуються від звичайних посилань:
a {
color: orange;
text-decoration: none;
}
Скажімо, ми хочемо стилізувати тільки телефонні посилання. Це можна зробити з допомогою псевдоселектора, який шукає текст «tel:» в URL:
a[href^=”tel:”] {
color: orange;
text-decoration: none;
}
На сайті Tuts+ є непоганий трюк з використанням псевдокласу ::before, який додає unicode символ телефону зліва від номера:
a[href^=”tel:”]:before {
content: “\260e”;
margin-right: 0.5 em;
}
Інші телефонні посилання
Вірите чи ні, але tel: не єдиний спосіб запустити телефонний дзвінок за допомогою посилання. Ми можемо користуватися й іншими користувацькими обробниками телефонних протоколів.
Callto: те ж саме, що tel:, але використовується для дзвінка через Skype.
auto-detected: Безліч браузерів автоматично розпізнають телефонні номери в розмітці HTML і створюють посилання – не потрібно вносити зміни до розмітку. У iOS повністю підтримується автоматичне розпізнавання, хоча в Chrome для Android цього немає.
Sms: Пропустіть виклик і перейдіть зразу до надсилання повідомлення. Підтримка даного протоколу набагато менше, ніж у tel:, навіть на мобільних пристроях.
Fax: «Назад у майбутнє» з факсом. Не зовсім надійний.
Кращі практики
Забавно говорити про кращих практиках, коли про предмет розмови нічого не сказано в специфікації. У специфікації дійсно є коротке пояснення ідеї «click to call», але при роботі з телефонними номерами і посиланнями необхідно пам’ятати про декілька речей.
Враховуйте контекст
Телефонна посилання може бути відмінним «закликом до дії», особливо на мобільних пристроях, де мінімізована кількість дій між контентом і здійсненням виклику. Але в той же час на настільних комп’ютерах такі посилання тільки заважають, оскільки ви не зможете зробити дзвінок, якщо у вас не встановлено спеціальний додаток.
Один з виходів це створити спеціальний клас для телефонних посилань і намагатися ховати і показувати їх в залежності від браузера. Тут нам допоможе бібліотека Modernizr і медіа запити, хоча стовідсоткова точність не гарантована.
Використовуйте код країни
Код країни не обов’язковий, але він може бути вкрай корисний для сайтів з міжнародним трафіком. До коду країни можна додати знак +, але він теж не обов’язковий.
1-562-867-5309
SEO
SEO експерти могли би більше сказати по цій темі, ніж я, але у Google є спеціальний структурований формат даних для місцевого бізнесу, використовуючи який можна зробити посилання більш впізнаваними для пошукових роботів, що в свою чергу змінить форматування цих посилань на сторінках пошукової видачі і зробить їх більш функціональними. Dudley Storey зробив відмінний огляд з цим прикладом:
Beach Bunny Swimwear
Phone:
850-648-4200
З іншого боку можна додати rel=»nofollow», щоб посилання не індексувалися пошуковим движком. Так як роботи схильні до індексації всіх посилань, навіть тих, які нікуди не ведуть, це буде дуже корисна опція.
1-562-867-5309
Як вимкнути виявлення номери у iOS
Якщо ви хочете додати телефонні посилання в розмітку, ви, можливо, захочете знати, як відключити автовизначення телефонних номерів в iOS, щоб ця функція не переписувала стилі. Для відключення цієї функції, додайте код нижче в тег head: