Обновлено 30 сентября 2026 года. Первая версия чек-листа вышла в 2017 году. Мы пересмотрели рекомендации, сохранив задачу материала: помочь владельцу сайта проверить, удобно ли посетителю с телефона найти информацию, обратиться в компанию и оформить заказ.
Мобильная версия — это полноценный сайт для небольшого экрана. Красивого первого экрана недостаточно: посетителю нужны читаемый текст, быстрый отклик и рабочие действия. Проверьте главную, страницу услуги, статью, контакты, а для магазина — каталог, карточку товара, корзину и оформление заказа.
Как пользоваться чек-листом
Ниже ровно 30 шагов. Напротив каждого поставьте «готово», «исправить» или «не применимо». Записывайте адрес страницы, устройство, проблему и ответственного. Сначала исправляйте ошибки, которые мешают прочитать материал или завершить заказ, затем скорость и остальные улучшения. Оценка дизайна сама по себе не подтверждает работоспособность сайта.
Основа мобильной версии и поиск
1. Выберите понятную схему сайта
Для нового проекта обычно удобнее адаптивный сайт: один адрес и один набор контента, а расположение блоков меняется под экран. Отдельный мобильный поддомен нужен только при обоснованной технической необходимости. Не добавляйте редиректы по устройству к обычному адаптивному сайту.
2. Сохраните важный контент на телефоне
Google использует мобильный контент для индексации и ранжирования. На телефоне должны быть доступны основные тексты, изображения, заголовки, ссылки и структурированные данные. Не удаляйте описание услуги или характеристики товара ради короткой страницы. Основной материал не должен загружаться только после нажатия пользователя.
3. Проверьте доступ поисковых роботов
Страница и необходимые CSS, JavaScript и изображения должны быть доступны для обхода. Проверьте robots.txt, meta robots и HTTP-статусы: случайный noindex или ошибка сервера могут исключить страницу из поиска. В Search Console используйте «Проверку URL» и просмотр проверенной страницы; Fetch as Google — прежнее название инструмента.
4. Проверьте адреса и канонические ссылки
У адаптивной страницы обычно один канонический URL для всех устройств. Если сохранился m-поддомен, проверяйте соответствующие пары страниц, canonical и alternate по документации поисковой системы: переход должен вести на нужный материал. Vary: User-Agent относится к динамической выдаче разного HTML по устройству, а не ко всем сайтам. Отдельная мобильная XML-карта не является универсальным требованием.
5. Настройте viewport без запрета масштабирования
Используйте <meta name="viewport" content="width=device-width, initial-scale=1">. Не запрещайте увеличение страницы через user-scalable=no или maximum-scale=1: человеку может понадобиться увеличить текст. Проверьте результат на устройстве, а не только наличие метатега.
Читаемость и управление
6. Уберите горизонтальную прокрутку всей страницы
На узком экране содержимое должно помещаться по ширине. Частые причины переполнения — фиксированная ширина блоков, длинные адреса и изображения. Широкую таблицу можно прокручивать внутри отдельного контейнера с понятной подсказкой. Переносите обычный текст между целыми словами.
7. Проверьте текст и увеличение
Основной текст должен читаться без постоянного приближения; 16 CSS-пикселей — удобная отправная точка, но результат зависит от шрифта. Проверьте увеличение текста до 200%: строки и кнопки не должны обрезаться, а функции — исчезать. Заголовки не должны вытеснять весь полезный контент с первого экрана.
8. Проверьте контраст
Для обычного текста ориентируйтесь на контраст не ниже 4,5:1, для крупного — 3:1 по WCAG. Проверьте также подписи полей, ошибки и ссылки. Не передавайте смысл только цветом: ошибку сопровождайте текстом, выбранный вариант — понятным обозначением.
9. Сделайте кнопки удобными для пальца
Для основных кнопок разумно стремиться к области нажатия около 44×44 CSS-пикселей. WCAG 2.2 AA задаёт минимум 24×24 CSS-пикселя либо выполнение условия расстояния между целями, с предусмотренными исключениями. Размер цели и свободное место вокруг неё — разные параметры; универсального отступа 28 пикселей нет.
10. Проверьте меню и основные действия
Посетитель должен быстро найти меню, контакты, а в магазине — корзину и поиск. Кнопка меню имеет понятное название, раскрывается по нажатию и позволяет закрыть панель. Проверяйте вложенные разделы и возврат назад. Не полагайтесь на наведение мыши.
11. Проверьте клавиатуру и экранный диктор
Ссылки и кнопки должны быть доступны с клавиатуры, иметь заметный фокус и понятные названия. Порядок перехода соответствует чтению страницы. У содержательных изображений есть полезный alt, у декоративных — пустой. Проверьте ключевой сценарий с VoiceOver или TalkBack.
12. Проверьте закреплённые блоки и окна
Шапка, баннер, чат и нижняя кнопка не должны закрывать текст, поле ввода или элемент с фокусом. Полноэкранное предложение не должно мешать доступу к материалу. У окна есть заметное закрытие; после закрытия пользователь возвращается к прежнему действию.
Изображения, видео и скорость
13. Подготовьте изображения под экран
Используйте подходящие размеры файлов, современные форматы при поддержке браузера и srcset/sizes для выбора версии. Не отправляйте на телефон многомегабайтный оригинал для маленькой карточки. Проверяйте резкость логотипов и схем, а важные подписи размещайте текстом рядом с изображением.
14. Предотвратите скачки макета
Задавайте размеры изображений и видео или aspect-ratio, резервируйте место под встраиваемые блоки. После загрузки шрифта заголовок не должен резко сдвигать кнопку под пальцем. Просмотрите страницу с медленным соединением: скачки особенно заметны во время загрузки.
15. Правильно распределите загрузку медиа
Изображения ниже первого экрана можно загружать отложенно. Главную видимую картинку, которая определяет скорость появления основного контента, не прячьте за lazy loading. Не загружайте тяжёлое видео автоматически ради декоративного фона.
16. Проверьте видео на реальном телефоне
Плеер должен запускаться, останавливаться, перематываться и помещаться в экран. HTML5 сам по себе не делает видео адаптивным: важны размеры контейнера, формат и управление. Добавляйте субтитры к речи и текстовую альтернативу важной информации. Не включайте звук без действия посетителя.
17. Измерьте Core Web Vitals
Ориентиры хорошего результата: LCP ≤ 2,5 секунды — появление основного контента; INP ≤ 200 мс — реакция на действие; CLS ≤ 0,1 — стабильность макета. Для полевых данных оценка проводится по 75-му процентилю, отдельно для мобильных устройств. Проверяйте все три показателя, а не только загрузку.
18. Разделите реальные измерения и лабораторную проверку
В PageSpeed Insights смотрите и данные реальных пользователей, если они доступны, и диагностику Lighthouse. Полевые данные CrUX охватывают предыдущие 28 дней; исправления не меняют их мгновенно. Если данных нет, это не подтверждает хорошую скорость. Один балл 80 или 100 не заменяет проверку сценариев; обычный запуск Lighthouse не измеряет полевой INP.
19. Проверьте JavaScript и сторонние сервисы
Сравните отклик страницы с чатами, аналитикой, виджетами и без них в тестовой среде. Уберите лишние подключения, откладывайте некритичные скрипты. Кнопки, фильтры и меню должны реагировать и на недорогом смартфоне, когда процессор занят.
20. Проверьте загрузку на слабой сети
Используйте ограничение скорости и процессора в инструментах разработчика, затем проверьте сайт на телефоне через мобильную сеть. Ключевая информация должна появляться до необязательных эффектов. Проверьте кеширование, сжатие и время ответа сервера; тестируйте первый визит и повторный.
Обращение и оформление заказа
21. Сделайте контактные действия рабочими
Телефон оформляйте ссылкой tel: с международным номером; проверьте, что открывается набор правильного номера. Проверьте почту и ссылки на мессенджеры. Посетителю нужен альтернативный способ связи, если выбранное приложение у него отсутствует.
22. Оставьте в форме необходимые поля
Запрашивайте только данные для текущего действия. У каждого поля должна быть постоянная подпись, подходящий type, inputmode и autocomplete. Телефонная маска не должна мешать вставке номера или исправлению. Проверьте автозаполнение на iOS и Android.
23. Проверьте ошибки и сохранность ввода
Объясняйте ошибку рядом с полем понятным текстом. После неуспешной отправки введённые данные сохраняются, когда это допустимо. Экранная клавиатура не закрывает кнопку и текущую строку; прокрутка к ошибке не должна терять фокус.
24. Проверьте реальную отправку
В тестовой среде пройдите путь от заполнения до подтверждённого сохранения заявки. Успех показывайте после подтверждения сервера. Проверьте потерю сети, ошибку сервера и повторное нажатие: человек должен понимать, отправлена заявка или требуется повтор. Отдельно проверяйте доставку уведомления, если она предусмотрена.
25. Проверьте покупку целиком
Для магазина проверьте выбор варианта товара, добавление, изменение количества, промокод, доставку и оплату. По возможности дайте оформить заказ без обязательной регистрации. «Купить в один клик» — дополнительный сценарий, а не обязательная функция любого сайта. Возврат из платёжного сервиса не должен терять заказ.
26. Покажите условия перед действием
Перед отправкой или оплатой понятны цена, доставка, следующий шаг и назначение запрашиваемых данных. Ссылки на условия и политику открываются и читаются с телефона. Требования к согласию определяйте с учётом конкретной формы и применимых правил; не копируйте чужие формулировки автоматически.
Проверка перед запуском и после него
27. Проверьте разные размеры и ориентацию
Начните с ширины 320, 360, 390, 430 и 768 CSS-пикселей, затем добавьте размеры из статистики своей аудитории. Проверьте портретную и альбомную ориентацию, длинные заголовки и крайние значения. Количество разрешений само по себе не гарантирует качество.
28. Проверьте браузеры и настоящие устройства
Эмулятор полезен для поиска проблем, но не заменяет телефон. Проверьте Safari на iPhone и Chrome на Android, а также браузеры, заметные в вашей аналитике. Добавьте недорогой смартфон: на нём легче увидеть зависания и проблемы с памятью.
29. Проверьте переходы и особые состояния
Пройдите внутренние ссылки, старые якоря, адреса с параметрами, страницу 404 и возврат кнопкой браузера. Проверьте открытые фильтры, пустую корзину, длинные списки и отсутствие результатов. При уменьшении движения в системных настройках необязательные анимации должны сокращаться или отключаться.
30. Повторяйте проверку после изменений
После нового баннера, формы, виджета или обновления CMS повторяйте ключевые сценарии. Отслеживайте ошибки, скорость и долю завершённых действий с телефона. Сравнивайте периоды с учётом источников трафика: рост или падение конверсии не доказывает влияние одного изменения.
Что исправлять первым
Высший приоритет — недоступные страницы, потерянный контент, закрытые кнопки, неработающая отправка и ошибки заказа. Следом идут заметные задержки, скачки блоков, нечитаемый текст и неудобное управление. Косметические улучшения планируйте после устранения этих проблем.
Чек-лист помогает уменьшить число ошибок и улучшить пользовательский опыт. Он не гарантирует первое место в поиске: результат зависит также от содержания, конкуренции и других факторов.
Если нужна помощь с проверкой и доработкой, обсудите с Brandmaker мобильную версию сайта или позвоните +7 (8332) 21-56-75.
Источники и инструменты
Google Search Central: мобильная индексация
Материал опубликован: 28 сент. 2017 г.