WebDesignMagazine.ru – Журнал о веб-дизайне

Позвони мне, позвони!

0

Многие современные мобильные устройства достаточно хорошо распознают номера телефона в HTML коде, делая его интерактивным, чтобы вы смогли напрямую позвонить по этому номеру – но это не всегда срабатывает!
Демо:

Что произойдет, если мобильный браузер или устройство не признает номер телефона, и не сделает звонок при клике на него? Возможно, номер был указан в неправильном формате или номер не распознается данной платформой, но в любом случае  – это Упущенная возможность. TEL: протокол позволит вам это исправить!

Сделайте номер телефона интерактивным

Это очень просто: поместите ваш номер телефона в якорь(тэг), но вместо HTTP-протокола * (или то, что вы обычно используете в якоре) используйте tel протокол. Таким образом, даже если вы использовали неузнаваемый шаблон, устройство всё равно будет знать, что ему надо делать:

Заказ на дом, звоните по телефону:

Теперь Айфоны, Андроиды и другие мобильные девайсы будут с легкостью распознавать номер и при нажатии на ссылку – предложат набрать этот номер. Но необходимо помнить следующие вещи:

  • Нужно помнить, что для поддержки международных номеров нужно добавлять международный код(префикс), таким образом люди смогут позвонить из любой точки планеты.
  • Если кликнуть по телефонной “ссылке” в браузере на настольном компьютере, то это приведет к вызову приложения, ассоциированного с телефоном – Google Voice или Microsoft Communicator, например.
  • Можно указать номер факса, используя fax: протокол
  • Есть воможность дозвона с паузой, к примеру при наборе экстеншена

Служба Поддержки:

 Skype

На данный момент скайп использует протокол callto, а не tel. Вообще-то можно это просто проигнорировать и использовать протокол tel везде, но если вы хотите точно укзать в коде, чтобы использовался скайп с браузера настольного компьютера и стандартное приложение из мобильного девайса, то в этом случае нам поможет PHP и скрипт определения мобильной платформы – Mobile Detect:

Позвонить на номер

Немного мобильного SEO

Чтобы поисковики еще лучше понимали и индексировали ваш номер телефона, можно добавить немного microdata.

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

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

Этот маленький значок “^” означает то, что он ищет любые элементы, чьи href атрибуты начинаются со строки tel: . Также мы разместили здесь маленький Unicode телефон иконку  \ 260E; , так что нам даже не нужно использовать WebFont значки или дополнительные картинки.

Поделиться: