Частые ошибки мобильной версии сайта: мелкие кнопки, неудобные формы, таблицы, медленная загрузка и окна поверх текста. Как проверить свой сайт и что исправить в первую очередь.
Самые частые ошибки мобильной версии сайта: мелкие и тесные кнопки, неудобные формы, таблицы и текст, которые выходят за экран, медленная загрузка, всплывающие окна поверх контента и телефон, который не открывается одним касанием. Их видно при проверке на реальном смартфоне по ключевым сценариям: найти товар, позвонить, оставить заявку, оплатить.
Во многих нишах значительная часть посетителей приходит со смартфонов. Доля зависит от темы и аудитории, поэтому ее стоит смотреть в собственной аналитике, например в отчете по типу устройства в Google Analytics.
Google применяет индексацию по мобильной версии (mobile-first indexing): для оценки страницы поисковая система преимущественно использует ее мобильный вариант. Если в мобильной версии не хватает текста, изображений или разметки, которые есть в компьютерной, эти материалы могут потерять вес в поиске.
Для бизнеса последствия просты: неудобная страница на телефоне снижает количество заявок, может повышать стоимость заявки из платного трафика и ослаблять позиции в поиске.
Контекст использования смартфона отличается от компьютера: человек держит телефон одной рукой, стоит в очереди или едет в транспорте, смотрит на экран при ярком свете и пользуется слабым сигналом. Поэтому страница должна быстро отвечать на главные вопросы: что предлагается, сколько стоит, как связаться.
Палец менее точен, чем курсор мыши. Руководства Apple и Google для мобильных интерфейсов рекомендуют размер интерактивных элементов примерно 44–48 пикселей по каждой стороне и заметные отступы между ними. Мелкие ссылки в тексте, тесные пункты меню и кнопки вплотную друг к другу приводят к случайным нажатиям и раздражению.
Меню-бургер подходит для большого сайта, но важнейшие действия – позвонить, написать, открыть корзину – лучше вынести на видное место. Меню должно открываться одним касанием, закрываться понятной кнопкой и не перекрывать экран без необходимости.
Номер телефона оформляют как ссылку с протоколом tel, тогда звонок начинается одним касанием. Так же работают ссылки на мессенджеры. Фиксированная кнопка связи внизу экрана сокращает путь к разговору, если она не закрывает текст и кнопки формы.
На сайтах с большим количеством страниц помогают поиск и навигационная цепочка, которая показывает, где находится человек. Поле поиска должно быть заметным, и результаты должны оставаться понятными даже при ошибках в запросе.
Карусели со слайдами, которые переключаются только стрелками, на смартфоне неудобны. Выпадающие списки с десятками пунктов лучше заменить поиском или группами. Несколько фиксированных элементов одновременно – шапка, чат, баннер cookies, кнопка звонка – оставляют на экране очень мало места для содержания.
Читаемость на маленьком экране обеспечивают несколько базовых правил.
Отдельно проверьте страницы с большими таблицами цен или характеристик: именно они чаще всего выходят за границы экрана.
На компьютере страница услуги содержит текст слева и форму справа. На смартфоне блоки становятся друг под другом, и форма оказывается под длинным текстом. Посетитель листает несколько экранов и не видит, как оставить заявку. Решение: короткий блок с преимуществами, кнопка заявки сразу после него и форма, к которой ведет кнопка.
Форма – место, где теряются заявки. Хорошая мобильная форма короткая, имеет подписи над полями, которые не исчезают при вводе, и показывает ошибки рядом с нужным полем.
Полезно предложить несколько способов связи: форму, звонок и мессенджер. Одни люди не любят разговаривать по телефону, другие не хотят заполнять поля, поэтому выбор способа увеличивает шанс получить обращение.
Мобильные сети бывают нестабильными, устройства различаются по мощности. Крупные изображения, тяжелые шрифты и сторонние скрипты замедляют страницу. Google в публичных рекомендациях выделяет показатели Core Web Vitals: скорость показа основного содержимого (LCP), реакцию на действия пользователя (INP) и стабильность макета (CLS). Их значения видны в PageSpeed Insights и в Search Console.
Баннеры cookies, подписки и рекламные окна, закрывающие экран, мешают дочитать страницу. В публичных рекомендациях Google сказано, что навязчивые окна после перехода из поиска могут ухудшать оценку страницы. Делайте баннер компактным, с кнопкой закрытия, на которую легко нажать, и не показывайте подписку сразу после открытия.
Результаты удобно фиксировать коротким списком: страница, проблема, приоритет. Сначала исправляют то, что мешает заявке или оплате, затем самые посещаемые страницы по данным аналитики, далее ошибки, которые ломают вид страницы, и в последнюю очередь мелкие улучшения текста и отступов.
Обычно нет. Современный подход – адаптивный дизайн: один адрес и один набор контента, который перестраивается под размер экрана. Отдельная мобильная версия на другом адресе усложняет поддержку и SEO.
Откройте основные страницы на реальном телефоне и пройдите ключевые сценарии. Дополнительно используйте PageSpeed Insights, отчет об основных веб-показателях в Search Console и проверку URL. Набор инструментов Google меняется, поэтому сверяйтесь с актуальной справкой.
Для основного текста обычно подходит около 16 пикселей, для подписей и примечаний немного меньше, но с достаточным контрастом. Проверяйте читаемость на реальном устройстве при разном освещении.
Нет. Для небольшого сайта с несколькими разделами подойдет видимая навигация. Бургер уместен, когда пунктов много; важнейшие действия все равно выносят на видное место.
Платная реклама часто ведет на страницы, которые люди открывают со смартфона. Если страница неудобна, вы платите за клик, и форму никто не заполняет. Перед запуском рекламы проверьте посадочную страницу на телефоне.
Мобильная версия определяет, оставит ли человек заявку с телефона. Начните с основных сценариев: найти нужное, позвонить, заполнить форму, оплатить, и исправляйте то, что мешает больше всего. После изменений проверяйте сайт на телефоне еще раз: обновления шаблонов и плагинов нередко ломают мобильный вид. Результат измеряйте по конверсии на смартфонах. LightSEO – digital-агентство из Мукачева, которое с 2015 года создает сайты и интернет-магазины и занимается SEO, поэтому может помочь проверить мобильную версию. Технические проблемы, влияющие на видимость, выявляет SEO-аудит сайта. Новый адаптивный сайт можно заказать как корпоративный сайт под ключ.
