Сегодняшнее состояние телефонных ссылок

От автора: в интернете есть такая вещь, как телефонные ссылки. Они похожи на обычные ссылки, по клику на которые открываются веб-страницы, однако по клику на телефонную ссылку происходит набор номера на устройстве, с которого можно совершать телефонные звонки. Очень долго они вертелись вокруг нас, но до сих пор я теряюсь при их виде. К примеру, многие устройства автоматически распознают телефонные номера и делают из них ссылки. Однако так происходит не всегда.

Доля трафика на мобильных устройствах довольно высока, да и приложений, способных совершать телефонные звонки, на настольных компьютерах предостаточно, поэтому нам стоит получше познакомиться с тем, что такое телефонные ссылки.

Использование по умолчанию

На сайте CSS-Tricks с 2011 года существует телефонная ссылка:

Текстовая ссылка также работает:

tel: — не столько функция, как протокол, почти так же как http: и mailto: протоколы для ссылки <a>. В спецификации по этому поводу ничего не говорится, хотя HTML5 поддерживает обработчики пользовательских протоколов, что и позволяет их использовать.

Вам, возможно, интересно, почему tel: считается значением по умолчанию, когда о нем в спецификации ничего не сказано. Данный стандарт был предложен еще в далеком 2000 году, а позже он был принят iOS, что де-факто обеспечило ему жизнеспособность в 2007. Существуют и другие телефонные протоколы (о них мы поговорим позже), однако, учитывая относительную известность tel:, сейчас мы сосредоточимся именно на нем.

Поддержка в браузерах

Мы знаем, что tel: является обработчиком протокола телефонных ссылок без документации; а где нет документации, там есть различия в поведении в браузерах. Это не означает, что тег <a> просто не будет распознаваться браузерами, они могут принимать различные решения при клике на такую ссылку. К примеру, браузер может предположить, что требуется запустить другое приложение и откроект окошко с выбором приложения. Или же ссылка может просто не работать.

Стилизация телефонных ссылок

К телефонным ссылкам стили добавляются точно так же, как и к другим любым ссылкам. А на деле же, стили наследуются от обычных ссылок:

Скажем, мы хотим стилизовать только телефонные ссылки. Это можно сделать с помощью псевдоселектора, который ищет текст «tel:» в URL:

На сайте Tuts+ есть неплохой трюк с использованием псевдокласса ::before, который добавляет юникод символ телефона слева от номера:

Другие телефонные ссылки

Верите или нет, но tel: не единственный способ запустить телефонный звонок с помощью ссылки. Мы можем пользоваться и другими пользовательскими обработчиками телефонных протоколов.

Лучшие практики

Забавно говорить о лучших практиках, когда о предмете разговора ничего не сказано в спецификации. В спецификации действительно есть краткое пояснение идеи «click to call», но при работе с телефонными номерами и ссылками необходимо помнить о нескольких вещах.

Учитывайте контекст

Телефонная ссылка может быть отличным «призывом к действию», особенно на мобильных устройствах, где минимизировано количество действий между контентом и совершением вызова. Но в то же время на настольных компьютерах такие ссылки только мешают, т.к. вы не сможете совершить звонок, если у вас не установлено специальное приложение.

Один из выходов это создать специальный класс для телефонных ссылок и пытаться прятать и показывать их в зависимости от браузера. Тут нам поможет библиотека Modernizr и медиа запросы, хотя стопроцентная точность не гарантирована.

Используйте код страны

Код страны не обязателен, но он может быть крайне полезен для сайтов с международным трафиком. К коду страны можно добавить знак +, но он тоже не обязателен.

SEO

SEO эксперты могли бы больше сказать по этой теме, чем я, но у Google есть специальный структурированный формат данных для местного бизнеса, используя который можно сделать ссылки более узнаваемыми для поисковых роботов, что в свою очередь изменит форматирование этих ссылок на страницах поисковой выдачи и сделает их более функциональными. Dudley Storey сделал отличный обзор с этим примером:

С другой стороны можно добавить rel=»nofollow», чтобы ссылки не индексировались поисковым движком. Так как роботы склонны к индексации всех ссылок, даже тех, которые никуда не ведут, это будет очень полезная опция.

Как отключить обнаружение номера в iOS

Если вы хотите добавить телефонные ссылки в разметку, вы, возможно, захотите знать, как отключить автообнаружение телефонных номеров в iOS, чтобы эта функция не переписывала ваши стили. Для отключения данной функции, добавьте код ниже в тег head:

Автор: Geoff Graham

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: