The Current State of Telephone Links

Telephone links are a thing. Like an anchor link you tap to (probably) go to another page, these are links you tap to call a number on a phone-capable device. They’ve been around for quite some time. Yet, they cause me a lot of confusion. For example, many devices will automagically recognize phone numbers and do the linking for us, but not always. There is enough web traffic on mobile devices and plenty of desktops apps that are capable of making calls, that it’s worth knowing more about phone links.

tel: is not so much a feature as it is a protocol, much in the same way that http: and mailto: are protocols for the tag feature. The spec itself has nothing to say about it, though HMTL5 did provide support for custom protocol handlers, which allow such a protocol to be used. You’re probably wondering why tel: can be considered default usage in the absence of an official spec on it. You can credit this to the fact that it was a proposed standard as far back as 2000 and later adopted by iOS, making it the de facto way to go by roughly 2007. There are other phone-based protocols (which we’ll get to later), but we’ll be focusing on tel: given its relative prominence.

We see tel: pop up as a protocol handler for links with no official documentation; and where there is no documentation, we often see differences in browser support and behavior. That’s not to say that browsers fail to recognize the tag itself. Instead, browsers might make different decisions on what to do when that link is clicked. For example, a browser may assume another app needs to open and will trigger a dialog asking which app to use. In other cases, the link might be ignored altogether.

Browser	Does it link?	When clicked it…
Android	Yes	Launches phone app
BlackBerry 9900	Yes	Initiates phone call
Chrome	Yes	Triggers dialog confirming the use of another app
Edge	Yes	Triggers dialog confirming the use of another app
Internet Explorer 11	Yes	Triggers dialog confirming the use of another app
Internet Explorer 11 Mobile	Yes	Initiates phone call
iOS	Yes	Triggers options to call, message, copy or add the number to the Contacts app
Opera (OSX)	Yes	Triggers dialog confirming the use of another app
Opera (Windows)	Yes	Triggers an error dialog that does not recognize the protocol
Safari	Yes	Launches FaceTime

Styling telephone numbers is like any other link. In fact, it will inherit the default styling for anchors:

Let’s say we only styles to apply to telephone links. We can do that with a pseudo selector that searches out the tel: text in a given URL:

Tuts+ has a nice trick using the ::before pseudo selector to add the unicode phone character before the number is displayed:

Alternative Phone-Related Links

• callto: Exactly like tel: but used to initiate calls via the Skype app.
• auto-detected: Many browsers will automatically detect a phone number in the HTML and link it up for you—no need to change the markup. iOS, for example, will totally do this, though it did not seem to be the case for Chrome on Android.
• sms: Skip the call and go straight to text message. This seems to be a lot less supported than tel: is among browsers, including mobile.
• fax: Go back to the future with fax machines. Again, spotty reliability.

It’s kinda funny talking about best practices when it comes to something without specifications. The spec does give a brief opinion on the “click to call” idea, but here are a few things to bear in mind when working with telephone numbers and links.

A telephone link can make for an excellent call-to-action, especially on mobile phones where it reduces the friction between the content and the call. At the same time, telephone links could be considered a hindrance on a desktop experience where a phone call wouldn’t be possible if the device lacks an app that supports it.

One idea would be to create a class specifically for telephone links and attempt to show or hide them based on what we know about the browser. Modernizr and media queries are handy here, though totally imprecise.

A country code is not required but could be a nice touch for sites with international traffic. Country codes can be preceded by a + but that too is not required.

Search Engine Optimization

SEO experts might have more to add on this than I do, but Google offers a structured data format for local businesses and using it will make telephone links more recognizable to crawlers, formatting them on search results pages in a way that makes the number much more actionable. Dudley Storey provides an excellent overview with the following example:

 
Beach Bunny Swimwear
 Phone:  850-648-4200  

On the flip side of wanting search engines to follow phone links, you can add rel=»nofollow» to discourage links from being followed and indexed. This might be a good idea for any link not being designated as a call to action since web crawlers would be inclined to try to follow it to nowhere.

Turning off Number Detection in iOS

If you plan to add phone links to your markup, then you may also want to consider disabling iOS from auto-detecting phone numbers and overriding your styles. Add the following the the document to turn that off:

Источник

Как использовать ссылки mailto: и tel:

Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.

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

mailto:

Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto: , после которого указывается адрес почты. Это самый простой вариант.

Текст письма указывается с помощью параметра body .

За тему письма отвечает параметр subject .

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc .

Что произойдёт, если кликнуть на ссылку с mailto

Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в RFC 6068.

Как стилизовать mailto

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^=»mailto:»] .

tel:

Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel: .

Хорошим тоном считается указание в href кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:

В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Питере.

В этом случае жители всех городов смогут дозвониться до компании, а короткий номер будет понятен и местным. Случай перейдёт в категорию «плохо», если по сайту непонятно, из какого города компания.

Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.

Другое обязательное требование RFC 3966 — номер телефона, указанный в href , должен быть явно виден на странице.

Номер видно в тексте ссылки.

Номер не видно в тексте ссылки, непредсказуемое поведение.

Что произойдёт, если кликнуть на ссылку с tel

На смартфоне откроется приложение-звонилка, в котором будет набран указанный в ссылке номер. Если открыть такую ссылку на компьютере, где есть программа для звонков, произойдёт то же самое. Но вообще-то, что произойдет, сильно зависит от устройства и операционной системы, браузера и устройства.

• Android, iOS — откроется звонилка по умолчанию.
• Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
• Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.

Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.

Windows на ноутбуке предложит выбрать, с помощью какой программы открывать ссылки tel:

Как стилизовать

С помощью CSS-селектора a[href^=»tel:»] .

А так можно добавить иконку телефона из Unicode, которая есть во всех системах:

Получится такой результат:

Дополнительные материалы по теме

Ещё о вёрстке

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Девять CSS-селекторов на заметку начинающему веб аналитику

Свободный перевод. Ссылка на оригинальную статью Симо Ахава: #GTMTips: 10 Useful CSS Selectors.

Использование CSS-селекторов в Google Tag Manager — без сомнения, одна из его самых полезных опций. Это дает непревзойденную гибкость, особенно в сочетании с триггерами кликов и форм.

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

Вы можете использовать CSS-селекторы в любом JavaScript (или CSS), который развертываете у себя на сайте или в GTM, но, полагаю, наиболее типичным вариантом использования будет условие триггера «соответствует селектору CSS». Оно позволяет оценить элемент, по которому кликнули. Ниже более подробно об этом.

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

Например, приведенный ниже триггер сопоставит элемент, который был нажат, с CSS-селектором и сработает только в том случае, если выбранный элемент является прямым потомком элемента с идентификатором myDiv.

Помимо того, что CSS-селекторы используются для создания триггеров, сами по себе они тоже могут вам очень пригодиться. Разумеется, они нужны в таблицах стилей, но их также можно использовать с такими DOM-методами как querySelector() и querySelectorAll(), а также с matches() (для поддержки кросс-браузерности могут потребоваться некоторые дополнительные настройки).

Ниже перечислены девять CSS-селекторов, с помощью которых вы сможете настроить отслеживание большинства распространенных видов событий для сайта.

Следующие селекторы используются для точного определения элементов на основе их атрибутов или их позиции в DOM. Их можно комбинировать, размещая один за другим. Например, div[title=”someTitle”][data-gtm-event=”someEvent”] будет соответствовать любому элементу div, который имеет атрибуты title и data-gtm-event.

• .someClass — соответствует элементу с классом “someClass”, например
• #someId — соответствует элементу с id “someId”, например
• element — соответствует любому HTML-элементу с названием “element”. Например, “div” соответствует любому div элементу на странице, а “div#myId” будет соответствовать
• element element — соответствует любому HTML-элементу, который является потомком предыдущего.Чтобы соответствие сработало, между элементами не обязательно должно соблюдаться отношение родитель-потомок — первый элемент просто должен предшествовать второму в том же дереве. Например, “span.myClass div#myId” соответствует любому div#myId, который является потомком span.myClass. Вы можете добавить столько ссылок в цепочку, сколько захотите. Наприме, “div#main ol li”, будет соответствовать любому li, который является потомком ol, который является потомком div#main.
• element > element — соответствует любому HTML-элементу, который является прямым потомком предыдущего элемента. Например, “div#myId > a#contactUs” соответствует selector, selector — два селектора, разделенные запятой работают в триггерах по логике или-или. Таким образом, вы можете указать несколько селекторов, и если один из них совпадает, триггер сработает.

Эти универсальные селекторы являются основой практически всего, что вы делаете с CSS-селекторами.

Источник