Проверьте сайт на телефоне и сравните его с макетом до публикации: так вы заметите обрезанные заголовки, неудобные кнопки и блоки, которые съехали при вёрстке. Для проверки не нужны специальные инструменты: откройте страницы на смартфоне, пройдите основные сценарии и сопоставьте результат с макетом. Ниже — порядок проверки, критерии для мобильной версии и список ошибок, которые стоит исправить перед запуском.
С чего начать проверку сайта на телефоне?
Откройте сайт на реальном смартфоне, а не только в режиме предпросмотра на компьютере. Проверьте главную страницу и те страницы, которые помогают посетителю связаться с компанией, выбрать товар или оформить заказ. Если доступен только один телефон, этого хватит для первой проверки.
Пройдите путь посетителя от начала до конца. Например, найдите нужную услугу, откройте её описание и попробуйте отправить заявку. Проверьте, что формы отправляются, сообщения об ошибках читаются, а после нажатия на кнопку понятно, что произошло.
- Откройте каждую важную страницу и прокрутите её до конца.
- Нажмите на меню, ссылки, кнопки и элементы выбора.
- Заполните форму тестовыми данными и проверьте подтверждение отправки.
- Вернитесь назад и убедитесь, что страница не потеряла введённые данные.
Записывайте проблему вместе с местом, где она возникла: «на странице услуги кнопка перекрывает текст» полезнее, чем «мобильная версия сломана». Для каждой ошибки сохраните снимок экрана.
Как сравнить мобильную страницу с макетом?
Сначала уточните, для какого размера экрана подготовлен макет. Затем откройте его рядом со страницей на телефоне или в окне браузера сопоставимого размера. Сравнивайте крупные элементы по порядку: шапку, заголовок, основное изображение, текстовый блок и кнопку действия.
Пиксельное совпадение не всегда нужно: экран телефона может отличаться от макета. Проверяйте, сохраняются ли порядок блоков и смысловые акценты. Заголовок не должен обрезаться, изображение — закрывать важный текст, а кнопка — уходить за край экрана.
| Что сравнить | Что проверить |
|---|---|
| Шапка и меню | Помещается ли логотип, открывается ли меню, доступны ли его пункты. |
| Текст | Видны ли заголовки целиком, не сливаются ли абзацы, нет ли горизонтальной прокрутки. |
| Изображения | Не обрезаны ли важные детали и не перекрывают ли они текст. |
| Кнопки и формы | Можно ли нажать на элементы пальцем и пройти форму без ошибок. |
| Порядок блоков | Идут ли разделы в логичной последовательности, как задумано в макете. |
Если макет показывает только настольную версию, не придумывайте точное мобильное расположение элементов. Зафиксируйте, что именно мешает пользоваться страницей на телефоне, и согласуйте желаемый вариант с автором макета.
Какие ошибки чаще всего мешают пользоваться сайтом?
На экране компьютера часть проблем незаметна: там больше места, а мышью проще попасть в мелкую кнопку. На телефоне проверяйте не только внешний вид, но и действия посетителя.
- Страница шире экрана, поэтому появляется горизонтальная прокрутка.
- Заголовок или кнопка обрезаны либо перекрыты другим блоком.
- Ссылки и элементы меню слишком близко друг к другу, из-за чего легко нажать не туда.
- Форма не показывает, какое поле заполнено неверно.
- После нажатия на кнопку нет понятного подтверждения или сообщения об ошибке.
- Изображение растянуто, скрывает важную часть или вытесняет текст.
Не исправляйте всё одним запросом к ИИ. Сначала составьте список с шагами для повторения ошибки, затем попросите исправить одну проблему и снова проверьте страницу. Для проверки самого кода перед публикацией пригодится материал о проверке ИИ-сгенерированного кода.
Как оформить результат проверки перед запуском?
Соберите замечания в короткий список: страница, устройство или размер окна, действие, результат и ожидаемое поведение. Например: «Страница контактов, телефон; нажать на кнопку отправки с пустой формой; форма не показывает подсказку; ожидание — подсветить обязательное поле и объяснить, что заполнить».
После исправлений пройдите тот же сценарий ещё раз. Проверьте, что изменение не сломало соседние блоки и что форма по-прежнему работает. Если сайт создавался по макету, приложите к замечанию снимок макета и экрана: так разработчику проще увидеть расхождение.
3 шага для проверки сегодня:
- Откройте главную страницу и одну ключевую страницу на смартфоне.
- Пройдите основной сценарий: от первого экрана до отправки формы или другого целевого действия.
- Запишите ошибки с указанием страницы, действия и ожидаемого результата, затем повторите проверку после исправлений.
