
Разбор · Опубликовали 08.10.2026
Стоимость адаптивной вёрстки считают по шаблонам и состояниям старого сайта
Как разобрать смету мобильной адаптации работающего сайта: сгруппировать шаблоны, найти скрытые состояния и договориться о проверке. На исправлениях интерфейса vibecoding.ru.
Текст собран машиной агентов под надзором инженера, который ведёт vibecoding.ru · факты проверены 8 октября 2026
Стоимость адаптивной вёрстки работающего сайта считают по шаблонам и состояниям, которые надо исправить. Список адресов и цена новой страницы из макета не покажут объём переделки форм, таблиц и меню.
4 октября на нашем сайте таблица на телефоне прятала главную колонку. Разберём на этой поломке, что включить в смету; клиентского кейса стоимости такой переделки у нас пока нет.
Не хотите разбираться сами? Внедряем ИИ в ваш бизнес: задачи без лимита, одна цена в месяц, отмена в любой момент.
1. Смету считают по шаблонам, а не по числу адресов.
Сколько страниц надо адаптировать? Начните с повторов. Карточки каталога могут использовать общий шаблон, а главная, поиск и оформление заказа устроены по-разному.
Похожие страницы ещё не означают одинаковый код. Старый подрядчик мог копировать разметку; тогда исправление карточки придётся переносить в каждую копию.
У нас сквозным примером стала таблица статьи о правилах. На узком экране читатель видел действия агента, а колонка с ограничениями уходила за край.
Ведомость начинается с повторяющихся элементов.
Предлагаемая ведомость редакции, 08.10.2026; поломка таблицы vibecoding.ru от 04.10.2026.
2. Состояния интерфейса раскрывают скрытый объём работы.
Что считать внутри шаблона? Состояния, в которых пользователь должен закончить действие. Пустая форма и та же форма с ошибкой занимают разное место.
Длинное название товара меняет высоту карточки. Сообщение сервера двигает кнопку, а открытая клавиатура отнимает место у формы. Эти случаи надо включить в ведомость до оценки.
Красивый первый экран не доказывает готовность. Заказчик принимает отправку заявки и чтение результата, поэтому проверяет путь после нажатия, а не только внешний вид кнопки.
Состояние добавляет условие приёмки.
Предлагаемые сценарии приёмки, 08.10.2026; принцип сохранения информации и функций W3C Reflow, проверено 08.10.2026.
3. В цене разделяют обследование, исправления и приёмку.
Как получить сумму, которую можно сравнить? Передайте исполнителям одну ведомость. Попросите отдельно оценить поиск дефектов, изменение шаблонов и проверку сценариев.
В прайсе inreallab новая вёрстка по макету и адаптация существующего сайта стоят разными строками. В работающем интерфейсе сначала надо выяснить, что повторяется и что сломается от общей правки.
Переделка общего шаблона касается технического долга сайта. Если в смету попало обновление библиотек или переписывание раздела, попросите связать его с конкретным дефектом и вынести отдельной строкой.
Одинаковый состав работ делает предложения сравнимыми.
Предлагаемая структура сметы, 08.10.2026; разделение новой вёрстки и мобильной переделки в прайсе inreallab, проверено 08.10.2026. Это состав работ, не рыночная цена.
Обследование тоже может быть платной работой. До старта согласуйте его результат и цену, а найденные изменения оцените после него; стоимость обследования учитывайте в общем бюджете.
4. Агент исправляет правило, инженер принимает поведение.
Что меняется, когда код пишет ИИ-агент? Ему можно поручить повторяющееся исправление общего шаблона. Выбор поведения таблицы остаётся задачей инженера.
Уменьшить ширину таблицы недостаточно. Читатель должен видеть связанные колонки; если данные требуют ширины, им нужен отдельный прокручиваемый блок. Обе задачи выглядят как «починить таблицу», а результат разный.
В задаче для агента стоит назвать место дефекта, сохранённое поведение и доказательство исправления. Просьба «сделать адаптивно» оставляет агенту решение, которое заказчик ещё не принял.
Наши переделки меняли правило проверки.
20.08
Карточка, собранная руками, потеряла часть элементов эталона. Появился общий шаблон, извлечённый из эталонной карточки.
04.10
Таблица на экране 390 px прятала главную колонку. Короткие таблицы, нужные целиком, стали укладывать в колонку текста.
04.10
График на экране 390 px обрезал подписи. В статье его заменили столбиками по датам, которые прочитывались на телефоне.
Оригинальные записи журналов vibecoding.ru, 20.08 и 04.10.2026; сверены 08.10.2026. Это собственные исправления интерфейса, не клиентские кейсы и не замер цены.
Инженер ведёт машину агентов и принимает результат. Исправленная таблица закрывает задачу после чтения всех колонок на телефоне и повторной проверки широкого экрана.
Общую правку принимают во всех затронутых шаблонах. Если таблица выглядит иначе в старом разделе, этот раздел возвращается в ведомость отдельным дефектом.
В уроке «Одиннадцать шагов одной задачи» нашего курса агентной разработки разобраны сдача и действия после неё. Проверка результата входит в задачу, даже если агент уже закончил менять код.
5. Приёмку строят вокруг действий на разных ширинах.
На каких экранах проверять? На согласованных с заказчиком ширинах и между ними. Google в web.dev советует выбирать перелом компоновки по содержимому, а не по названию устройства.
W3C задаёт ориентир для обычного вертикального контента: 320 CSS px без потери информации и функций. Двумерные таблицы могут иметь собственную прокрутку; это исключение нельзя переносить на всю страницу.
Кадр ловит обрезанный текст, но не доказывает отправку формы. Приёмка должна соединить кадры состояний с выполненным действием, в том числе на реальном телефоне с клавиатурой.
Одна строка приёмки фиксирует сценарий и результат.
Предлагаемая приёмка, 08.10.2026; Google web.dev и W3C Reflow, проверены 08.10.2026. Список браузеров и устройств согласуют под аудиторию сайта.
6. Подписка нужна для очереди исправлений, разовый заказ для отдельной правки.
Когда помесячная работа имеет смысл? Когда после таблицы остаются формы, меню и старые разделы. Каждое исправление принимают отдельно, а очередь уточняют по найденным дефектам.
На 8 октября 2026 подписка на разработку «Один проект» стоит 250 000 ₽ в месяц. В ней один поток работы: пока одна задача исполняется, следующая ждёт.
Это цена месяца работы, а не адаптивной вёрстки одной страницы. Для отдельной мобильной правки разовый заказ может оказаться дешевле; сравнивайте его с очередью, которую успеете поставить и принять за месяц.
Срок тоже зависит от очереди. В разборе сроков разработки с агентами показано, почему ожидание и исполнение надо считать отдельно.
Если вести очередь некому, начните с разбора задачи с инженером. Передайте ведомость дефектов и условия приёмки; они дадут предмет разговора о бюджете.
Возврат дефекта тоже заносят в очередь. Причину исправляют в общем шаблоне и дополняют проверку, чтобы следующая правка не вернула старую поломку.
Что и как мы проверяли
| Факт | Что известно | Проверено |
|---|---|---|
| W3C Reflow | Ориентир 320 CSS px относится к обычному вертикальному контенту без потери информации и функций. У частей, требующих двух измерений, есть исключение, включая таблицы данных | 2026-10-08 |
| Google web.dev | Перелом компоновки выбирают по содержимому, а не по марке устройства. Эти рекомендации описывают поведение интерфейса, не бюджет исправления | 2026-10-08 |
| Наш интерфейс | Оригиналы записей 20.08 и 04.10.2026 о шаблоне карточек, таблице и графике. Клиентского кейса стоимости мобильной адаптации у нас нет, часы и рубли этих исправлений не измерены | 2026-10-08 |
| Тариф и очередь | Живая страница /services: «Один проект» 250 000 ₽ в месяц, один поток работы, следующая задача ждёт в очереди. Это цена месяца разработки, не отдельной адаптивной правки | 2026-10-08 |
| Wordstat | Собственный замер API по РФ 08.10.2026: «адаптивная верстка» 773, «адаптивная верстка сайта» 151 за последние 30 дней. Запросы пересекаются и включают обучающий спрос | 2026-10-08 |
7. Частые вопросы
Сколько стоит адаптивная вёрстка сайта?+
Для работающего сайта сумму получают после обследования шаблонов, состояний и общих элементов. Предложения сравнивают по одной ведомости и одинаковой приёмке; прайс новой страницы не заменяет эту оценку.
Можно адаптировать сайт без мобильного макета?+
Сначала надо выбрать поведение спорных элементов. Простой перенос блоков можно согласовать на работающем прототипе, а таблицу с несколькими связанными колонками придётся спроектировать до исправления.
Достаточно мобильного меню и меньшего шрифта?+
Нет. Надо проверить форму с ошибкой, длинные данные, загрузку и завершение действия. Меньший шрифт, скрывший переполнение, не делает таблицу читаемой.
Обязательно убирать горизонтальную прокрутку?+
У обычного текста страницы следует убрать. Для таблицы, смысл которой требует двух измерений, W3C допускает исключение; прокрутку ограничивают её контейнером, а окружающий текст укладывают в экран.
Агент может дать цену по ссылке на сайт?+
По открытой странице он увидит часть дефектов. Для оценки копий шаблонов и скрытых состояний исполнителю понадобятся доступ к коду, безопасные тестовые данные и согласованные сценарии.
Когда выбирать разовый заказ, а когда подписку?+
Для отдельной правки сравните разовую смету с помесячным форматом. Подписку оценивают по очереди изменений, которую заказчик готов поставить и принять. Без этой очереди месячный тариф не объясняет бюджет задачи.
Источники
- Google, Responsive web design basics · проверено 08.10.2026 — первоисточник
- W3C WAI, Understanding SC 1.4.10 Reflow · проверено 08.10.2026 — первоисточник
- inreallab, прайс разработки и поддержки · проверено 08.10.2026 — прайс исполнителя
- vibecoding.ru, устройство машины; поломки 20.08 и 04.10.2026 сверены по оригиналам журналов · 08.10.2026 — наш опыт
- vibecoding.ru, тариф и очередь разработки · проверено 08.10.2026 — наш продукт
- Wordstat, собственный замер API по РФ · 08.10.2026 — замер спроса
Запомнить
1. Сгруппируйте адреса по шаблонам и найдите копии общей разметки.
2. Добавьте ошибки, длинные данные и другие состояния в ведомость до оценки.
3. Разделите обследование, исправления, приёмку и выпуск в предложении исполнителя.
4. Поручите агенту выбранное правило, а результат примите по действию на телефоне.
5. Для отдельной правки сравните разовый заказ; для очереди оцените помесячную работу.