Кликабельный номер телефона

Кликабельный номер телефона на сайтеПривет. Сегодня будет статья из раздела "Must have". Все очень просто. Доля мобильных интернет пользователей растет, а большинство сайтов до сих пор под них не оптимизированы.

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

Как сделать кликабельным номер телефона на сайте

На самом деле все очень просто. Когда-то давно, я рассказывал о том, как реализовать skype кнопку, при нажатии на которую, можно позвонить или перейти в чат.

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

Опять все сводится к оформлению ссылки особым образом. Например:

<a href="tel:+380950000000">+3 8095 000 00 00</a>

или:

<a href="tel:+380950000000">Позвонить нам</a>

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

Конечно же ссылка вообще не обязана быть текстовой. Можно использовать любую картинку или иконку. Попробуйте сами, это очень удобно. Но если все так просто, так почему же вы до сих пор не используете это?

А ну бегом всем менять оформление номера телефона из обычного текста на кликабельную ссылку 🙂

И не забудьте посмотреть статью о том, как оформлять адрес электронной почты на лендинге. А на сегодня - все. Пока.

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 4

  1. Анастасия

    Полезная тема, но. Хотелось бы поподробнее узнать про корректную запись самого номера в параметре «tel:». В примерах пишут то 12-значные номера с +3 или +1, то 11-значные с +7. А как правильно то? Например для московского номера и для 8-800..

    • dimadv7

      Полный номер в международном формате, и точно будет правильно 🙂

  2. Бобур

    Здравствуйте у меня есть картинка написанная фотошопом и надо в самом фотошопе сделать кликабельной

    • dimadv7

      Привет. Ну в чем проблема? ставь картинку на фон ссылки… Но такие вещи нужно делать текстом.

Добавить комментарий