Вёрстка телефонов

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

Вот дизайнер убрал код страны и вынес за скобки код города — сделал вёрстку поопрятнее:

...и лишил меня возможности позвонить по номеру в один клик:

«Неправильно набран номер. Пожалуйста, уточните номер и перезвоните».

Дальше два пути:

  1. Записать номер на оперативную память в голове и руками набрать его, добавив нужный префикс.
  2. Попробовать обойтись телефоном.

Выбираю второй путь, копирую:

С третьей попытки вставляю номер в «Телефон», но отредактировать не могу — курсора нет, удалять и добавлять цифры можно только с конца:

Ладно, иду в блокнот:

Эээ — tel:(812)%20234-2646 — фигня какая-то. За несколько попыток исправляю номер — +7 (812) 234-26-46. Не был бы разработчиком, не справился бы, ведь простые пользователи не знают, что %20 — это пробел.

Плохо.


Совет. Показывайте на сайтах полные номера, это нормально:

Наш телефон: +7 (812) 234-26-46

Ну или прячьте их в атрибут href, вот так:

Наш телефон в СПб: <a href="tel:+78122342646">234-26-46</a>

С номерами 8 800 xxx-xx-xx обычно всё хорошо.

Share
Send
Pin
 212   2014   вёрстка   дизайн
11 comments
Дмитрий 2014

Да, всё так.

В продолжении темы: можно указывать адрес ссылкой
<a href=“maps:ll=55.758401,37.633017”>Москва, Бол. Златоустинский пер. 9</a>

По нажатия открывается приложение «Карты». Работает даже в OS X.

Даниил Воробьев 2014

А нет способа показывать красивый номер, но чтоб на самом деле он был нормальный? Например завернуть первые цифры в неотображаемый span?

Пушев 2014

Даниил, вам же показали в конце статьи через href

Вадим Беляев 2014

Мне кажется, что записывать телефон в виде +7 (812) 555-55-55 – неправильно. И меня дико раздражает подобное форматирование номера в Айфонах.

Ведь скобки – индикатор кода города, который можно не набирать, если находишься в этой же зоне. Находясь в Питере, можно набрать просто 555-55-55. Звоня из другого места, надо набрать либо код выхода на междугороднюю линию (8), либо код страны (+7), затем код города и номер 555-55-55.

Мое мнение: если телефон записан с кодом страны или с восьмеркой впереди, скобки нельзя писать, т.к. они уже не окружают опциональный код города.
Либо +7 812 555-55-55, либо (812) 555-55-55.

А если речь о номере мобильного, то выделять код зоны скобками совсем недопустимо, т.к. его надо набирать всегда. Например, надо писать не +7 (927) 555-11-22, а +7 927 555-11-22.

Артем, что вы думаете об этом?

Артём Поликарпов 2014

По строгой логике — да. Но скобки вокруг кода города — узнаваемый патерн, они помогают быстрее прочитать номер, как и дефисики, разделяющие сам номер. Такие скобки не очень логичны, но позволяют быстро определить страну и город (оператора). Запись (+7 812) 123-45-67, вроде правильнее, но выглядит стрёмно.

Короче, я бы не стал воевать за присутствие или отсутствие этих скобок. Без странностей скучно.

Сергей Афонькин 2014

Вадим, в Москве, например, используется только 11 значный номер, код города обязателен всегда.

SilentImp 2014

Вообще идеальный вариант всегда

Наш телефон: <a href=“tel:+78122342646”>+7 (812) 234-26-46</a>

Псевдопротоколы вообще интересная тема.
javascript:
tel:
mailto:
skype: (http://enarion.net/programming/c-sharp/skype/html-call/)

Вот и для карт, оказывается, что-то есть… (как оно кстати работает на всяких андроидах/виндофонах/виндоус и в разных браузерах).
А какие вы еще знаете псевдопротоколы?

SelenIT 2014

А сам Эпл, если я правильно понял, учит делать ссылки на карты с обычным http:// (https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html), встроенная магия iOS распознает домен maps.apple.com и переключает на приложение. А вот maps:, как минимум из адресной строки, у меня не сработало. У
Google Maps SDK for iOS есть пара зарезервированных псевдопротоколов а-ля comgooglemaps://, но это не родные карты. А вообще, оказывается, есть официальный RFC на протокол geo: (http://en.wikipedia.org/wiki/Geo_URI), работает в Андроидах, но, похоже, только в них.

Еще забавный момент, что sms: — открывает приложение для SMS (насколько я понимаю, практически во всех мобильных), а вот mms: — внезапно windows streaming media (судя по всему, исторически сложилось:).

Артём Сапегин 2014

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

P. S. Вадим дело говорит, скобки не нужны.

SilentImp 2014

ведь показывать телефон ссылкой на десктопе не нужно.

да ладно?
если не путаю в новом macosx можно звонить из самой ос

Александр Лукин 2014

Артём, а что делать со старыми системами и браузерами, в которых не стоит Скайп и протокол <a href=“tel:”> ведёт на ошибочную страницу?

Например, у Целевого звонка Яндекса при замене номера на смартфонах возможность нажать на него и позвонить пропадает. Если сделать замену с протоколом tel:, то ссылка появится и в десктопных браузерах, что может сбить простых пользователей, не державших в руках смартфон или планшет, с толку.

mrbug 2014

Я стараюсь писать без скобок. Код города обязателен к набору.

Артём Сапегин

Есть короткий сниппет определения мобилки:
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
тру или фелс %)

Popular