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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

SEO

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

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

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

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

Автор: Geoff Graham

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree