Как оценить стоимость верстки сайта и проверить готовую работу

Верстка сайта — это этап между макетом в Figma и программированием: верстальщик превращает картинку в HTML и CSS, которые одинаково работают в разных браузерах и на разных экранах. Владельцу сайта на этом этапе трудно понять, за что он платит и как принять результат без доступа к коду. Разбираем, чем верстка отличается от программирования, какие требования к ней можно записать в задание, сколько она стоит и занимает времени, что срывает сроки и как самому проверить готовые страницы.

Чем верстка отличается от программирования

Верстка отвечает за то, что пользователь видит на экране, а программирование за то, что происходит после его действий. Верстальщик собирает разметку, стили и поведение блоков при изменении размера экрана. Программист делает так, чтобы заявка сохранилась, личный кабинет открылся, а данные ушли в CRM или 1С.

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

По описанию в одном из отраслевых изданий, у сайта есть серверная часть, и он целиком загружается на хостинг. Когда браузер обращается к сайту, фронтенд (то, что видно в браузере) генерируется и загружается. Для заказчика это значит, что серверная и клиентская части живут отдельно, и одну и ту же задачу могут делать разные специалисты.

Поэтому границу зон лучше записать в задании. Укажите, кто делает формы, кто подключает систему управления сайтом, а кто обмен данными с CRM и 1С.

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

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

Какие требования предъявляют к качеству верстки

К верстке можно предъявить конкретные технические требования, которые записываются в задание и проверяются по готовому коду. Ниже требования из опубликованного стандарта одной студии и рекомендации по доступности из разбора для разработчиков. Это не закон, а рабочие критерии, которые можно взять за основу.

• Стандарт и совместимость. Верстка соответствует HTML5, семантична и кроссбраузерна. Кроссбраузерность здесь означает адекватное и максимально одинаковое отображение во всех современных браузерах на 3 версии ниже текущего релиза. Сайт не развалится у посетителя с не самым свежим браузером.
• Основная статья страницы. Ее обрамляют тегом article, и на странице он встречается в единственном экземпляре. Поисковикам и программам чтения проще понять, где главный текст.
• Теги внутри article. Допустимы только h1–h6, p, a, ul, ol, i, b, strong, em, table, section, u, s, img, figure и figcaption. Список ограничивает хаос в разметке статей.
• Меню. Каждый блок меню обрамляется тегом nav и размечается списком ul>li. Список ul получает уникальный класс для правил CSS, а пункт текущей страницы стилизуется классом selected.
• Файл стилей. В его начале идет сброс стилей (например, normalize.css, пусть даже избыточный): он приводит стандартные теги к одному виду в разных браузерах.
• Селекторы. Стили на пустые селекторы span, div и ul не пишутся. Для ul исключение — только типографика и блок normalize. Код остается читаемым для следующего программиста.

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

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

Контрастность сверяют с критериями WCAG через онлайн-сервис проверки контрастности. Как видят сайт люди с другим цветовосприятием, показывает симулятор в инструментах разработчика браузера Chrome: откройте панель Rendering и выберите нужную особенность в пункте Emulate vision deficiencies.

Сколько стоит верстка сайта в 2026 году

Цена зависит от типа проекта. Ориентиры на 2026 год из одного экспертного обзора собраны в таблице.

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

У многостраничного сайта число страниц само по себе мало что говорит о цене: дорогими бывают именно уникальные шаблоны.

Отдельный множитель — адаптив. Верстка только под десктоп и верстка под 3 размера экрана различаются в полтора-два раза по трудозатратам. Если в смете цена подозрительно низкая, возможно, адаптив в нее не входит.

В смете пропишите, сколько размеров экрана включено в цену. Это один пункт, который экономит споры при сдаче.

Все эти цифры — рыночные ориентиры, а не тариф конкретной студии. Точную цену дает только ваш макет: его сложность, число шаблонов и количество размеров экрана.

Сколько времени занимает верстка и из каких этапов складывается срок

Верстка отдельного срока не имеет: она встроена в общий график разработки. По оценке одного из экспертных разборов, лендинг реально запустить за 2–4 недели, корпоративный сайт занимает от 1,5 до 3 месяцев, интернет-магазин от 2 до 4.

Верстка начинается после утвержденного макета и идет вместе с подключением CMS и форм. Полный срок раскладывается по этапам:

• Бриф и аналитика: от 3 до 7 дней. Фиксируют задачи бизнеса, структуру, требования, интеграции и ответственных за контент.
• Прототип и структура: от 1 до 2 недель. Это скелет страниц без цвета и картинок, на нем видны логика блоков и путь пользователя.
• Дизайн: от 2 до 4 недель. Прототип превращается в макеты с типографикой, цветом, состояниями кнопок и адаптивом под мобильные.
• Верстка и программирование: от 3 до 6 недель. Верстальщик собирает адаптивную верстку, разработчик подключает CMS, шаблоны, формы и интеграции.
• Тестирование и запуск: от 1 до 2 недель. Проверяют формы, верстку в разных браузерах, скорость, мобильную версию и интеграции.

Контент идет параллельно: на тексты, фото и карточки услуг уходит от 1 до 3 недель. В идеале его готовят вместе с дизайном и версткой, иначе он станет узким местом.

На итоговый срок влияют 4 вещи: число страниц и уникальных шаблонов, сложность дизайна, нужные интеграции (оплата, CRM, 1С, службы доставки) и то, как быстро заказчик отвечает на вопросы. Последнее зависит только от вас.

Что чаще всего срывает сроки верстки

Сроки чаще всего сдвигаются не из-за кода, а из-за процесса на стороне заказчика. По наблюдениям одного из экспертных разборов, это 4 типичные причины.

• Долгие согласования. Макет неделю ждет решения. Назначьте срок ответа и держите его.
• Контент частями и с опозданием. Готовьте тексты и фото параллельно с дизайном и версткой.
• Расширение задачи по ходу. Появляется идея добавить еще каталог и личный кабинет. Каждая такая мелочь тянет за собой дизайн, верстку и тесты.
• Нет одного ответственного. Правки приходят от 5 человек и противоречат друг другу. Выберите одного, кто собирает замечания и принимает решение.

Отдельный источник задержек — интеграции с чужими сервисами. Здесь команда зависит от их поддержки и документации, и ускорить это нельзя.

Расширение задачи само по себе не беда. Это нормально, если все понимают, что срок и бюджет сдвигаются. Плохо, когда новые пожелания пытаются втиснуть в старую дату.

Отсюда простое правило. Каждое изменение фиксируйте письменно и сразу с новой датой и новой суммой. Тогда спор «почему не успели» просто не возникнет.

Как проверить адаптивность без доступа к коду

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

Инструменты разработчика в браузере. Они есть в большинстве популярных браузеров: Google Chrome, «Яндекс Браузер», Firefox и Safari. Названия пунктов различаются: в Google Chrome на macOS это «Просмотреть код», в «Яндекс Браузере» «Исследовать элемент». Плюс — ничего не нужно ставить. Минус — смотреть приходится по одному устройству за раз.

По описанию в одном из отраслевых изданий, порядок такой: вызовите на странице правой кнопкой мыши контекстное меню и выберите просмотр кода. Сверху появится строка с выпадающим списком устройств, где видно, как сайт отображается на выбранном экране.

Расширение для Chrome. Оно показывает панель адаптивности сразу на нескольких устройствах. Можно выбрать набор устройств, их ориентацию (вертикальную или горизонтальную) и масштаб. Плюс — сравнение на одном экране. Минус — нужна установка и работает только в Chrome.

Отдельный браузер для разработки и тестирования. Он ставится на Windows, macOS и Linux. В нем встроены смартфоны, планшеты, ноутбуки и компьютеры, их показывают по отдельности или одновременно. Плюс — удобное сравнение размеров. Минус — отдельная программа на компьютере.

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

Для приемки работы пройдите по чек-листу:

• откройте сайт на 2–3 реальных телефонах;
• проверьте каждую типовую страницу в нескольких размерах экрана;
• убедитесь, что блоки не наезжают друг на друга;
• проверьте вертикальную и горизонтальную ориентацию.

Что проверить в мобильной версии и скорости страниц

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

Самостоятельная проверка занимает около часа и не требует знания кода. Порядок такой:

1. Откройте сайт на нескольких телефонах, лучше разных по размеру, и в разных браузерах.
2. Сядьте за компьютер и медленно сужайте окно браузера. Так вы увидите промежуточные размеры экрана, которых нет в макете.
3. Заполните каждую форму с телефона и убедитесь, что она отправляется и показывает понятное сообщение при ошибке.
4. Нажмите на кнопки и ссылки пальцем: по ним должно быть удобно попадать.
5. Проверьте, как выглядит товар с очень длинным названием и статья без картинки. Хорошая верстка выдерживает такой реальный контент.

Скорость загрузки измеряют отдельными сервисами проверки, которые показывают, как быстро и стабильно отрисовывается страница. Пороговые значения смотрите в документации самих сервисов.

Отчет такого сервиса помогает сформулировать задачу верстальщику. Вместо «сайт тормозит» вы сможете назвать конкретную страницу и конкретную проблему.

Главное о верстке и приемке работы

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

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