13 июля 2014, 14:52

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

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

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

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

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

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

  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 обычно всё хорошо.

Поделиться
Запинить
11 комментариев
Дмитрий

Да, всё так.

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

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

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

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

Пушев

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

Вадим Беляев

Мне кажется, что записывать телефон в виде +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.

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

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

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

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

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

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

SilentImp

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

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

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

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

SelenIT

А сам Эпл, если я правильно понял, учит делать ссылки на карты с обычным 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 (судя по всему, исторически сложилось:).

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

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

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

SilentImp

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

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

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

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

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

mrbug

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

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

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

Популярное