Верстка превращает дизайн-макет в HTML-страницы со стилями и адаптацией под экраны. Верстальщик отвечает за совпадение с макетом, отображение в браузерах и на телефоне, скорость загрузки. Лендинг верстают 3–5 дней, многостраничный сайт — 2–4 недели. Принимают верстку по трем признакам — совпадение с макетом, поведение на мобильных, скорость.
Текст для заказчика, который платит за строку «верстка» в смете и хочет понять, что именно получает за эти деньги, не умея писать код.
Верстка между дизайном и программированием
Цепочка работ выглядит так: бриф → макет → верстка → программирование → запуск. У верстки как этапа есть четкий вход и четкий выход, ее не путают ни с дизайном, ни с разработкой. Дизайнер рисует картинку в графическом редакторе, верстальщик превращает ее в страницу, которую понимает браузер, программист оживляет формы, корзину и личный кабинет.
Если в смете нет отдельной строки на верстку, спросите у подрядчика, кто ее делает и входит ли туда адаптив под телефоны: эту работу часто молча включают во «фронтенд».
Что передать верстальщику
Чтобы верстка не превратилась в угадывание, верстальщику нужен полный комплект: макет в Figma с мобильной и десктопной версией, UI-kit со шрифтами, цветами и кнопками, система отступов, реальные тексты, фото и логотип в исходниках.
- •Макет без мобильной версии — верстальщик додумывает адаптив сам
- •«Рыба» вместо текстов — при замене на реальный контент блоки ломаются
- •Картинки из скриншотов вместо исходников — качество и вес страницы страдают
Пример: в макете пять карточек товара, а через месяц добавится шестая. Договоритесь о ее поведении сразу — перенесется ли она на новую строку или карточки сожмутся в ряд, — иначе сетку придется переверстывать заново.
Что получит заказчик
На выходе — файлы HTML, CSS, при необходимости JS, папка с изображениями и понятная структура проекта: index.html, /css, /img, /js. Имена файлов — латиницей и через дефис. Плохой пример — «новый сайт финал 2.htm»: такое имя ничего не говорит о содержимом и плохо переносится между системами.
Эти файлы остаются у заказчика: их можно передать другому подрядчику или подключить к системе управления сайтом без переделки. Если сайт пойдет в CMS, шапку, футер и карточки нужно вынести в повторяемые блоки, иначе каждую правку придется вносить вручную на каждой странице.
Кто верстает сайты в 2026 году
Отдельного верстальщика в студиях встречают все реже. Верстка и JavaScript теперь живут в одних компонентах интерфейса, и студии проще держать одного фронтендера на весь интерфейс, чем передавать макет из рук в руки и сверять стыки. Профессия никуда не делась, просто сменила название в штатке.
Для заказчика это значит: строки «верстка» в смете может не быть — она спрятана во «фронтенде». Если подрядчик называет одну сумму за фронтенд, попросите показать, сколько в ней приходится на перенос макета и адаптив.
И попросите пример уже сверстанной страницы — откройте его на своем телефоне и пролистайте до конца.
Виды верстки и за что доплачивают
Табличная верстка осталась в истории веба, для рабочего сайта она не годится. Основа сегодня — блочная: страница собирается из независимых блоков под управлением CSS. Каждый блок живет отдельно, поэтому страницу легко править и дополнять. Резиновая верстка тянет элементы по ширине в процентах, адаптивная на контрольных точках перестраивает колонки. Google рекомендовал responsive-подход в июне 2012 года, так что адаптив давно норма, а не опция.
Адаптивная верстка как база
Адаптив входит в любую нормальную смету без доплаты: верстальщик сам решает, как блоки десктопа сложатся на узком экране. Отдельный макет под планшет — другое дело. Дизайнер рисует еще одну версию, и ее нужно воспроизвести точно, поэтому доплата здесь честная. То же со сложной перестройкой, когда блоки меняют порядок и вид. Если адаптив вынесли в «опцию», спросите, что будет без нее: сайт на телефоне просто уменьшится? И попросите перечислить экраны и блоки, за которые берут деньги.
Семантика и pixel perfect
Семантическая верстка — теги header, nav, main, footer и один H1 на странице. Сверху она почти не стоит денег, но помогает поиску и доступности. Pixel perfect съедает время и оправдан для брендовых промо-страниц: там каждый отступ — часть образа бренда. Для каталога и корпоративного сайта хватает точности «на глаз при наложении».
На что обратить внимание:
- •доплата за семантику почти не оправдана, это часть нормальной работы;
- •доплата за pixel perfect честная для промо, лишняя для каталога.
Стоимость и сроки верстки
Цену и срок двигает не число страниц, а число уникальных шаблонов. Лендинг — это один сценарий страницы, поэтому верстка занимает 3–5 дней. Многостраничный сайт собирается из нескольких разных шаблонов и верстается 2–4 недели. Каталог дольше: к базе добавляются карточка товара, листинг и корзина с фильтрами и состояниями.
Пересчитайте шаблоны в макете до запроса оценки.
Прием верстки без разработчика
Двенадцать проверок закрывают приемку без единой строчки кода. Они делятся на две группы: внешний вид, затем телефон и скорость. Первая группа отвечает за то, как сайт выглядит, вторая — за то, как он работает у реального посетителя. Инструменты — только браузер, режим устройств в DevTools и W3C Markup Validation Service. Валидатор нужен, чтобы увидеть ошибки разметки, которые ломают блоки.
Если хотя бы одна проверка из первой группы не прошла, работу не подписывают, а возвращают списком замечаний с точным указанием, что не так. Удобно распечатать список и ставить отметку у каждого номера.
Проверки внешнего вида
- •Скриншот, наложенный на макет, не показывает сдвигов блоков и расхождений в размерах.
- •Шрифты и цвета те же, что в UI-kit.
- •Отступы между блоками одинаковые, без случайных сдвигов.
- •Кнопки и ссылки меняют вид при наведении.
- •Длинный текст в заголовке не растягивает и не ломает блок.
- •Пустая карточка не разваливается, переполненная не выходит за границы.
Практический прием: впишите в блоки текст подлиннее реального и посмотрите, что поплывет.
Проверки телефона и скорости
- •На узком экране нет горизонтальной прокрутки.
- •Меню открывается пальцем без промахов.
- •Форма отправляется с телефона и показывает, что заявка ушла.
- •Страница увеличивается до 200% без поломок.
- •Картинки весят не больше, чем нужно для их размера на экране, а не выгружены в исходном размере.
- •Блоки не прыгают в процессе загрузки.
Проверяйте на своем телефоне и минимум в двух браузерах: то, что работает в одном, может расползтись в другом.
Допустим, форма заявки на телефоне не отправляется. Это повод вернуть замечание, а не подписывать акт с оговоркой «доработаем потом»: потом заявки уже потеряны.
Валидная верстка, кроссбраузерность и доступность
Валидный код сам по себе позиции не поднимает, но ошибки разметки ломают блоки и дают скачки макета. Кроссбраузерность бьет по деньгам прямо: что сломалось в одном браузере, то теряет его пользователей. Доступность задает ГОСТ Р 52872-2019: контраст элементов не ниже 3:1, масштаб до 200% без горизонтальной прокрутки, alt у картинок.
На что обратить внимание:
- •в отчете о коде только предупреждения, без ошибок;
- •сайт работает в самых частых браузерах из статистики посещений, на компьютере и телефоне;
- •контраст и масштаб держат порог ГОСТ.
Если все это закрыто, база достигнута.
Когда верстка не нужна
Конструкторы, готовые темы и дизайн-системы закрывают задачу без отдельной верстки, когда нужен сайт-визитка, проверка гипотезы или лендинг на пару месяцев. Если нужно быстро и типово, шаблон дешевле.
Если дизайн уникальный, сайт будет расти и его подключат к CMS или бэкенду, верстка окупается: под растущий проект шаблон придется ломать, а это дороже.
У шаблона есть свои риски:
- •тяжелый код, который замедляет загрузку;
- •ограничения по правкам, когда дизайн начнет уходить от исходного;
- •лишние функции темы, за которые платит скорость сайта.
Выпишите три обязательных для сайта требования и сверьте, закрывает ли их готовая тема.
Нужна верстка по готовым макетам или сайт целиком — разработка от 50 000 ₽, оценим смету по вашим макетам: раздел «Сайты»
Источники
