Правильная верстка номера телефона

Правильная верстка номера телефона
За прошедшие выходные три человека спросили меня о том, как правильно делать верстку номера телефона на сайтах и “каким это волшебным образом ты делаешь так, что при клике по номеру совершается телефонный звонок”. Ответам на эти вопросы я посвящаю целый пост.

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

Что по факту:

Только на одном из посещенных мною сайтов я увидел верстку номера телефона с использованием функции вызова в один клик.

На остальных номер был написан в виде обычного текста. Я считаю, что это не плохо. Но черт побери, почему формат написания номера в большинстве случаев был таким: (888) 88-88-88 – то есть сначала пишется код города, потом сам номер телефона?

По моему мнению это неправильно.

Почему?

Если человек зайдет на сайт с мобильного телефона и захочет позвонить по указанному номеру, ему придется попотеть.

Да, он может попробовать запомнить данный номер телефона и воспроизвести по памяти. Но это совсем не айс.

Также он может постараться скопировать данный номер с сайта и вставить его окошко набора телефона своего аппарата. Но и в этом случае он столкнется с неожиданными трудностями: номер телефона придется редактировать, а это не всегда удается сделать “на ходу”.

Результат: с высокой вероятностью он откажется посетитель вообще откажется от совершения звонка.

Правильная верстка номера телефона

Чтобы разобраться с проблемой, нам нужно найти ответ на вопрос, для какой цели пишут номер телефона на сайте? Ответ просится сам: чтобы по нему звонили.

Отлично, с этим разобрались.

Варианты решения:

1) Если телефон пишется обычным текстом, то только в полном виде, так:
+7 888 88-88-88

Так сделано, например, на сайте студии Артемия Лебедева:
лебедев

Или так:
+7 (888) 88 88 88

Так сделано, например, на сайте у Red keds
2014-10-06_11h36_45

Скопировать его в окошко набора номера телефона у меня получилось с первого раза.

2) Если номер телефона оформляется в виде ссылки, по клике на которую подразумевается автоматическое совершение звонка, то мы пишем такой код:

На выходе получаем идеальный вариант. Он легко запоминается, прекрасно выглядит. При заходе на сайт с мобильного телефона, кликнув по данному номеру, мы автоматически совершим звонок. Профит!

В качестве примера я привел номер телефона своей студии.

Выглядит это так:

14141

При клике номер телефона вставляется в окошко набора в правильном формате, не требущем редактирования или внесения правок:

4141441

А в каком виде номер телефона выставлен на вашем сайте?

Понравился пост? Помогите распространить его в социальных сетях, это сделает мир немного лучше и добавит вам плюсик в карму:

Прокомментируйте от ВК:

Или любым другим способом: