Мобильная версия сайта — это не просто уменьшенная копия десктопной страницы. На смартфоне человек читает с небольшого экрана, нажимает пальцем, переключается между приложениями и часто пользуется нестабильным соединением. Даже аккуратный дизайн может оказаться неудобным, если меню перекрывает контент, кнопки слишком близко друг к другу, а форма не помещается над клавиатурой.
Ниже — практический чек-лист для владельца сайта и вебмастера. Его можно пройти без полного редизайна: сначала выявить проблемы, затем исправить их и повторно проверить результат.
1. Проверьте настройку viewport
Браузер должен понимать, что страница рассчитана на ширину устройства. Для адаптивных сайтов обычно используют метатег viewport с настройкой width=device-width, initial-scale=1. Без него мобильный браузер может уменьшить всю страницу так, что текст и кнопки станут слишком мелкими.
Как проверить: откройте исходный HTML и найдите метатег viewport в разделе head. Затем откройте страницу на настоящем телефоне: элементы должны отображаться в естественном масштабе, без необходимости постоянно увеличивать экран.
2. Убедитесь, что блоки перестраиваются, а не сжимаются
На большом экране три колонки с карточками выглядят нормально. На узком телефоне те же три колонки превращаются в тонкие полосы. Адаптивная сетка должна менять количество колонок в зависимости от доступного места.
Как исправить: используйте гибкие сетки CSS Grid или Flexbox, относительные размеры и контрольные точки там, где макет действительно перестаёт помещаться. Для типовой сетки карточек подойдёт идея grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)).
Не задавайте всем основным блокам фиксированную ширину в пикселях. Максимальную ширину можно ограничить, но внутри узкого экрана контейнер должен уметь сжиматься.
3. Проверьте читаемость текста
Если посетителю приходится увеличивать страницу, чтобы прочитать описание услуги, адаптация не решает свою задачу. Слишком длинные строки тоже неудобны: глазам приходится постоянно искать начало следующей.
Как исправить: задайте комфортный размер основного текста, достаточный межстрочный интервал и разумные отступы. Для многих интерфейсов отправной точкой служат около 16 пикселей для основного текста, но окончательный размер зависит от гарнитуры и плотности макета.
Проверка: прочитайте на смартфоне несколько абзацев без масштабирования. Заголовки не должны обрезаться, а длинные слова, артикулы и адреса — выходить за край экрана.
4. Сделайте кнопки удобными для нажатия пальцем
Ссылку маленького размера легко нажать курсором, но трудно попасть по ней пальцем. Особенно если рядом находится другая ссылка: вместо «Позвонить» человек может случайно нажать «Удалить» или открыть не ту страницу.
Как исправить: увеличьте активную область кнопок и оставьте между соседними действиями расстояние. Для основных кнопок можно ориентироваться на высоту около 44–48 пикселей как практический размер, а не универсальное обязательное требование.
Проверяйте именно область нажатия, а не только размер текста. Иконка меню может выглядеть крупной, но иметь маленькую невидимую кликабельную зону.
5. Проверьте мобильное меню
Меню должно открываться и закрываться предсказуемо. Типичные ошибки: кнопка закрытия уходит за пределы экрана, под меню продолжает прокручиваться страница, часть пунктов недоступна или раскрытый список перекрывает кнопку связи.
Как проверить: откройте меню, прокрутите его до конца, перейдите по пункту, вернитесь назад, откройте повторно. Проверьте управление клавиатурой, видимость фокуса и понятную подпись кнопки для вспомогательных технологий.
Если меню длинное, внутри него должна быть собственная доступная прокрутка. После закрытия пользователь должен возвращаться к нормальной работе со страницей.
6. Проверьте изображения и первый экран
Широкий баннер с мелким текстом может хорошо выглядеть на мониторе и стать бесполезным на телефоне. Другая проблема — тяжёлая фотография, которая занимает весь первый экран и долго загружается.
Как исправить: подготовьте изображения под разные размеры экранов, используйте подходящие размеры файлов и современные форматы там, где это оправдано. Атрибуты srcset и sizes помогают браузеру выбрать подходящий файл.
Не прячьте важный текст внутри картинки: его сложнее читать, адаптировать и менять. Главный заголовок, преимущества и призыв к действию лучше оставлять обычным HTML-текстом.
7. Пройдите всю форму заявки с телефона
Удобство формы нельзя оценить по одному скриншоту. Нужно попробовать ввести номер, исправить ошибку, вставить данные из буфера, переключиться между полями и отправить тестовую заявку.
Как исправить: используйте подходящие типы полей, автозаполнение, понятные ошибки и крупную кнопку отправки. Проверьте, что при появлении экранной клавиатуры активное поле остаётся видимым, а кнопка не перекрывается плавающей панелью.
Особенно внимательно тестируйте маски телефона: они не должны мешать вставке номера и редактированию уже введённых цифр.
8. Проверьте таблицы, карточки и длинные значения
Таблицы тарифов, списки характеристик и длинные адреса часто становятся причиной горизонтальной прокрутки. На телефоне нельзя рассчитывать, что посетитель увидит все столбцы одновременно.
Как исправить: для небольших таблиц используйте горизонтальную прокрутку внутри самого блока. Для сравнений услуг иногда лучше перестроить строки в отдельные карточки. Не скрывайте важные значения только ради того, чтобы уместить таблицу.
Проверьте длинные названия товаров, email-адреса и технические идентификаторы. Для них могут понадобиться правила переноса, например overflow-wrap: anywhere.
9. Найдите случайную горизонтальную прокрутку
Если всю страницу можно сдвинуть влево или вправо, какой-то элемент шире экрана. Причиной бывают изображения без ограничения ширины, фиксированные контейнеры, длинные строки или абсолютное позиционирование.
Как проверить: откройте страницу на узком экране и попробуйте сдвинуть её по горизонтали. Затем найдите элемент, выходящий за границу. Не маскируйте проблему глобальным overflow-x: hidden, пока не выяснили причину: так можно скрыть нужное содержимое.
10. Проверьте всплывающие окна и закреплённые элементы
На небольшом экране чат, баннер согласия, кнопка «Наверх» и фиксированная панель могут перекрывать друг друга. Иногда окно невозможно закрыть, потому что крестик оказывается за пределами видимой области.
Как исправить: оставьте доступную кнопку закрытия, учитывайте безопасные отступы экрана и высоту клавиатуры. Проверьте, что окно помещается по высоте либо прокручивается внутри, а важные элементы под ним не становятся недоступными.
Не показывайте сразу несколько навязчивых окон. Особенно на первом экране, когда посетитель ещё не успел понять, что предлагает сайт.
11. Оцените скорость именно на мобильном устройстве
Быстрый рабочий компьютер и стабильный Wi-Fi могут скрывать проблемы. На среднем смартфоне тяжёлые скрипты, анимации и изображения ощущаются сильнее.
Как исправить: уберите ненужные скрипты, отложите загрузку второстепенных изображений, настройте кэширование и сократите тяжёлые виджеты. Но не включайте ленивую загрузку для главного изображения первого экрана без проверки: это может задержать появление основного содержимого.
После каждой заметной правки сравнивайте результаты на одинаковых страницах и устройствах. Важно не только время появления картинки, но и то, когда меню и кнопки начинают нормально реагировать.
12. Проверьте доступность и реальные сценарии
Эмулятор в браузере помогает быстро найти ошибки вёрстки, но не заменяет настоящий телефон. Реальное устройство показывает поведение клавиатуры, адресной строки браузера, жестов, увеличенного текста и системных настроек.
Как проверить: откройте главную, страницу услуги, статью и контакты. Попробуйте выполнить основные действия одной рукой. Увеличьте системный размер текста, поверните устройство, проверьте контраст, подписи полей и видимый фокус при навигации с клавиатуры.
Если на сайте есть анимации, проверьте, что они не мешают пользователям, предпочитающим уменьшенное движение. Важные сообщения не должны передаваться только цветом.
Быстрый план проверки за 20 минут
- Откройте главную страницу на телефоне и проверьте первый экран: понятны ли услуга и главное действие.
- Пролистайте страницу целиком: нет ли обрезанного текста и горизонтальной прокрутки.
- Откройте и закройте меню, перейдите в один из разделов.
- Нажмите основные кнопки и убедитесь, что они ведут туда, куда обещают.
- Заполните и отправьте тестовую заявку, включая проверку ошибок.
- Проверьте таблицы, карточки, фотографии и всплывающие окна.
- Повторите основные действия на другом размере экрана и в горизонтальной ориентации.
- Запишите найденные ошибки, исправьте критичные и повторите проверку.
Какие ошибки исправлять первыми
В первую очередь устраняйте то, что мешает выполнить целевое действие: неработающую форму, перекрытую кнопку, недоступное меню, обрезанную цену или номер телефона. Затем исправляйте читаемость, скорость и второстепенные визуальные недостатки.
Мобильная адаптация — не разовая галочка при запуске сайта. После установки новых плагинов, изменения шапки, добавления виджетов или обновления дизайна стоит повторять хотя бы короткую проверку ключевых страниц.
Нужна проверка мобильной версии сайта?
Можно начать с аудита нескольких основных страниц: выявить ошибки отображения, навигации и форм, составить список правок по приоритету и исправить проблемы без полной переделки сайта.