Как проверить адаптацию сайта на телефоне

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

Быстрая проверка — 2 минуты

Самый простой способ — открыть сайт на своём телефоне и посмотреть:

• Не нужно ли масштабировать — текст читается сразу
• Кнопки удобно нажимать пальцем — не «мимо»
• Нет горизонтальной прокрутки — всё влезает по ширине
• Меню открывается и закрывается
• Фото загружаются быстро

Если всё это работает — база в порядке. Если что-то не так — идём дальше по чек-листу.

Чек-лист на iPhone

iPhone — самый популярный мобильный девайс в России. Проверяйте на нём в первую очередь.

• Шапка сайта — логотип, меню, кнопка не перекрываются
• Hero-секция — заголовок влезает в 2–3 строки, не обрезается
• Кнопки — размер минимум 44×44 пикселя (палец)
• Меню — открывается, закрывается, не занимает весь экран
• Формы — поля ввода удобно заполнять, клавиатура не перекрывает
• Картинки — не растянуты, не размыты
• Подвал — контакты и ссылки читаемы

Чек-лист на Android

Android — второй по популярности. Проверьте хотя бы одну модель.

• Текст — не обрезается, не «прыгает» при загрузке
• Кнопки — не слишком близко друг к другу (случайные нажатия)
• Аккордеоны и табы — работают
• Ссылки — открываются в новой вкладке, не ломают навигацию
• Всплывающие окна — закрываются, не мешают

Проверка через Chrome DevTools (для тех, у кого нет телефона под рукой)

Откройте сайт на компьютере в Chrome, нажмите F12, потом Ctrl+Shift+M — включится мобильный режим. Выберите iPhone SE (375×667) — это самый узкий популярный экран. Если сайт выглядит нормально на нём — будет нормально и на остальных.

Что чаще всего ломается

Стандартные проблемы, которые встречаются у 8 из 10 сайтов:

• Горизонтальный скролл — что-то шире экрана, страница «ездит» вправо-влево
• Мелкий шрифт — меньше 14px, приходится масштабировать
• Кнопки впритык — легко нажать не ту
• Тяжёлые фото — сайт грузится дольше 5 секунд
• Формы — поля уезжают, клавиатура перекрывает кнопку «Отправить»
• Видео и карты — встраиваются в фиксированной ширине и вылезают за экран

Проверка скорости загрузки

Есть бесплатный инструмент Google — PageSpeed Insights. Откройте pagespeed.web.dev, введите адрес сайта. Он покажет:

• Скорость загрузки на мобильных
• Проблемы с картинками
• Блокирующие скрипты
• Общий балл от 0 до 100

Если мобильный балл ниже 60 — есть что улучшать.

Как мы проверяем перед сдачей

У нас 15-пунктный чек-лист, который проходит каждый сайт перед сдачей клиенту:

• Проверка на iPhone (Safari)
• Проверка на Android (Chrome)
• Проверка на десктопе
• Проверка через DevTools на 375px, 414px, 768px
• Проверка форм — все поля, отправка, валидация
• Проверка ссылок — нет ли битых
• Проверка скорости через PageSpeed
• Проверка картинок — все с alt, сжаты
• Проверка шрифтов — читаемость, размер
• Проверка цветового контраста — текст видно на фоне
• Проверка горизонтального скролла
• Проверка меню и навигации
• Проверка доступности — фокус, aria-атрибуты
• Проверка на битые теги
• Финальная проверка перед публикацией

Что делать, если нашли проблему

Если сайт уже сделал подрядчик, а адаптация плохая:

1. Напишите ему с конкретными скриншотами проблемы
2. Если это в рамках гарантии (обычно 30 дней после сдачи) — должны исправить бесплатно
3. Если подрядчик не отвечает — покажите сайт другому специалисту. Правка адаптива обычно стоит 3 000–7 000 ₽

Что входит в наш тариф

Проверка адаптива на 3 устройствах входит в каждый тариф. Если что-то «поедет» после сдачи — исправим бесплатно в течение месяца.

Мы не сдаём сайты, которые не прошли чек-лист. Это не дополнительная опция, а часть работы.