Размер и контраст шрифта: читается ли ваш сайт с телефона на улице

Откройте свой сайт на телефоне, выйдите на улицу в солнечный день и попробуйте прочитать цену и найти кнопку «Позвонить». Многие владельцы бизнеса после такого эксперимента удивляются: серый текст на светло-сером фоне исчезает, мелкие ссылки не получается нажать, а строки скачут, потому что приходится приближать экран. Именно так сайт видят клиенты, которые ищут услугу на ходу, в очереди, в машине или у входа в здание. Если им трудно читать, они не звонят и не оставляют заявку. Разберём, как проверить и исправить читаемость сайта с телефона.

Почему читаемость напрямую влияет на заявки

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

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

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

Размер основного текста

Для чтения на телефоне основной текст должен быть не меньше шестнадцати пикселей, а чаще лучше семнадцать или восемнадцать. Если в стилях шаблона записано четырнадцать или меньше, вам придётся приближать экран двумя пальцами, а это сразу снижает желание читать дальше. Заголовки делают заметно крупнее: основной заголовок страницы около двадцати восьми — тридцати двух пикселей на телефоне, подзаголовки двадцать два — двадцать шесть.

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

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

Длина строки и межстрочный интервал

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

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

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

Если на странице много данных, например цены или параметры, не заставляйте человека прокручивать таблицу вбок. Разбейте её на карточки: название услуги, цена и срок на отдельных строках. Такой формат удобнее для чтения большим пальцем одной руки.

Контраст текста и фона

Контраст описывает, насколько текст отличается от фона по яркости. Для основного текста нужно соотношение не ниже 4,5 к 1, для крупных заголовков не ниже 3 к 1. Это принятые ориентиры читаемости, их можно проверить онлайн-калькуляторами контраста, достаточно ввести два цвета. Светло-серый текст на белом, жёлтый на белом, белый на светло-голубом почти всегда не проходят проверку.

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

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

Не опирайтесь на один цвет, чтобы передать смысл. Если ошибки в форме подсвечены только красным, часть людей их не заметит. Добавьте текстовое пояснение и значок: «Введите телефон полностью».

Кнопки и ссылки: размер, который можно нажать

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

Текст на кнопке должен быть крупным и понятным: «Позвонить», «Написать в мессенджер», «Записаться». Цвет кнопки обязательно контрастный по отношению к фону страницы, а надпись на кнопке контрастна самой кнопке. Часто встречается кнопка светло-зелёного цвета с белой надписью, которая в яркий день не читается. Такой вариант стоит заменить на более тёмный оттенок.

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

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

Как проверить сайт на реальных устройствах

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

Затем выйдите на улицу. Проверьте при ярком свете, в тени, при уменьшенной яркости экрана, как будто батарея на исходе. Попросите прочитать страницу человека, который видит её впервые, и скажите ему: «Найди, сколько это стоит и как позвонить». Если он справился за десять секунд, дизайн в порядке. Если повторял вопрос или щурился, стоит исправлять.

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

Не забудьте о скорости. Читаемость начинается с того, что страница вообще загрузилась. Если мобильная версия грузится медленно, пользователь не увидит ни шрифт, ни кнопку. Смотрите скорость в отчётах Яндекс.Метрики и проверяйте загрузку на плохом интернете, например в лифте или на трассе.

Как правки связаны с заявками и как это измерить

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

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

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

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

Пример правок стилей шаблона в ХостСМС

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

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

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

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

Как это связано с продвижением 3 в 1

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

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

Третий канал: 2ГИС. Эту карту открывают на смартфоне именно в движении, при ярком свете, и сайт из карточки должен подходить для такого сценария. Поэтому в ссылку на сайт из каждой карточки добавляйте отдельные ЮТМ-метки, чтобы увидеть в Яндекс.Метрике, как ведут себя посетители из Яндекс Бизнеса и из 2ГИС на мобильных устройствах.

Обращения с карт считаются наравне с заявками с сайта. Если посетители из 2ГИС чаще бросают сайт на первом экране, это сигнал проверить мобильную версию. Работая над тремя каналами вместе, вы получаете не только больше переходов, но и больше звонков и форм, потому что человек, дошедший до сайта, действительно может прочитать и нажать.

Типичные ошибки и быстрые исправления

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

Пятая: телефон текстом без ссылки набора номера. Шестая: форма с мелкими полями, где браузер увеличивает масштаб. Седьмая: декоративный шрифт с тонкими линиями, который читается только на большом экране. Замените его на простой гарнитурный шрифт без засечек для основного текста. Восьмая: слишком длинные заголовки, занимающие половину экрана. Девятая: баннеры с текстом внутри картинки, который не масштабируется и не читается поисковиками.

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

Чек-лист для самостоятельной проверки за двадцать минут

Возьмите телефон и пройдите по пунктам. Основной текст читается без приближения? Цена видна на первом экране страницы услуги? Телефон нажимается одним касанием? Кнопки не прилипают друг к другу и в них легко попасть? Текст на фотографиях читается при максимальной яркости и при сниженной? Строка не длиннее экрана, горизонтальной прокрутки нет? Поля формы крупные и подписаны? После отправки появляется понятное подтверждение?

Если хотя бы на три вопроса вы ответили «нет», читаемость мешает вам получать обращения. Запишите, что именно не получилось, и сделайте скриншоты. Эти заметки станут технической задачей для разработчика или подрядчика. Затем повторите проверку после правок и сравните цифры в Яндекс.Метрике.

Что делать дальше

Начните с самого быстрого: увеличьте основной текст до шестнадцати — семнадцати пикселей, замените бледный серый на тёмный, сделайте телефон ссылкой набора номера и увеличьте высоту кнопок. Это занимает от часа до половины рабочего дня и почти не влияет на дизайн. Затем настройте цели в Яндекс.Метрике, чтобы через месяц увидеть изменение числа звонков и форм с мобильных устройств.

Если вы не хотите разбираться в стилях шаблона самостоятельно или боитесь сломать вёрстку, обратитесь к специалистам компании «Сайты Профессионально». Мы бесплатно посмотрим ваш сайт на реальных устройствах, подготовим список правок для ХостСМС, 1С-Битрикс или ВордПресс и поможем связать результат с заявками из поиска, Яндекс Бизнеса и 2ГИС.