Сайт «на макете» и сайт «в браузере» — разные вещи. Макет ровный в Figma, а на телефоне кнопки уезжают, текст мелкий, форма не открывается. Заказчику не обязательно разбираться в CSS, чтобы это поймать. Достаточно короткой приёмки по чеклисту — до финальной оплаты и «всё готово».
Ниже — практичный порядок проверки. Без специальных программ: телефон, ноутбук и обычный Chrome.
Зачем проверять самому
Подрядчик отвечает за качество, но приёмка — ваша зона. Если ограничиться фразой «в целом нормально», потом правки превратятся в спор: что входило в задачу, а что — «доработки за отдельные деньги».
Чеклист не заменяет профессиональный аудит. Он помогает заметить грубые проблемы и задать точные вопросы: не «мне не нравится», а «на iPhone в Safari кнопка „Отправить“ перекрыта клавиатурой» или «в подвале две ссылки ведут в никуда».
Что понадобится
- Смартфон — тот, которым пользуетесь каждый день.
- Компьютер с актуальным Chrome (или Яндекс Браузером / Edge — тоже на Chromium, картина будет близкая).
- Режим инкогнито — чтобы не мешали ваши расширения и старый кеш.
- По возможности второй телефон другой марки или планшет — часто «ломается» только на одной ширине экрана.
Откройте сайт по боевому адресу (или на тестовом стенде, который вам выдали), не скриншотами из переписки.
Чеклист приёмки вёрстки
Идите сверху вниз по странице. На каждой ключевой странице: главная, услуги/каталог, контакты, форма заявки, политика конфиденциальности — хотя бы пробегитесь глазами.
Телефон и узкий экран
- Текст читается без щипка-зума. Если приходится увеличивать абзац пальцами — с вёрсткой что-то не так.
- Важные кнопки («Оставить заявку», «Купить», «Позвонить») видны без охоты и не обрезаны краем экрана.
- Меню открывается и закрывается. Крестик есть, фон не «залипает», после перехода на раздел меню не остаётся поверх страницы.
- Горизонтальной прокрутки всей страницы нет: контент не уезжает вбок из‑за широкой картинки или таблицы.
- Блоки не наезжают друг на друга: заголовок не поверх кнопки, текст не под картинкой так, что его не прочитать.
Переверните телефон горизонтально на минуту: редкий сценарий, но иногда ломается только «лёжа».
Формы и клики
- Во все поля можно ткнуть и ввести текст; подписи не перекрывают ввод.
- Кнопка отправки нажимается пальцем (не «микроскопическая»).
- После отправки понятно, что произошло: сообщение об успехе, ошибка валидации или хотя бы анимация — не тишина.
- Телефонные ссылки tel: и почта mailto: открывают набор номера и почтовый клиент, если вы так договаривались.
- На странице контактов карта (если есть) не перекрывает кнопку «Построить маршрут» и не разъезжает вёрстку.
Картинки и медиа
- Фото не «мыльные» на большом экране и не гигантские по весу «на глаз» (страница не грузится полминуты на LTE).
- Картинки не вылезают за край и не сплющивают текст.
- У важных изображений есть смысл и без подписи; декоративные не выглядят как битые иконки.
- Видео (если есть) запускается, не обрезано по краям, на мобильном не перекрывает весь экран без возможности закрыть.
Текст, шрифты, контраст
- Основной текст контрастный: тёмно-серый на белом — ок; светло-серый на сером — часто плохо читается.
- Длинные строки на десктопе не тянутся на всю ширину монитора без меры — читать такой текст тяжело.
- Заголовки визуально отличаются от абзацев; списки не слипаются в кашу.
- Юридические тексты (оферта, политика) читаемы, а не «простыня 8-м кеглем».
Шапка, подвал, служебные страницы
- Логотип ведёт на главную.
- Пункты меню совпадают с реальной структурой: нет «пустых» разделов и 404.
- В подвале ссылки живые; год и реквизиты, если обещали, на месте.
- Страница 404 существует и не выглядит пугающе пустой (хотя бы путь назад на главную).
- Политика конфиденциальности открывается до отправки формы с персональными данными — это не «мелочь», а требование закона.
Скорость «на глаз»
Не нужен PageSpeed, чтобы заметить красные флаги:
- белый экран дольше нескольких секунд на нормальном LTE;
- скачки раскладки: пока грузятся шрифты и баннеры, кнопки прыгают под пальцем;
- шрифт сначала «системный», потом резко меняется и сдвигает текст.
Если страница «живая» только у разработчика на офисном Wi‑Fi, попросите проверить с телефона на мобильном интернете.
Чего не стоит требовать на обычной приёмке
Разумная приёмка ≠ бесконечный пиксель-перфект.
- Полное совпадение с макетом «до пикселя» во всех браузерах, включая старые — дорого и часто бессмысленно. Договоритесь о поддерживаемых браузерах заранее (обычно последние версии Chrome, Safari, Firefox, Яндекс Браузер).
- Идеал в Internet Explorer или на Android пятилетней давности — только если это явно в договоре.
- «Сделайте как у крупного бренда» без учёта бюджета и сроков — это уже новая задача, не приёмка текущего объёма.
Хороший вопрос подрядчику: «На каких устройствах и браузерах вы сами принимали работу?» Ответ должен быть конкретным, не «везде работает».
Если слышите непонятные слова
В переписке появятся «адаптив», «flex», «grid», «резина», «брейкпоинты». Вам не обязательно становиться верстальщиком. Имеет смысл понимать на уровне смысла: сайт должен нормально выглядеть на разных ширинах экрана, а элементы — складываться в устойчивую раскладку, а не «картинкой из Photoshop».
Если термин мешает приёмке, его можно быстро уточнить в учебнике и справочнике по CSS — stylesheet.ru: там же разобраны свойства и типичные ловушки вёрстки. Это удобно и вам (чтобы говорить с подрядчиком на одном языке), и команде, которая будет сопровождать сайт позже.
Перед оплатой финала — короткий список
- Главные сценарии пройдены с телефона: найти услугу → оставить заявку / позвонить.
- Нет горизонтальной прокрутки и наложений блоков на ключевых страницах.
- Формы отправляются, сообщения об ошибках понятны.
- Меню, подвал и политика конфиденциальности в порядке.
- На мобильном интернете страница не «висит» неприлично долго.
- Список замечаний зафиксирован письменно (трекер, таблица, письмо) — что исправить до акта.
Так приёмка превращается из вкусовщины в понятный разговор о качестве. А студии проще закрыть проект без хвоста из «ой, на моём телефоне всё иначе» через месяц после оплаты.
