Мобильная версия сайта

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

Варианты мобильной версии

Mobile-first индексация

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

Чек-лист удобной мобильной версии

• Текст читается без увеличения, основной шрифт от 16 px.
• Кнопки и ссылки не меньше 44–48 px, не слипаются.
• Телефон кликабельный и виден в шапке.
• Формы короткие, с правильными клавиатурами для телефона и почты.
• Нет горизонтальной прокрутки.
• Масштабирование не запрещено в meta viewport.
• Core Web Vitals на мобильных в зелёной зоне.

Дизайн под телефон это отдельная задача

Адаптив, который просто складывает десктопные блоки в столбик, это минимум. Хорошая мобильная версия проектируется отдельно: что видно на первом экране, где кнопка, как устроен каталог под палец. Такую работу мы делали для «Ваш Дом», сети из 16 магазинов стройматериалов в Ростове-на-Дону с каталогом больше 20 000 товаров: редизайн касался именно мобильной версии интернет-магазина. Подробнее на странице дизайна мобильной версии.

Как проверить сайт за 10 минут

1. Откройте главную на своём телефоне через мобильный интернет, а не Wi-Fi.
2. Найдите нужную услугу или товар через меню и поиск.
3. Попробуйте позвонить с сайта и оставить заявку.
4. Прогоните главную и одну категорию через Lighthouse в режиме mobile.

Всё, что раздражало вас на этом пути, раздражает и клиентов. Запишите и отдайте разработчику вместе с цифрами Lighthouse.

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

Мобильная версия и конверсия

На телефоне люди ведут себя иначе: чаще звонят, чем заполняют формы, чаще пишут в мессенджеры, реже читают длинные тексты. Поэтому мобильная версия должна подталкивать именно к таким действиям: кнопка звонка и мессенджера всегда под рукой, короткая форма на 1–2 поля, главное, на первом экране. Сравните в Метрике конверсию на мобильных и компьютерах: если на телефоне она в разы ниже при сопоставимом трафике, мобильная версия теряет заявки.

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

Что спросить у разработчика

• Проектировался ли отдельно мобильный интерфейс или только адаптировалась вёрстка?
• Какие показатели Core Web Vitals на мобильных у ключевых страниц?
• Есть ли на мобильной версии весь контент десктопной?

Вопросы про мобильную версию

Помогаем с этим на двух уровнях: дизайн мобильной версии и UX/UI-оптимизация существующего сайта.

Источники

• Google Search Central: «Рекомендации по индексированию с приоритетом мобильного контента»
• web.dev: «Accessible tap targets»

См. также: Скорость сайта, Core Web Vitals, Юзабилити.