Что делать, если фрилансер сдал сайт с битой вёрсткой

Что делать, если фрилансер сдал сайт с битой вёрсткой

Битая вёрстка редко выглядит одинаково. На одном сайте «поплыл» только блок с отзывами, на другом съехала шапка, а на третьем уже не нажимается кнопка заказа. В такой ситуации не тратьте час на эмоции. Сначала смотрят, что именно сломано, и только потом спорят, кто виноват.

1. Срочно оценить, сломана ли именно вёрстка или уже пострадали бизнес-функции

Начните с простого вопроса: сайт просто некрасиво выглядит или уже не работает как инструмент продаж? Если сломана только сетка, отступы и перекрытия, это одна история. Если не отправляется форма, не открывается корзина или меню на мобильном экране не реагирует, речь уже не о косметике, а о рабочем сбое.

Проверьте 5 вещей: главную страницу, карточку товара или услуги, форму связи, корзину, если она есть, и мобильную версию. Этого хватит, чтобы понять масштаб. Один неработающий чек-аут важнее десяти кривых заголовков. Сайт может пережить некрасивую карточку. Он не переживёт сломанную оплату.

Если вам нужно быстро разобраться, что делать если фрилансер сдал сайт с битой вёрсткой, не начинайте с переписки. Сначала найдите точку отказа. Она подскажет, можно ли откладывать запуск или нужно срочно останавливать публикацию.

2. Зафиксировать битую вёрстку так, чтобы потом не спорить о причинах

Сделайте скриншоты с датой и временем, а лучше запись экрана с прокруткой. На видео видно больше, чем на статичном кадре: как едет блок при скролле, как меняется сетка в соседнем разделе, как ведёт себя меню на 3-й странице, а не только на главной. Это полезно, когда потом кто-то скажет, что «у него всё открывалось нормально».

Снимайте минимум на 2 устройствах, если проблема плавает: desktop и телефон. В идеале добавьте 2 браузера, например Chrome и Safari. Битая вёрстка часто ведёт себя неравномерно, и такая разница сразу видна в доказательствах. Если дефект проявляется только на экране 375 px, это уже конкретика, а не общее недовольство.

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

3. Определить, что из поломок можно терпеть до правок, а что нельзя запускать в работу

Не вся битая вёрстка одинаково опасна. Косметический сдвиг карточки в подвале можно терпеть до правок, если сайт ещё не опубликован и клиент его не видит. А вот сломанная форма заявки, нерабочая кнопка «Купить» или перекрытое меню — это уже блокер. Здесь тянуть нельзя.

Разделите проблемы на 3 группы. Первая — не мешает запуску: отступы, микросдвиги, неидеальные шрифты. Вторая — мешает частично: на некоторых экранах блок читается, но выглядит плохо. Третья — ломает действие пользователя: нельзя оставить заявку, открыть товар, завершить оплату. На практике именно третья группа съедает бюджет и время.

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

4. Быстро понять, на чьей стороне проблема: адаптив, браузер, контент или сам код

Проверьте, одинаково ли ломается сайт везде. Если всё ровно в Chrome на ноутбуке, но на iPhone блоки расползаются, вероятнее всего, проблема в адаптиве. Если съезжает только в Safari, смотрите совместимость. Если разъехался только один длинный заголовок или вставленная картинка, причина может быть в контенте, а не в шаблоне.

Иногда битая вёрстка появляется после добавления реального текста, а не на пустом макете. Длинное название услуги, две строки вместо одной, нестандартный список — и сетка, рассчитанная на «среднюю температуру», начинает разваливаться. Это не оправдание для фрилансера, но хорошая подсказка для диагностики.

Если поломка есть в нескольких браузерах и на нескольких устройствах, ищите проблему в CSS, скриптах или структуре блоков. Когда дефект повторяется на 3 страницах из 5, это уже не случайность. Чем короче проверка, тем быстрее вы поймёте, где копать.

Для сложных случаев полезно свериться с справочный центр ProFreelance и не гадать на глаз. Иногда одна мелкая настройка макета даёт эффект, будто сайт собрали заново наспех.

5. Подготовить минимальный набор доказательств для техподдержки площадки, заказчика или нового исполнителя

Нужен не архив всего проекта, а компактный пакет. В него входят 3 вещи: скриншоты, видео и список страниц с указанием, что именно не так. Если есть ссылка на тестовую версию или staging, добавьте её отдельно. Чем меньше лишнего, тем выше шанс, что третья сторона быстро разберётся.

Для техподдержки и посредника важна повторяемость дефекта. Поэтому укажите устройство, браузер, ширину экрана и последовательность действий. Не «открываю сайт и он ломается», а «открываю карточку товара, прокручиваю до блока оплаты, вижу наложение кнопки на текст». Такая фраза экономит часы.

Если спор уже вышел за рамки переписки, пригодятся и внутренние материалы площадки, например правила сайта profreelance.biz. Сайт фриланса. Сайт. Это не про красивую ссылку, а про то, чтобы опереться на формальные правила, а не на эмоции.

Собирайте доказательства сразу. Через 2 дня часть проблем исчезает после кеша, а разговор переходит в режим «не было такого». Один аккуратный пакет лучше 20 разрозненных сообщений.

6. Решить, что делать, если сайт уже нужно показывать клиенту или запускать рекламу

Если запуск не переносится, действуйте как на аварийном участке дороги. Сначала перекрывают опасное место, потом пускают трафик. На сайте это значит: скрыть сломанный блок, заменить форму временной заглушкой, отключить рекламу на страницу с критическим дефектом и убрать видимые ошибки с первого экрана.

Не публикуйте главную страницу, если на ней есть перекрытая кнопка, битый баннер или нечитабельный текст в шапке. Клиент это увидит за 5 секунд. Рекламный трафик ещё быстрее. Иногда лучше вести людей на более простую страницу, чем на красивую, но сломанную.

Если нужен временный обход, используйте понятную заглушку: «идут технические правки», «форма временно недоступна», «заказ можно оформить по телефону». Это честнее, чем молча запускать битую вёрстку и потом объяснять, почему у пользователей не сработала кнопка. Скрывать проблему можно 1 день, не больше, если речь о живом проекте.

Когда речь идёт о срочном запуске, особенно полезна безопасная сделка на ProFreelance: она помогает удержать обсуждение в рамках условий, а не в рамках перепалки. На перегретом проекте это часто спасает нервы обеим сторонам.

7. Подготовить безопасную передачу задачи на исправление другому специалисту

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

Хорошо работают 2 файла: короткий отчёт и архив с примерами. В отчёте пишут, где именно битая вёрстка проявляется чаще всего, на каких страницах и на каких устройствах. Архив нужен, чтобы не искать кадры по переписке. Один нормальный пакет экономит больше часа на старте.

Если проект нужно передать быстро, используйте формулировки без оценок. Не «верстальщик всё испортил», а «на странице оплаты кнопка уходит под баннер при ширине экрана 390 px». Новый специалист лучше понимает такой текст и не тратит время на расшифровку. Тут точность дороже обид.

Подобрать второго исполнителя можно через фрилансеры. Найти фрилансера на сайте Ми?, если нужен запасной вариант без долгого поиска вне площадки. А для более широкого поиска иногда удобны проекты удаленной работы и вакансий. Фриланс, когда задача уже оформлена как открытый проект.

8. Зафиксировать, как в будущем принимать верстку без повторения этой проблемы

Приёмка верстки начинается не после сдачи, а до неё. Договоритесь о 4 контрольных точках: desktop, tablet, mobile и хотя бы 2 браузера. Если сайт на CMS, проверьте ещё поведение после вставки реального контента, а не только тестового текста. Вёрстка на болванке и вёрстка на живом материале — разные вещи.

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

Полезно заранее договориться о том, кто проверяет мобильную версию и кто смотрит адаптив после каждого крупного блока. Один человек может не заметить перекрытие на своём экране, а другой увидит его сразу. Если проект ведётся через проекты и задания, этот чек-лист удобно держать рядом с карточкой задачи.

Храните замечания в одном месте и привязывайте их к страницам. Тогда в следующий раз не придётся заново вспоминать, почему кнопка в подвале съехала именно на 14 пикселей и кто это заметил первым. Для команды это скучная дисциплина. Для сайта — экономия на переделках.