Как правильно писать телефоны на сайтах. Совет администраторам и верстальщикам

Артур Малосиев avatar | 86
FavoriteLoading В закладки
Как правильно писать телефоны на сайтах. Совет администраторам и верстальщикам

Мобильный Safari умеет различать на сайтах телефоны в окружении другого текста. Это удобно, потому что тапаешь по номеру на веб-странице – и сразу открывается окошко с предложением сделать исходящий вызов абоненту. Однако многие веб-мастера усложняют жизнь потенциальным клиентам. Давайте внесем ясность, как делать правильно.

Как надо

Запомните правило. Если вы верстаете контактную форму, то префикс +7/8, код (495) и сам номер 123-45-67 должны быть написаны единым стилем без сокращений. Вот так:

Вы можете выделять цифры цветом, увеличивать или уменьшать, но чтобы это относилось ко всему номеру одновременно.

Неправильно

Телефон дан без префикса +7/8

Когда на сайте пишут (499) 123-45-67 или (499) 1234567, то iOS предложит вам набрать номер 4991234567. По такому нельзя никуда дозвониться. Мода на убирание префиксов пришла из печатной продукции. Но там это вынужденный шаг, сам с этим сталкивался, когда верстаешь рекламный разворот крупной торговой сети с указанием всех телефонов магазинов, а контактный врез ограничен по площади. Первым делом мы резали +7 и 8, оставляя только код + номер.

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

Телефон дан картинкой

В стиле 2000-х. У некоторых веб-мастеров не хватает знаний в CSS, чтобы координаты контактной формы смотрелись во всех браузерах одинаково, поэтому контакты делают в виде картинки и заверстывают в общий макет. Вот только Safari не умеет распознавать подобные изыски. Клиент на входе в магазин получает подножку.

Код и телефон написаны разными стилями

Противоположный случай – когда верстальщик отлично владеет CSS и хочет сделать акцент на номере, оставив при этом префикс с кодом. Смотрится красиво, но айфон не поймет мотивов веб-мастера. Избегайте таких случаев.

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

Повторюсь еще раз. ПРЕФИКС + КОД + ТЕЛЕФОН должны быть набраны вместе в едином стиле:

+7 812 987-6543 +7 (495) 1234567 8 8790 23-23-09

1 Звезд2 Звезды3 Звезды4 Звезды5 Звезд (5 голосов, общий рейтинг: 4.40 из 5)
undefined
iPhones.ru
Мобильный Safari умеет различать на сайтах телефоны в окружении другого текста. Это удобно, потому что тапаешь по номеру на веб-странице – и сразу открывается окошко с предложением сделать исходящий вызов абоненту. Однако многие веб-мастера усложняют жизнь потенциальным клиентам. Давайте внесем ясность, как делать правильно. Как надо Запомните правило. Если вы верстаете контактную форму, то префикс +7/8,...
Прокомментировать

🙈 Комментарии 86

  1. FiTLeSS avatar
    FiTLeSS25 октябрь 2013
    0

    Поддерживаю!

  2. dmitzin avatar
    dmitzin25 октябрь 2013
    0

    +я поддерживаю!

  3. Zork avatar
    Zork25 октябрь 2013
    1

    +бесконечность! Вымораживает, когда без +7/8 указан номер:)

    Наталия Чеснова avatar
    Наталия Чеснова25 октябрь 2013
    0

    @Zork, Это точно. Что говорить нам, людям живущим под кодом +38 :)))))

    AlexSmith avatar
    AlexSmith25 октябрь 2013
    0

    @Наталия Чеснова, вот только +380

    Power & Control avatar
    Power & Control26 октябрь 2013
    0

    @AlexSmith, тогда и в России: +73, +74, +75, +78, +79. :)

    Brawer avatar
    Brawer26 октябрь 2013
    0

    @Power & Control, в РФ код страны только +7 без всяких дополнительных цифр, не путайте людей

    Power & Control avatar
    Power & Control26 октябрь 2013
    0

    @Brawer, нет. Первая цифра региона тоже берется в префикс (от всех этих 916, 905 и т.д. би этих 812, 495, 499 и т.д.). В Украине тогда просто +38.

    Power & Control avatar
    Power & Control26 октябрь 2013
    0

    В Украине цифра «0» и кодов города перекочевала в +38 и получилось +380. Веря Википедии у нас тоже, то есть как я и написал. А так да, +7.

    Power & Control avatar
    Power & Control26 октябрь 2013
    0

    из кода города перекочевала *

    angorius avatar
    angorius27 октябрь 2013
    0

    @Power & Control, Ммм.. если бы код Украины был +38, то телефонный номер +38 (124) 123-45-67 (на самом деле +381 (24) 123-45-67) должен относиться к Украине. Но он почему-то относится к Сербии и Черногории, у которой код +381. Так что ошибочка у вас.

    Power & Control avatar
    Power & Control27 октябрь 2013
    0

    @angorius, да нет никакой ошибки, у тебя в примере код 124, а не 024. Поэтому правильно, кмУкраине не относится. Был бы 024 было бы +38 (024) 123-45-67 , то есть +380 (24) 123-45-67. Говорю же, цифра ноль перекочевала. У Украины все коды начинались с нуля.

    bastie avatar
    bastie25 октябрь 2013
    0

    @Наталия Чеснова, у нас-то как раз с этим проблем нет.
    Айфон спокойно наберет 044-123-45-67, к примеруб и вы позвоните куда хотели.

  4. PAHAN avatar
    PAHAN25 октябрь 2013
    0

    Люди которые далают серьёзные сайты всё это знают, а школьники эту статью не прочитают ))

    laky_maky avatar
    laky_maky25 октябрь 2013
    2

    @PAHAN, Школьники как-раз и прочитают. :))

  5. ars81 avatar
    ars8125 октябрь 2013
    0

    +++++

  6. adamant1d avatar
    adamant1d25 октябрь 2013
    0

    +1

  7. Jonny_Ive avatar
    Jonny_Ive25 октябрь 2013
    0

    Авторы статьи не знают по ходу, что называется в среде разработчиков и программистов костылем)

    Whilser avatar
    Whilser25 октябрь 2013
    0

    @Jonny_Ive, расскажите нам всем.

    i.band avatar
    i.band25 октябрь 2013
    0

    @Jonny_Ive, фраза «первый костыль уже вставлен» в каждом примере — ещё хуже чем номер без 7-ки :)

    и да, какое-то странное у них понимание «костыля»

    Marussya avatar
    Marussya25 октябрь 2013
    0

    @Jonny_Ive,
    +1
    это не “костыль”, а “антикостыль” получается ))

    Rezon avatar
    Rezon25 октябрь 2013
    0

    @Jonny_Ive, Вы же в курсе, что на программистах мир клином не сошёлся, правда? :)
    Хотя тут, на мой взгляд, уместнее было бы выражение “палка в колёса”.

    Rezon avatar
    Rezon25 октябрь 2013
    1

    @Rezon, свет не сошёлся, свет) Сегодня день перепутанных идиом)

  8. RayGreen avatar
    RayGreen25 октябрь 2013
    0

    Если бы Apple добавила в iOS возможность редактировать номер (а не только вставлять из буфера), то было бы вдвойне хорошо.

    Alvi avatar
    Alvi26 октябрь 2013
    0

    @RayGreen, Вот это люто поддерживаю! Почему не могу допилить такой простой функционал, абсолютно непонятно!!

  9. nightcoder avatar
    nightcoder25 октябрь 2013
    0

    <a href=”tel:+74951234567″>Звоните нам</a>
    Обязательно нужно указывать tel.

  10. robert_msk avatar
    robert_msk25 октябрь 2013
    0

    «Когда на сайте пишут (499) 123-45-67 или (499) 1234567, то iOS предложит вам набрать номер 4991234567.»

    Когда на сайте пишут (499) 123-45-67 или (499) 1234567, хочется сначала засунуть программистам сайта руки в одно место, а потом написать в Apple с огромнейшей просьбой добавить возможность редактирования номера. Но первое больше. =D

    mokrinsky avatar
    mokrinsky6 июня 2015
    0

    @robert_msk, Когда люди приписывают подобные ошибки программистам, хочется засунуть мозг этих людей в одно место.

  11. Crossfire13 avatar
    Crossfire1325 октябрь 2013
    0

    Я вам даже больше скажу, есть специальный html тег tel для того, что бы любое устройство понимало номер.

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

  12. ChinChilla avatar
    ChinChilla25 октябрь 2013
    0

    Наконец-то хоть один большой ресурс прокричал об этом. Спасибо! Давно хочу оторвать руки верстальщикам, которые ставят телефоны на сайтах без префикса, обходясь только DEF.

    Maestro_at_Rest avatar
    Maestro_at_Rest25 октябрь 2013
    0

    @ChinChilla, а АВС вообще зачастую не указывают…

    i.band avatar
    i.band25 октябрь 2013
    0

    @ChinChilla, ресурс прокричал, да как-то криво. предложили лишь одно решение — писать полностью номер без разбиения, хотя можно обойтись верной подстановкой ссылки.

    Более того, если бы подошли к вопросу грамотно, то описали бы пример, как сделать эту ссылку «устройство-зависимой», то есть, допустим, при тапе с айфона — предлагать позвонить; при клике с компа или тапе с айпада — открывать форму обратной связи и тд.

    ChinChilla avatar
    ChinChilla25 октябрь 2013
    0

    @i.band, нет уж. Может быть еще Артуру основы php тут преподавать? Статья абсолютно соответствует направлению всего сайта.

    safari2 avatar
    safari229 октябрь 2013
    0

    @i.band, не надо форму обратной связи, ибо мой jabber умеет набирать номер со стационарного телефона из браузера не хуже IOS :)

  13. Adnako avatar
    Adnako25 октябрь 2013
    0

    Истово плюсую!
    Задрали уже кухонные дизайнеры.

  14. shmonstre avatar
    shmonstre25 октябрь 2013
    0

    Правила не вебмастера, но яблочника. Написание номера рассчитывают на удобное восприятие и запоминание пользователем, а не на корректную работу с одной моделью телефона, которая этот самый номер даже не может правильно воспринять.
    Это как писать статью о необходимости верстки под ИЕ6.

    ChinChilla avatar
    ChinChilla25 октябрь 2013
    0

    @shmonstre, номер без префикса в международном формате – неполный. Эппл тут совсем ни при чем.

    Представьте, что вы приходите в магазин и хотите купить… да тех же яблок! И на всех сортах написано: “Яблоки” – Цена 100р/кг, “Яблоки” – Цена 30р/кг, “Яблоки” – Цена 200р/кг.

    Яблоки разные, но Вы не понимаете, почему эти стоят столько-то, а эти – столько-то. Сорт-то не обозначен!

    vsad avatar
    vsad26 октябрь 2013
    0

    @shmonstre, дело не в яблоке, сейчас почти любой телефон распознает номера, и м…ки, пишущие номера как придется, задрали…

  15. max_im_50 avatar
    max_im_5025 октябрь 2013
    0

    Претензия на счёт недозваниваемых телефонных номеров должна прямиком отправиться в APPLE.
    Сколько лет айфонв на рынке? Вот ровно столько лет яблочники тупят и не могут добавить в приложение ТЕЛЕФОН простейшую функцию – редактирование набранного телефонного номера с произвольной позиции, а не только последнего введенного символа.

    Функция на 5 центов работы, есть в _любом_ андройде, есть в нокии и ещё мильёне телефонов.
    В айфоне – нет!
    Я уже писал в саппорт APPLE, присоединяйтесь, напишите и вы.
    Дизайнеров всех не исправить но облегчить себе жизнь можно попробовать.

    Chipson avatar
    Chipson25 октябрь 2013
    0

    @max_im_50, Молодцом!

  16. laky_maky avatar
    laky_maky25 октябрь 2013
    0

    О да! Слава богу хоть кто-то заговорил об этом громко! :))))

  17. A1eksey avatar
    A1eksey25 октябрь 2013
    0

    Артур Малосиев, прекрасная заметка. Один большой минус – везде в тексте разные телефоны. А ведь мог быть один, но нужный рекламодателю ;)

    max_im_50 avatar
    max_im_5025 октябрь 2013
    0

    @A1eksey, :D :) телефон саппорта APPLE !

    A1eksey avatar
    A1eksey25 октябрь 2013
    0

    @max_im_50, хотя бы :)

  18. rdc avatar
    rdc25 октябрь 2013
    0

    присоединюсь к комментаторам, рекомендующим ссылку tel:
    это гораздо правильнее, чем уродовать дизайн сайта совершенно ненужными “плюс семь”

  19. zyama27 avatar
    zyama2725 октябрь 2013
    0

    Chrome сам добавляет +7/8 по крайней мере на android

  20. Surfer avatar
    Surfer25 октябрь 2013
    0

    Это на хабре надо написать и закрепить наверху ;)

  21. spinn avatar
    spinn25 октябрь 2013
    0

    Артур, пропустили слово “отсутствие”:
    “…когда в 2009 году айфон стал различать телефонные номера на сайтах, то ОТСУТСТВИЕ префикса…”

  22. iamfine56 avatar
    iamfine5625 октябрь 2013
    0

    Вроде банально, но имеет место быть. Когда сталкиваешся, то весьма неудобно его копировать и дописывать

  23. spinn avatar
    spinn25 октябрь 2013
    0

    Мне идея писать восьмерку не нравится. Тогда нельзя позвонить, находясь в другой стране. А в остальном – полностью поддерживаю.

  24. look1d avatar
    look1d25 октябрь 2013
    0

    Хороший, годный совет.
    Мне нравится, как вы относитесь к деталям.
    Спасибо.

  25. 6noopyy avatar
    6noopyy25 октябрь 2013
    0

    +1000 очень нужно! бесит когда не правильно написан номер! тупо не звоню, ищу других….

  26. vanyaklimenko avatar
    vanyaklimenko25 октябрь 2013
    0

    Хорошие ребята пишут джаваскрипт, который сам подставляет tel:+7 в код, только на Айфоне и только когда надо.

    vanyaklimenko avatar
    vanyaklimenko31 октябрь 2013
    0

    @vanyaklimenko, а ещё хорошие ребята подчёркивают ссылки.

  27. iPhone5XXXL avatar
    iPhone5XXXL25 октябрь 2013
    0

    Спасибо Артуру, исправили у себя!
    А то как то такие мелочи пропустили, ибо думали про восприятие человека номера тлф, а не ипхона, но всетаки ипхон перевесил, сделали 8 (ХХХ) ХХХ-ХХ-ХХ, а было 8-ХХХ-ХХХ-ХХ-ХХ. Протестили через сафари, действительно, номер тогда подчеркивается и набирается без проблем.

    SSDDRR avatar
    SSDDRR25 октябрь 2013
    0

    @iPhone5XXXL, Вообще-то есть российский стандарт: +N (NNN) NNN-NN-NN. Если бы все следовали ему, никаких трудностей бы не было.

    iPhone5XXXL avatar
    iPhone5XXXL25 октябрь 2013
    0

    @SSDDRR, ага, проходили уже -звонят и спашивают-А где плюсик (+) на мобиле найти!? Отсюда и отказались от +7 в пользу 8ки.

    Alvi avatar
    Alvi26 октябрь 2013
    0

    @iPhone5XXXL, Это не шутка? Вот дураки же бывают…

    SSDDRR avatar
    SSDDRR25 октябрь 2013
    0

    @iPhone5XXXL, Префикс “8” это неверно, так как в разных странах выход на междугороднюю и международную связь осуществляется через разные префиксы. Поэтому надо просто давать абсолютный номер “+N (NNN) NNN-NN-NN”.

    iPhone5XXXL avatar
    iPhone5XXXL25 октябрь 2013
    0

    @SSDDRR, +7 как международная связь, но нам этого не надо, только РФ, а у нас 8мь.

    Dimaz avatar
    Dimaz26 октябрь 2013
    0

    @iPhone5XXXL, в том виде, в котором вы сделали (со скобками), восприятие номера еще лучше.

  28. mess10 avatar
    mess1025 октябрь 2013
    0

    Извините, но яблоку пора бы вставить в софт функцию набора номера “изменить и вызвать” , эта функция есть во многих телефонах.

  29. dont99 avatar
    dont9925 октябрь 2013
    0

    молодца +1

  30. bigzleo avatar
    bigzleo25 октябрь 2013
    0

    Ну наконец-то кто-то написал про эту тему! Давно пора. Владельцам сайтов, особенно коммерческих, пора понять, что телефоны на сайте должны быть указаны так, чтобы сразу можно было звонить по клику. Действительно, очень неудобно и злит, когда этого нет. И очень комфортно, когда есть.

  31. Свинорыл avatar
    Свинорыл25 октябрь 2013
    0

    Поддерживаю. Не раз материл таких верстальщиков, а писать им время тратить – тоже не хочется, проще новый сайт открыть)

  32. nopox avatar
    nopox25 октябрь 2013
    0

    А ещё можно почитать документацию:
    https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html

    и использовать какие угодно стили.

    acidr avatar
    acidr25 октябрь 2013
    0

    @nopox, спасибо за полезную ссылку

  33. dio45rus avatar
    dio45rus25 октябрь 2013
    0

    Потому, что первый костыль уже вставлен.

  34. tty01 avatar
    tty0125 октябрь 2013
    0

    Впервые встретился с этой проблемой в 2007 г на своем сайте ))
    Удивительно, но на многих сайтах проблема до сих пор актуальна!

  35. airserg avatar
    airserg25 октябрь 2013
    0

    Несколько компаний вот так и потеряли меня как клиента.

  36. acidr avatar
    acidr25 октябрь 2013
    0

    Артур, спасибо! Поправили =)

  37. Vladshee avatar
    Vladshee25 октябрь 2013
    0

    Давно уже всем заказчикам говорю, что код +. обязателен даже в наружке

  38. iRupor avatar
    iRupor26 октябрь 2013
    0

    У кого руки с головой не из ЖО растут, те уже давно в теме.

  39. Red_Baron avatar
    Red_Baron26 октябрь 2013
    0

    Да это не только в России, у нас с +61 тоже все тяжко :(

  40. stilyagapro avatar
    stilyagapro26 октябрь 2013
    0

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

  41. max_im_50 avatar
    max_im_5026 октябрь 2013
    0

    Артур, как вы думаете, силами айфонс-ру :) можно донести коллективную просьбу в Apple: “допилите пожалуйста телефонные функции, добавьте редактирование набранного номера”?
    Благое дело ждёт своих героев :) .

    Никита Горяинов avatar
    Никита Горяинов26 октябрь 2013
    0

    Российский офис Apple нас может и читает, а вот там, в Купертино – вряд ли :) Максимум – Ирландия.

  42. max_im_50 avatar
    max_im_5026 октябрь 2013
    0

    В Российский офис, в Ирландский, в Купертино, хоть в спортлото написать! Шестой айфон не за горами а крошечную функцию добавить не могут.
    Замечу, у нас культура деловой переписки от вэб-дизайна ушла недалеко. В почте телефоны тоже пишут как попало.

    Я часто на кривое написание номера натыкаюсь, а народ у нас сидит в основном на андройде, специально проверил – у всех есть редактирование номера! Доколе?! :)

  43. Splash.Dmg avatar
    Splash.Dmg26 октябрь 2013
    0

    Когда телефон указан на сайте без +7, приходится жать вызов, потом сброс, заходить в список вызовов, оттуда номер добавлять в контакты, а там уже с помощью редактирования добавлять +7 и звонить. Как вариант можно запомнить номер и набрать вручную, что тоже жутко неудобно :)

  44. Alvi avatar
    Alvi26 октябрь 2013
    0

    Отличная заметка!
    Однако как бесит такое кривое написание номеров на сайтах, также бесит и отсутствие возможности редактирования телефона при наборе!

  45. ghool avatar
    ghool28 октябрь 2013
    0

    Я тут с удивлением обнаружил, что если телефон указан без + но с префиксом всё равботает нормально. Айфон сам подставляет плюс.
    То есть номер 74951234567 кликабелен и набираем.

    iOS 6.0.1

  46. ENTER-RU avatar
    ENTER-RU31 октябрь 2013
    1

    При звонке в какую-нибудь организацию иногда возникает необходимость сразу набрать основной и добавочный номер. Эта функция реализована на iPhone, правда, хорошо спрятана от посторонних глаз. После набора основного номера нажмите звёздочку (*) на несколько секунд, пока в поле набора номера не появится запятая. После неё вводите добавочный номер.
    Кстати, запятых в номере может быть несколько подряд – каждая из них добавляет двухсекундную паузу при наборе номера.

  47. Ballon Vysokogo Davlenia avatar
    Ballon Vysokogo Davlenia6 сентября 2015
    0

    Если на сайте стоит скрипт против копирования текста, то номера не кликабельны вовсе.

  48. Sergey Gernichenko avatar
    Sergey Gernichenko13 апреля 2016
    0

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

    Вячеслав Вольхин avatar
    0

    @Sergey Gernichenko, наверное надо копать в сторону атрибута rel

  49. Вячеслав Вольхин avatar
    0

    вообще если сделать телефон в виде ссылки (a href=””…), то можно хоть картинкой вставлять, главное в href атрибуте прописать tel:8495999999, а саму ссылку можно стилизовать как душа пожелает

Вы должны авторизоваться или зарегистрироваться для комментирования.

Нашли орфографическую ошибку в новости?

Выделите ее мышью и нажмите Ctrl+Enter.

Как установить аватар в комментариях?

Ответ вот здесь