Мобильный сайт в 2026 году: проверка большим пальцем
Адаптивность — не уменьшенный десктоп. Проверяем первый экран, навигацию, формы, клавиатуру, скорость и возвращение к прерванному сценарию.
Содержание статьи
Мобильная версия — не уменьшенная копия десктопа. Ею пользуются одной рукой, на ходу, при нестабильной сети и с клавиатурой, которая внезапно занимает половину экрана.
Проверка первого экрана
За несколько секунд человек должен понять, куда попал, что здесь можно сделать и где начать. Не обязательно показывать все преимущества сразу. Важнее, чтобы заголовок не обрывался, основное действие было видно, а декоративная графика не вытесняла смысл.
Проверяем не только популярный iPhone в макете. Узкие Android-экраны, увеличенный системный шрифт и длинное название товара быстро показывают слабые места.
Навигация без угадывания
Кнопка меню должна быть узнаваемой, а после открытия — сохранять контекст. В каталоге человеку нужны поиск, категории, фильтры и возврат к списку на прежнее место. Если после карточки лента начинается сверху, сравнение превращается в наказание.
Касание — не курсор
На телефоне нет точного hover и маленькой стрелки мыши. Интерактивные зоны должны иметь достаточный размер и расстояние. Ссылка выглядит как ссылка, кнопка — как действие. Важные функции не прячем только в жесте, о котором человек должен догадаться.
Текст.
Читается без масштабирования, строки не растягиваются на весь экран.
Касания.
Соседние действия не заставляют целиться между двумя пиктограммами.
Формы.
Поле не скрыто клавиатурой, тип ввода соответствует данным.
Медиа.
Изображения не обрезают предмет и не создают горизонтальную прокрутку.
Форма и клавиатура
Подпись поля остаётся видимой после ввода. Телефон вызывает цифровую клавиатуру, почта — раскладку с нужными символами. Автозаполнение работает, вставка номера не ломает маску, а кнопка отправки не уезжает под клавиатуру.
При ошибке сохраняем данные и переводим фокус к проблеме. На медленной сети показываем состояние отправки. Двойное нажатие не создаёт две заявки.
Скорость на реальном устройстве
Мощный ноутбук и Wi‑Fi скрывают тяжёлый JavaScript, поздние шрифты и огромные изображения. Проверяем средний телефон с ограничением сети. Особое внимание — первому значимому элементу и реакции на открытие меню, фильтра или формы.
Core Web Vitals помогают найти группы проблем, но сценарий важнее абстрактного балла. Если каталог быстро появляется, но фильтр зависает после каждого выбора, пользователь всё равно считает сайт медленным.
Контент в правильном порядке
На широком экране две колонки могут быть равноправны. На мобильном они превращаются в последовательность, и порядок DOM становится редакционным решением. Цена после длинного описания, предупреждение после кнопки или заголовок без связанной картинки меняют смысл.
Не дублируем один и тот же контент отдельно для телефона и десктопа без необходимости. Это усложняет доступность, аналитику и поддержку.
Доступность как стресс-тест
Увеличиваем текст до 200%, включаем управление с клавиатуры, проверяем контраст и видимый фокус. Ориентация экрана не должна блокироваться без веской причины. Системная настройка «уменьшить движение» отключает декоративные параллаксы и резкие переходы.
Матрица проверки
- Телефон 360–390 px: главная, меню, форма, каталог или ключевая услуга.
- Большой телефон 430 px: длинные заголовки и горизонтальные элементы.
- Планшет 768–1024 px: переход между мобильной и десктопной сеткой.
- Увеличенный шрифт и длинные реальные данные.
- Медленная сеть и повторная отправка.
- Safari и Chromium: клавиатура, sticky-элементы, высота экрана.
Перед публикацией
- Нет горизонтальной прокрутки и случайных обрезов.
- Главная графика остаётся целой, а не торчит «обрезком» из рамки.
- Меню закрывается, фокус возвращается, фон не прокручивается.
- Кнопки доступны одной рукой и не перекрыты системными панелями.
- Форма сохраняет данные при ошибке.
- Поворот, увеличение текста и reduced motion не ломают страницу.
