Скорее всего, меньше, чем вы думаете, и вы бы не узнали, потому что смотрели на него только на том компьютере, на котором его проектировали. А люди, которые решают, звонить ли вам, держат телефон, стоят где-то и у них свободен один большой палец.
Вот как нормально это проверить примерно за десять минут и что делать с тем, что найдёте.
Почему сайт, который нормально выглядит на ноутбуке, проваливается на телефоне?
Потому что «помещается» и «работает» - разные проверки, а большинство сайтов проходят только первую.
Почти каждый сайт, сделанный за последние десять лет, адаптивный, то есть раскладка перестраивается под ширину экрана. Эта часть обычно в порядке. Ломается всё, что зависело от мыши, широкого экрана или быстрого соединения: меню, которым нужно наведение, таблицы цен, которые были в три колонки, а теперь нечитаемы, формы, которые были короткими на ноутбуке и кажутся бесконечными на телефоне, и картинки, рассчитанные на десктоп, которые телефон теперь вынужден скачивать целиком при слабом сигнале.
Ничего из этого не видно при согласовании дизайна. Видно это по тому, что люди уходят.
Как проверить, ничего не покупая?
Три прохода. Делайте их в таком порядке.
Проход первый: ваш собственный телефон, на мобильном интернете, а не на офисном Wi-Fi. Выключите Wi-Fi. Откройте главную. Потом сделайте то, что сделал бы клиент: найдите часы работы, найдите цену, дойдите до контактной формы и отправьте себе тестовую заявку. Засеките время. Если что-то из этого требует больше трёх касаний или приходится увеличивать, чтобы прочитать, это и есть находка.
Проход второй: телефон, который не ваш. В идеале человек постарше, в другой сети, который никогда не видел сайт. Дайте ему телефон и ничего не говорите. Смотрите, где он запинается. За девяносто секунд вы узнаете больше, чем из любого отчёта.
Проход третий: ваша аналитика. Не гадайте, сколько посетителей заходит с телефонов. Откройте Google Analytics, посмотрите категорию устройств и сравните показатели отказов и конверсии между десктопом и мобильными. Если мобильного трафика много, а мобильных заявок нет, вы нашли, куда уходят деньги. Это тот же диагноз, что и у трафика, который не превращается в заявки.
Что на самом деле ломается первым?
Примерно в порядке того, как часто мы это находим.
Слишком маленькие или слишком близко стоящие области нажатия. Кнопки, пункты меню и ссылки, рассчитанные на курсор. WCAG 2.2 устанавливает минимум 24 на 24 CSS-пикселя для целей указателя в критерии успеха 2.5.8 (W3C, Understanding SC 2.5.8 Target Size (Minimum)), и это нижняя граница, а не цель. Две ссылки в подвале в нескольких пикселях друг от друга значат, что кто-то раз за разом попадает не туда и сдаётся.
Номер телефона, который не ссылка. Если номер набран простым текстом или, хуже, сидит внутри картинки, нажатие ничего не делает. На телефоне он должен набирать номер. Это исправление на пять минут, которое люди откладывают годами.
Формы, которые просят слишком много. Каждое поле - повод бросить на маленьком экране. Имя, контакт, одно поле сообщения. Задайте правильный тип клавиатуры для каждого поля, чтобы поле почты открывало клавиатуру для почты, а поле телефона - цифровую. И убедитесь, что форма действительно отправляет, потому что формы, которые молча не работают, - самая дорогая неисправность, какая может быть у небольшого сайта.
Спрятанное меню, в котором всё. Иконка-гамбургер - нормально. Иконка-гамбургер, которая прячет четырнадцать пунктов, из которых важны три, - нет. Два-три действия, ради которых пришли люди, должны быть видны без открытия чего-либо.
Липкие шапки, которые съедают экран. Закреплённая полоса аккуратно выглядит на ноутбуке и съедает треть экрана телефона. Хуже того, она может закрыть поле, на которое вы только что нажали, и вы не видите, что печатаете.
Текст, впечатанный в картинку. Баннеры, где предложение написано прямо в JPEG. На узком экране этот текст сжимается до нуля, и его нельзя выделить, перевести или прочитать вслух.
Таблицы. Прайс-листы и таблицы характеристик, сделанные под широкий экран, либо вылезают вбок, либо сжимаются в колонки, которые никто не прочтёт. На телефоне их обычно нужно складывать в карточки.
Влияет ли что-то из этого на то, находят ли вас в Google?
Да, и прямее, чем ожидает большинство владельцев.
Google прямо пишет, что для индексации и ранжирования использует мобильную версию контента сайта, просканированную смартфонным агентом (Google Search Central, Mobile-first indexing). Оценивают именно версию для телефона. В рекомендациях Google также предупреждается, что если на мобильном сайте меньше контента, чем на десктопном, можно ожидать потери трафика, потому что работать поисковику не с чем.
На практике: если кусок текста об услугах спрятан на мобильных ради аккуратной раскладки, этого текста на вашем сайте фактически нет. Уберите его в аккордеон или вкладку, а не удаляйте. Это лежит в основе видимости в локальном поиске, где ищущий почти всегда и так с телефона.
А что со скоростью на телефоне?
Проверяйте на том соединении, которое у ваших клиентов, а не у вас в офисе.
Core Web Vitals от Google считают проблемой Largest Contentful Paint больше 2,5 секунды, а на телефоне этот самый крупный элемент почти всегда главное фото. Самая частая причина - изображение десктопного размера, которое отправляют на телефон, и исправление на стороне разработчика: правильные размеры под устройство, современные форматы и ничего, что грузится раньше, чем нужно. Подробнее обо всей цепочке в статье почему ваш сайт медленный.
Нужен ли отдельный мобильный сайт?
Нет. Этот подход умер много лет назад и оставил после себя кучу брошенных поддоменов m.. Один сайт, один набор контента, разная раскладка на разной ширине.
Конструкторы страниц это усложняют. Большинство позволяют отдельно настраивать мобильный вид, и это полезно, но значит, что кто-то должен это реально сделать. Шаблон, который так и не подогнали под телефоны, - не вина инструмента. Это недоделанная работа.
Исправлять или пересобирать?
В большинстве случаев исправлять. Области нажатия, кликабельный номер телефона, короткая форма, урезанное меню и картинки правильного размера - это часы работы на существующем сайте, а не проект.
Пересобирайте, когда мобильная раскладка сломана, потому что сам сайт настолько старый, что адаптивность к нему прикрутили потом, когда сайт медленный по структурным причинам, а не из-за картинок, или когда вы и так собирались делать редизайн. Если вы здесь, делайте это, не выбрасывая позиции, которые у вас уже есть. Наши сайты стоят от 1 200 до 8 000 $ в зависимости от объёма, как мы определяем объём, показано на странице веб-дизайна, а полные диапазоны есть на странице цен.
В любом случае сделайте первый проход сегодня. Телефон в руке, Wi-Fi выключен, попробуйте нанять самого себя.
Если хотите, чтобы это сделал кто-то другой, пришлите нам адрес сайта на бесплатный разбор. Мы пройдём ваш сайт на настоящем телефоне и скажем, что ломается, во что это вам обходится и какое исправление сделать первым, будете вы с нами работать или нет.