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