Шрифт для номера телефона

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

Шрифт для номера телефона

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

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

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

А если человеку нужно позвонить в несколько десятков компаний? Найти свободный столик в ресторане для ужина с семьей или просто срочно найти доставку какой-нибудь еды? Он сэкономит время и найдет похожие условия на сайте конкурентов, которые не заставят его тратить время на copy/past. 

Если вам все еще нельзя позвонить в один клик, эта инструкция для вас. Как сделать номер телефона кликабельным, не потерять при этом стили оформления и таким образом поднять конверсию сайта — об этом и пойдет речь.

В первую очередь рассмотрим вариант, когда у вас есть доступ к HTML-коду сайта.

Обычный номер телефона, который пока является простым текстом, в коде может выглядеть так:

+7(999)888-77-66

Или так (если присвоен класс):

+7(999)888-77-66

Третий пример тоже без особых усилий становится гипертекстом. При этом сохраняются его изначальные стили:

+7(999)888-77-66

Сохраняем код — вуаля, телефон стал кликабельным! 

Если вы пользуетесь CMS/конструктором сайтов, вероятнее всего в функционале конструктора есть специальные инструменты, чтобы сделать номер телефона активным — подробнее об этом нужно узнавать в FAQ каждой платформы (например, LP, Wix, Tilda).

Но есть небольшой лайфхак на случай, если этот функционал вы так и не найдете. 

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

Чтобы сделать номер телефона кликабельным, выделите текст номера, создайте из него гиперссылку, в поле адрес укажите: 

tel:+7XXXXXXXXXX

где «+7XXXXXXXXXX» — номер телефона, на который должен происходить дозвон. Уух! А вы сильны, раз дочитали до этого момента.

Здорово, что вы используете динамический коллтрекинг с подменой номера на сайте, но это не значит, что подменный номер не может быть кликабельным! 

Разберем на примере коллтрекинга Callibri (хотя вообще эти правила примерно так же работают для любого сервиса подмены номера). 

За подмену номера отвечает атрибут class=”callibri_phone”. Если у вас есть активный настроенный проект, на сайте установлен скрипт и каждому номеру телефона в коде присвоен атрибут class=”callibri_phone”, подмена происходит автоматически. Скрипт Callibri сам находит нужные элементы с номерами телефонов и подменяет их.

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

Но если на ваш номер уже можно позвонить в один клик, скрипт Callibri c помощью class=”callibri_phone” подменит и номер, указанный в атрибуте “href=”tel:XXX”, на который происходит вызов.

Если клиент нажмет на подменный номер, звонок также пройдет на подменный номер — вы не потеряете лид и сможете узнать откуда к вам пришёл клиент.

Код, в котором подменяется не только текст номера на сайте, но и номер для вызова, выглядит так: 

+7(999)888-77-66

В этом случае, кроме потери оформления, подмена произойдёт только для элемента

. Таким образом, видимый телефон в коде сайта подменится. А при клике элемент будет ссылаться на основной номер телефона, без подмены. То есть вы не узнаете, откуда пришел клиент: вместо подменного номера он позвонит по вашему основному телефону. 

Поздравляем, теперь вы достойны посвящения в мастера HTML. 

Обновление номера до кликабельного — большой плюс для мобильной версии сайта. С ним вы намного ближе к своему клиенту — буквально в паре кликов.А можно все это не настраивать и просто установить на сайт обратный звонок Callibri. Так вам смогут позвонить даже пользователи, которые зашли на сайт с компьютера.

Подробнее про callback

Кстати, по этому же принципу вы можете сделать кликабельный email на своем сайте! Это важно для B2B — даже если доля мобильного трафика на сайт не очень высокая, все равно есть процент людей, которые захотят отправить вам вопрос, запросить коммерческое предложение или отправить спецификацию через мобильные устройства (смартфон или планшет). 

Чтобы email стал кликабельным, вам нужно поставить атрибут .

А если вы пользуетесь email-трекингом, не забудьте правильно расположить атрибуты, чтобы подменялся не только текст на сайте, но и адрес отправки письма:

mail@server.

com Еще больше фишек повышения конверсии сайта вы можете узнать из нашей еженедельной рассылки. В ней мы анонсируем полезные вебинары, интересные статьи и обновления сервисов. Подпишитесь на рассылку и получайте дайджест каждый вторник!

Источник: https://blog.callibri.ru/kak-sdelat-klikabelnyy-nomer-telefona-na-sayte

Выбор шрифтов, интервалов и цветов для мобильных приложений — Офтоп на vc.ru

Шрифт для номера телефона

​Рекомендации от дизайнеров развлекательной соцсети «Фотострана».

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

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

До запуска iOS 9 системным шрифтом iOS был Helvetica Neue, однако после выхода новой версии его заменили на San Francisco. Шрифт предлагается в двух начертаниях: Display (для использования в UI-элементах интерфейса и для текстов с большим кеглем) и Text (для объёмного текста меньшего размера).

В подсемействе Text расстояние между буквами больше, чем в Display. Апертуры этих текстовых шрифтов тоже шире, чтобы маленький кегль был более разборчивым. Одна из особенностей San Francisco заключается в том, что это динамический шрифт: он меняет начертание в зависимости от кегля. Система автоматически переключает шрифт на Display после того, как его размер превысит 20pt.

Android использует в качестве системного шрифта Roboto или, если язык его не поддерживает, Noto. Каждый из них представлен в кириллице.

Material Design, который применяется на Android-устройствах, предусматривает большие отступы между элементами, а также широкую вариацию кеглей для создания иерархии.

В iOS с этой целью, как правило, используют не размер шрифта, а его насыщенность. Если у Roboto только шесть её вариаций, то у San Francisco их 15: шесть для подсемейства Text и девять — для Display.

В своем приложении можно использовать любой шрифт формата True Type (.TTF), при этом следует уделить особое внимание приобретению лицензии.

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

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

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

Начертания букв должны быть четкими и узнаваемыми — только в этом случае они будут работать лучше в качестве элемента интерфейса. Многие шрифты без засечек, включая Helvetica, содержат неразборчивую заглавную букву I и строчную l, поэтому их не стоит выбирать для мобильных устройств.

Source Sans Pro (слева) и Helvetica (справа)

В Helvetica почти невозможно разобрать первые три буквы, тогда как Source Sans Pro читать легко. Helvetica не подходит для работы с интерфейсами: шрифт создавался ещё в 1957 году и изначально не был предусмотрен для использования на небольших экранах. Именно поэтому Apple разработала San Francisco.

Размер шрифта влияет на читаемость элементов, особенно в больших блоках текста. Чтение текстов с маленьким кеглем займет у пользователя больше времени, поскольку в этом случае ему сложно будет найти начало и конец строки. В результате читатель будет намеренно пропускать большое количество информации.

Однако слишком крупный шрифт также неудобен. Из-за чересчур короткой строки мы вынуждаем читателя бегать глазами и тем самым сбиваем его ритм чтения. В таких условиях информацию воспринимать сложнее. Лучше использовать базовые параметры устройства, для которого создаётся дизайн. Для iOS это 17pt, для Android — 13sp.

При выборе базового размера шрифта нужно учесть количество контента и круг его потребителей. Если основная аудитория приложения — люди старше 50 лет, следует использовать более крупный кегль вроде 21px, ведь с возрастом зрение ухудшается.

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

Классическая шкала по терминологии Роберта Брингхёрста прогрессирует следующим образом: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 и так далее.

Однако можно использовать другую градацию (золотое сечение или гармонические интервалы). Расчеты удобно вести с помощью специального калькулятора на сайте modularscale.com.

Необходимо заранее определиться с иерархией контента, чтобы в соответствии с ней подбирать размеры шрифта. Если базовый шрифт — это 1em, то заголовок уровня H1 — 3em. Надписи и маленький текст будут на размер меньше базового кегля.

Пример иерархии контента в приложении «Фотострана»

Оптимальная для комфортного чтения длина строки — 50-60 знаков с пробелами. Такой размер подходит для десктопных приложений, однако экраны мобильных устройств меньше, поэтому для них лучше использовать строки длиной в 30-40 знаков.

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

  • Чем меньше размер экрана, тем больше внимания стоит уделить межбуквенному расстоянию.
  • Лучше добавить в текст «воздуха» и увеличить высоту строки так, чтобы она была пропорциональна базовому размеру шрифта (обычно она соответствует 120-150% от кегля основного текста) — так можно облегчить чтение. Для этого также пригодится система интервалов, которая нужна для определения размера разных элементов текста. Если в кегле используется золотое сечение, то оно должно быть и в интервалах. Так дизайн будет выглядеть аккуратно и гармонично.
  • Следует обращать внимание на пробелы между абзацами: это дополнительное пространство служит опорной точкой для глаза и создаёт ощущение, что текст не слишком плотный и его легко читать.

Расстояние между элементами в приложении «Фотостраны»

  • При организации композиции экрана нужно помнить о «законе близости»: расположенные рядом объекты воспринимаются как единая группа. И наоборот: однородные элементы, между которыми есть интервал, не будут считаться одним целым.

Контраст особенно важен в дизайне мобильного приложения, потому что при использовании на улице экран сильно отсвечивает. Среди дизайнеров распространены два неверных представления о цветовом контрасте:

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

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

    Даже пользователи с хорошим зрением будут испытывать дискомфорт.

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

Минимальный коэффициент контраста для шрифтовых блоков — 4,5:1, рекомендуемый — 7:1. Но из этого правила есть исключения:

  • Крупный текст (18 кегль и выше или 14 кегль в полужирном начертании) — 3:1.
  • Текст, который выступает частью неактивного элемента интерфейса, не требует контрастности.

Выбранный шрифт нужно проверить среди пользователей, на устройствах с экранами разной ширины. Чем больше устройств включено в тестирование, тем лучше.

Если используется два шрифта, лучше обратиться к сайту discover.typography.com: он поможет подобрать пару шрифтов, которые будут хорошо сочетаться друг с другом. Можно также создать матрицу, которая покажет, как смотрятся различные комбинации. Чтобы узнать, как шрифт влияет на конверсию, нужно применять A/В-тестирование.

Источник: https://vc.ru/flood/26534-typo-mobile

Как правильно указывать номер телефона на сайте?

Шрифт для номера телефона

Телефонный номер не только упрощает связь бизнеса и его клиентов, но и формирует доверие к сайту, что положительно сказывается на продажах. Всё, что требуется для достижения такого результата — разобраться в правилах написания телефонного номера на сайте.

Несмотря на кажущуюся простоту, этот вопрос скрывает множество нюансов: от выбора префикса (“+7” или “8”) и подбора удачного места на сайте до настроек кликабельности телефонного номера и многого другого.

Пишите правильно

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

Ошибки встречаются на многих сайтах, в том числе и на сайтах пользователей uCoz. Вот пример неправильного написания телефонных номеров:

Чем неправильное написание телефонного номера может обернуться для бизнеса?

1. Из чего состоит телефонный номер?

Каждый телефонный номер включает несколько элементов: префикс страны (+7, 8), код города или мобильного оператора (495, 812) и основной номер (222-33-44). От написания этих элементов зависит то, откуда номер сможет быть вызван.

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

2. В чем разница между “+7” и “8”?

Указывая телефонные номера на сайтах, многие веб-мастера не догадываются о значении префикса. Это приводит к тому, что в некоторых случаях он упускается, в других используется “8”, в третьих — “+7”. В выигрышном положении находятся те, кто выбрал последний вариант.

  • Префикс “8” используется для выхода на внутреннюю междугороднюю связь России. Номер с таким префиксом может быть набран только внутри страны.
  • Префикс “+7” объединяет символ выхода на международную связь и код России. Номер, начинающийся на “+7”, может быть набран как внутри страны, так и из-за границы. Такое написание можно назвать универсальным, и именно ему следует отдавать предпочтение.

3. Номер телефона и география звонков.

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

Все приведённые в таблице варианты могут быть использованы для вызова из указанных областей. Но вне зависимости от того, на кого ориентирован ваш онлайн-бизнес, оптимальными будут написания номера, начинающиеся на “+7”. Указав номер с таким префиксом, вы сделаете его доступным для клиентов, вне зависимости от их местонахождения.

Как указывать телефонный номер на сайте?

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

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

Давайте разберёмся, как добиться того же эффекта на вашем сайте.

1. Разместите номер на видном месте.

Телефонный номер может быть размещён в разных частях сайта:

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

2. Укажите номер на всех страницах сайта.

Обратите внимание на ваш сайт: не заставляете ли вы посетителей отыскивать номер телефона?

Телефонный номер — это ваше преимущество. Не стесняйтесь пользоваться им: укажите телефонный номер на видном месте и настройте его отображение на каждой странице сайта.

3. Укажите время работы.

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

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

Думайте о своих посетителях и избавляйте их от возможных сложностей. Всегда указывайте часы работы вашей компании рядом с телефонным номером.

Сделайте номер кликабельным

Разобравшись с правильным написанием номера и его размещением на сайте, вы быстро заметите положительный эффект. Но он станет намного сильнее, если вы побеспокоитесь и о простоте набора телефонного номера.

Посетители вашего сайта могут заходить на него с самых разных устройств: с компьютеров, смартфонов или планшетов.

В таких условиях необходимость копирования номера с сайта для совершения звонка может показаться смешной. Не рискуйте потерей потенциальных клиентов — сделайте звонок по вашему телефонному номеру простым.

Кликабельный номер сократит дистанцию между вами и посетителями сайта до одного клика.

1. Не размещайте номер в изображении.

Номер, размещённый в изображении, избавит вас не только от сложностей работы с HTML и CSS-кодом, но и от потенциальных клиентов. Такой номер не может быть распознан смартфоном, то есть о кликабельности не может быть и речи.

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

+7 (812) 111-22-33

Номер, написанный таким образом, распознаётся любыми смартфонами, работающими как на iOS, так и на Android.

Для пользователей, заходящих на сайт с компьютеров, номер можно настроить для звонков через Skype:

+7 (812) 111-22-33

2. Пишите номер одним стилем.

Зачастую владельцы сайтов пытаются выделить телефонный номер на фоне префикса и кода города. Для этого сам номер указывается другим CSS-стилем или выделяется цветом. Это позволяет выставить акцент, но зачастую усложняет корректное распознавание номера мобильными телефонами. Пытайтесь использовать один стиль и цвет.

3. Используйте префикс.

До появления мобильных телефонов, распознающих телефонные номера, на сайтах часто встречались номера без префиксов.

Эта “традиция” в своё время пришла из печатных СМИ, где использовалась для экономии места.

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

Функция “Обратный звонок”

Функция «Обратный звонок» — это современная идея выгодного для клиента способа связи с вашей компанией.

Зачем нужна функция “Обратный звонок” на сайте?

  • клиенту не нужно платить за звонок;
  • клиенту не нужно ждать на линии пока освободится оператор;
  • клиент может указать удобное время для звонка, если в данный момент он не может связаться;
  • возможно, что ваш клиент не любит или стесняется звонит первым.

Как сделать форму заказа обратного звонка на сайте uCoz?

1. Создаем почтовую форму.

Перейдите: Панель управления – Почтовые формы – Управление почтовыми формами – Создать почтовую форму

Заполните форму: Название, Адрес получателя, Сообщение об успешной отправке заявки и нажмите на кнопку “Создать форму”.

Далее нажмите на ссылку ”Конструктор полей”

и создайте 3 поля: Имя, Номер телефона, Удобное время для звонка. Тип полей “text”. Поле E-mail оставьте нетронутым.

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

В дизайне шаблона формы меняем строчку с E-mail на эту:

E-mail отправителя:

В итоге получим подобный шаблон формы:

Нажимаем на кнопку “Сохранить”.

2. Создаем страницу с персональным шаблоном.

Перейдите: Панель управления – Редактор страниц – Добавить страницу

В Опциях при создании страницы установите галочки, как показано на скриншоте:

и нажмите на кнопку “Сохранить”.

Перейдите: Панель управления – Дизайн – Управление дизайном (шаблоны) – Страница с персональным дизайном (обратный звонок)

Удалите весь код, находящийся между тегами и вставьте вместо него следующий:

$MFORM_2$

$POWERED_BY$

где $MFORM_2$ – код вызова созданной почтовой формы.

3. Создаем ссылку “Заказать обратный звонок”.

Переходим на дизайн страницы, где вы хотите видеть ссылку “Заказать обратный звонок”, например, Первый контейнер и вставляем в нужное место следующий код ссылки:

Заказать обратный звонок

580 – ширина окна в пикселях180 – высота окна в пикселях

/index/0-5 – ссылка на созданную страницу с персональным дизайном.

Желаем вам успешного развития ваших интернет-магазинов в системе uCoz!

интернет-магазин, номер телефона, юзабилити, обратный звонок

Порядок вывода комментариев: По умолчанию Сначала новые Сначала старые

Источник: https://blog.ucoz.ru/blog/phone_number/2015-01-15-364

Поделиться:
Нет комментариев

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

Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.