Мобильная версия вайта: что проверить до залива

Человек, нажавший на объявление, чаще всего открывает сайт на телефоне. И правила Google, и правила Meta требуют, чтобы сайт нормально работал: у Google — «в распространённых браузерах и на устройствах», у Meta — чтобы он был «доступен» и «нормально работал». Поэтому мобильная версия — часть базовой проверки сайта, а не дополнительная опция.

Что именно ломается на телефоне

1. Нет тега viewport

Без <meta name="viewport"> телефон отрисовывает страницу так, будто ширина экрана около 980 пикселей, а затем уменьшает её. Текст получается мелким, кнопки — крошечными. Этот тег нужен на каждой странице сайта.

2. Меню не сворачивается

Горизонтальное меню из семи пунктов на экране телефона не помещается. Нужно «бургер»-меню, которое раскрывает список по нажатию. Следите, чтобы оно работало на всех страницах, а не только на главной.

3. Сетка не перестраивается

Три карточки в ряд на десктопе должны становиться одной колонкой на телефоне. Если колонки остаются рядом, они вылезают за край экрана.

4. Мелкий шрифт

Текст, который приходится увеличивать двумя пальцами, раздражает посетителя и сигнализирует о непродуманном сайте. Основной текст должен читаться без зума.

5. Горизонтальная прокрутка

Если страница шире экрана, её приходится двигать в стороны. Частая причина — элементы с фиксированной шириной больше экрана: широкие таблицы, изображения без ограничения ширины, блоки с заданным width в пикселях.

Как проверить за пять минут

1. Откройте сайт с реального телефона, а не только уменьшенное окно браузера на компьютере.
2. Пройдите по меню на нескольких страницах: главная, контакты, политика.
3. Прокрутите страницу сверху вниз и проверьте, нет ли движения в стороны.
4. Отправьте форму и убедитесь, что кнопка нажимается пальцем, а сообщение об успехе видно.
5. Откройте сайт при медленном соединении и проверьте, что страница не «прыгает» при загрузке.

Как это устроено в WhiteCraft

Сайты WhiteCraft — статический HTML+CSS. Перед скачиванием health score проверяет не шаблон, а готовый собранный сайт:

• есть ли тег viewport на каждой странице;
• есть ли в навигации «бургер» или другой переключатель меню;
• перестраиваются ли карточки и сетки под узкий экран;
• нет ли слишком мелких размеров шрифта;
• нет ли блоков с фиксированной шириной больше экрана телефона.

Если что-то найдено, в отчёте появится предупреждение с пояснением. Подробнее — на странице возможностей.

Чего это не заменяет: просмотр на реальном устройстве. Автоматическая проверка ловит типичные ошибки, но не может оценить удобство так, как человек.

Чеклист

• Тег viewport на каждой странице
• Меню сворачивается и работает на всех страницах
• Карточки становятся одной колонкой на узком экране
• Основной текст читается без зума
• Нет горизонтальной прокрутки
• Форма отправляется с телефона, сообщение об успехе видно
• Сайт проверен на реальном телефоне

Полный список перед запуском — в чеклисте вайта, а причины отказов, связанные с тем, что сайт «не работает», — в статье почему вайт не проходит модерацию.