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

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

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

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

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

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

<a href="tel:1-562-867-5309">1-562-867-5309</a>

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

<a href="tel:1-562-867-5309">Click to Call!</a>

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

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

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

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

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

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

a {
  color: orange;
  text-decoration: none;
}

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

a[href^="tel:"] {
  color: orange;
  text-decoration: none;
}

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

a[href^="tel:"]:before {
  content: "\260e";
  margin-right: 0.5em;
}

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

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

Callto: то же самое, что tel:, но используется для звонка через Skype.

auto-detected: Множество браузеров автоматически распознают телефонные номера в HTML разметке и создают ссылки – не нужно вносить изменения в разметку. В iOS полностью поддерживается автоматическое распознавание, хотя в Chrome для Android этого нет.

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

Fax: «Назад в будущее» с факсом. Не совсем надежен.

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

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

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

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

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

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

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

<a href="tel:+01-562-867-5309">1-562-867-5309</a>

SEO

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

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <h1 itemprop="name">Beach Bunny Swimwear</h1>
  Phone: 
    <span itemprop="telephone">
      <a href="tel:+18506484200">
         850-648-4200
      </a>
    </span>
</div>

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

<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>

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

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

<meta name="format-detection" content="telephone=no">

Автор: Geoff Graham

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree