Вёрстка сайта: что это, виды и как проходит

Коротко. Вёрстка сайта — это перевод дизайн-макета в код на HTML и CSS с базовым JavaScript, чтобы страница одинаково корректно выглядела и работала в разных браузерах и на любых устройствах. Стандарт 2026 года — семантическая блочная вёрстка на Flexbox и CSS Grid, адаптив по принципу mobile-first, доступность и соответствие Core Web Vitals. От качества вёрстки напрямую зависят скорость сайта, SEO и конверсия.

По данным StatCounter, в сентябре 2026 года 34,17% просмотров страниц в России пришлось на смартфоны, 64,82% — на компьютеры и ещё 1,01% — на планшеты. Каждый третий посетитель открывает сайт с телефона, остальные — с большого экрана, и вёрстка сайта обязана одинаково хорошо работать на обоих классах устройств. Одновременно Google оценивает пользовательский опыт по метрикам Core Web Vitals, на которые вёрстка влияет напрямую, а справочник MDN каждый год пополняется новыми возможностями HTML и CSS, которые меняют сам подход к работе.

Вёрстка — этап между дизайном и программированием, который заказчик редко видит, но всегда чувствует: по тому, как быстро открывается страница, не «едет» ли меню на смартфоне и нажимается ли кнопка заявки. В YuSMP Group этот этап мы закрываем в рамках frontend-разработки: верстаем макеты из Figma и подключаем их к CMS или фреймворку.

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

Что такое вёрстка сайта простыми словами

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

Удобнее всего объяснять вёрстку через аналогию с человеком:

• HTML — скелет. Язык разметки описывает структуру: где заголовок, где абзац, где меню, кнопка, картинка или форма.
• CSS — внешность. Таблицы стилей задают цвета, шрифты, отступы, сетку, расположение блоков и то, как всё это перестраивается на разных экранах.
• JavaScript — поведение. Скрипты отвечают за реакцию на действия пользователя: открыть мобильное меню, пролистать слайдер, проверить поле формы перед отправкой.

На входе у верстальщика — макет в Figma с UI-китом (набором кнопок, полей, цветов и шрифтов) и вариантами страниц для разных экранов. На выходе — набор HTML/CSS/JS-шаблонов, которые затем подключают к системе управления сайтом или фреймворку, чтобы контент можно было менять без программиста. Хорошая вёрстка выглядит как макет, быстро загружается, читается поисковыми роботами и не ломается при добавлении нового текста.

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

Над сайтом обычно работают три роли, и вёрстка находится ровно посередине:

• Дизайнер придумывает, как сайт выглядит: композицию, цвета, типографику, состояния элементов. Результат — макет, то есть картинка.
• Верстальщик переводит макет в код, который браузер умеет показывать, и следит, чтобы страница корректно отображалась на всех устройствах.
• Бэкенд-программист отвечает за то, что происходит на сервере: базу данных, личный кабинет, оплату, интеграции с CRM и отправку заявок.

Отдельно стоит сказать о фронтенде. Вёрстка — базовая часть фронтенд-разработки, но не вся она: фронтенд-разработчик дополнительно строит сложные интерфейсы на React или Vue, управляет состоянием приложения, работает с API и бизнес-логикой на стороне клиента. Подробно о профессии мы рассказали в статье что такое фронтенд-разработка, а о границе между клиентской и серверной частью — в материале фронтенд и бэкенд: в чём разница.

Зачем нужна качественная вёрстка: скорость, SEO, конверсия

Качественная вёрстка — это код, который быстро загружается, правильно читается поисковыми системами и вспомогательными технологиями и не мешает пользователю выполнить целевое действие. Один и тот же макет можно сверстать так, что страница откроется за секунду, а можно так, что она будет «прыгать» при загрузке и тормозить на каждом клике. Разница видна в трёх местах.

Скорость и Core Web Vitals. Google считает страницу удобной, если по метрикам Core Web Vitals она укладывается в пороги «хорошо»: LCP (отрисовка основного контента) — не дольше 2,5 с, INP (отклик на действия) — не больше 200 мс, CLS (визуальная стабильность) — не выше 0,1. Оценка идёт по 75-му перцентилю реальных визитов отдельно для мобильных и десктопа. Все три метрики во многом определяются вёрсткой: размерами и форматом картинок, загрузкой шрифтов, объёмом скриптов и тем, зарезервировано ли место под элементы. Подробнее — в статье Core Web Vitals: что это и как влияет на позиции.

Индексация и SEO. Поисковый робот читает не картинку, а код. Если заголовки размечены тегами h1–h3 по иерархии, основной контент находится в <main> и <article>, а у изображений есть атрибут alt, роботу проще понять, о чём страница. Если же весь текст свёрстан безликими блоками, а заголовок нарисован картинкой, страница проигрывает конкурентам даже при хорошем контенте.

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

Как выглядит вёрстка: пример кода

Пример вёрстки — лучший способ увидеть, как макет превращается в код. Ниже — шапка сайта с логотипом и меню: сначала семантическая HTML-разметка, затем стили на Flexbox с медиазапросом.

<header class="site-header">
  <a class="logo" href="/">Логотип</a>
  <nav aria-label="Главное меню">
    <ul class="menu">
      <li><a href="/services">Услуги</a></li>
      <li><a href="/cases">Кейсы</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}
.menu { display: none; gap: 24px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) {
  .menu { display: flex; }
}

Что здесь происходит:

• <header> и <nav> — семантические теги: браузер, поисковик и скринридер понимают, что это шапка и навигация, а не просто блоки.
• aria-label подписывает меню для людей, которые пользуются программами экранного доступа.
• Меню свёрстано списком <ul> — так правильно с точки зрения структуры: это перечень ссылок.
• display: flex выстраивает логотип и меню в строку, а justify-content: space-between разводит их по краям.
• Стили написаны по принципу mobile-first: по умолчанию меню скрыто (на смартфоне вместо него будет кнопка-бургер), а медиазапрос min-width: 768px показывает его на экранах от 768 пикселей.

Если хочется разобраться, как стили подключаются к странице, — у нас есть отдельная инструкция как подключить CSS к HTML.

Какие бывают виды вёрстки

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

Табличная вёрстка

Табличная вёрстка — способ, при котором страница целиком строится из HTML-таблиц: шапка, колонки и подвал размещаются в ячейках. В конце 1990-х и начале 2000-х это был единственный надёжный способ выстроить сложную композицию, потому что CSS поддерживался браузерами слабо и непредсказуемо.

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

Блочная вёрстка: Flexbox и CSS Grid

Блочная вёрстка — это построение страницы из блоков (контейнеров), расположение которых задаётся средствами CSS. Именно она — основа современной вёрстки в 2026 году. Раньше блоки выстраивали с помощью обтекания (float), сейчас для этого есть два специальных инструмента:

• Flexbox — одномерная раскладка: элементы выстраиваются в строку или в столбец. Подходит для меню, рядов карточек, выравнивания кнопки и текста внутри блока.
• CSS Grid — двумерная раскладка: строки и колонки одновременно. Подходит для каркаса страницы, галерей, сложных сеток лендингов и дашбордов.

На практике их комбинируют: Grid задаёт общую сетку страницы, Flexbox выравнивает содержимое внутри отдельных блоков. Оба инструмента поддерживаются всеми актуальными браузерами — это легко проверить на Can I use.

Семантическая вёрстка

Семантическая вёрстка — это разметка, в которой каждый тег соответствует смыслу содержимого: шапка размечена <header>, навигация — <nav>, основной контент — <main>, статья — <article>, подвал — <footer>, а заголовки идут по иерархии от h1 к h3. Противоположность — «div-суп», когда вся страница собрана из одинаковых <div>, и понять её структуру можно только по классам.

Семантика даёт три практических эффекта. Поисковым системам проще выделить основной контент и заголовки. Скринридеры позволяют незрячим пользователям перемещаться по разделам страницы. А AI-ассистенты и генеративный поиск, которые вырезают из страниц отдельные фрагменты для ответов, точнее находят нужный абзац. Справочник тегов и их назначения есть на MDN.

Валидная вёрстка

Валидная вёрстка — это код, который соответствует спецификациям HTML и CSS: теги правильно закрыты и вложены, атрибуты допустимы, идентификаторы не повторяются. Проверить разметку можно бесплатным валидатором W3C.

Валидность снижает риск того, что разные браузеры по-разному «додумают» ошибку в коде, и упрощает поддержку. Но она не гарантирует, что страница быстрая, удобная и доступная: можно написать абсолютно валидный код, который грузится 10 секунд и разваливается на смартфоне. Поэтому валидность — гигиенический минимум, а не показатель качества.

Сведём виды вёрстки в одну таблицу:

Вид	Как устроена	Плюсы	Минусы	Где применяется в 2026
Табличная	Страница собрана из HTML-таблиц	Предсказуема в старых и почтовых клиентах	Громоздкий код, плохая адаптивность, путаница для поисковиков и скринридеров	Только email-рассылки
Блочная (float)	Блоки выстраиваются обтеканием	Работает даже в очень старых браузерах	Много «костылей», сложно поддерживать	Унаследованные проекты
Блочная (Flexbox, Grid)	Раскладка задаётся современными средствами CSS	Гибкость, короткий код, простой адаптив	Требует знания современных стандартов	Стандарт для всех новых сайтов
Семантическая	Теги соответствуют смыслу содержимого	Лучше SEO, доступность, понятная структура	Требует дисциплины и продуманной иерархии	Обязательна для любого сайта
Валидная	Код соответствует спецификациям W3C	Предсказуемость в браузерах, простая поддержка	Сама по себе не гарантирует скорость и удобство	Базовое требование к качеству

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

Фиксированная, резиновая, адаптивная и отзывчивая: в чём разница

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

• Фиксированная — у страницы постоянная ширина в пикселях (например, 1200 px). На узком экране появляется горизонтальная прокрутка, на широком — пустые поля по бокам.
• Резиновая — ширина блоков задана в процентах и растягивается под окно. На очень широких экранах строки становятся слишком длинными, на узких — блоки сжимаются до нечитаемого состояния.
• Адаптивная — у страницы несколько фиксированных раскладок, которые переключаются медиазапросами на контрольных точках (брейкпоинтах).
• Отзывчивая (responsive) — гибкая сетка, гибкие изображения и медиазапросы вместе: макет плавно подстраивается под любую ширину, а на брейкпоинтах меняет композицию.

Подход	Ширина	Поведение на мобильных	Когда уместен
Фиксированный	Постоянная, в пикселях	Горизонтальный скролл, мелкий текст	Практически не применяется; внутренние панели только для десктопа
Резиновый	В процентах от окна	Блоки сжимаются, могут стать нечитаемыми	Простые страницы, отдельные элементы внутри адаптивной сетки
Адаптивный	Несколько фиксированных раскладок	Отдельная раскладка под смартфон	Сайты со строго заданными макетами под каждый класс устройств
Отзывчивый	Гибкая, с ограничениями min/max	Плавно подстраивается под любой экран	Стандарт для новых сайтов в 2026 году

Сегодня под словами «адаптивная верстка» на практике обычно имеют в виду отзывчивый подход, построенный по принципу mobile-first: стили сначала пишут для самого узкого экрана, а затем медиазапросами min-width добавляют правила для более широких. Так базовая версия получается лёгкой, а сложность наращивается только там, где для неё есть место.

Брейкпоинты не стоит брать «из головы» или из чужого фреймворка: их задают контент и макет — ширина, при которой композиция начинает ломаться. Для ориентира часто используют значения около 360, 768, 1024 и 1440 пикселей (типичные смартфон, планшет, ноутбук и большой монитор), но в каждом проекте их уточняют. Чем адаптивная вёрстка отличается от отдельной мобильной версии сайта, мы разбирали в статье адаптивная вёрстка или мобильная версия.

Как проходит вёрстка сайта: этапы

Вёрстка сайта проходит в девять последовательных этапов — от приёма макета до передачи готовых шаблонов программистам. Порядок почти не зависит от размера проекта: у лендинга этапы короче, у интернет-магазина — длиннее, но пропускать их нельзя.

1. Приём и анализ макета. Верстальщик проверяет, что в Figma есть UI-кит, все состояния элементов (наведение, фокус, ошибка, неактивная кнопка) и макеты под ключевые ширины экрана. Недостающее запрашивают у дизайнера до начала работы — так дешевле. Как подготовить макет со стороны заказчика, мы рассказали в статье Figma для заказчика.
2. Структура проекта и сборка. Настраивают репозиторий, сборщик (например, Vite), препроцессор стилей, линтеры и форматирование кода. Сборка автоматически оптимизирует файлы и избавляет от ручной рутины.
3. HTML-каркас и семантика. Размечают структуру страниц семантическими тегами: шапка, навигация, основной контент, секции, подвал, иерархия заголовков. На этом шаге закладывается то, как страницу прочитают поисковики и скринридеры.
4. Стили: сетка, типографика, компоненты. Переносят из макета цвета, шрифты, отступы и сетку, верстают повторяющиеся компоненты — кнопки, карточки, поля форм — так, чтобы их можно было переиспользовать на всех страницах.
5. Адаптив под брейкпоинты. Настраивают перестроение страниц под смартфоны, планшеты и широкие экраны, проверяют промежуточные ширины, а не только контрольные точки из макета.
6. Интерактив на JavaScript. Оживляют элементы: мобильное меню, слайдеры, вкладки, модальные окна, валидацию форм. Скрипты пишут экономно, чтобы не ухудшать отклик страницы.
7. Оптимизация. Переводят изображения в WebP или AVIF, включают ленивую загрузку, выделяют критический CSS, подключают шрифты с правильной стратегией отображения и проверяют вес страницы.
8. Тестирование и правки. Проверяют соответствие макету, работу в разных браузерах и на реальных устройствах, валидность кода, доступность с клавиатуры и показатели Lighthouse. Найденные ошибки исправляют до сдачи.
9. Передача и интеграция. Готовые шаблоны подключают к CMS или фреймворку, чтобы бэкенд-разработчики вывели в них реальные данные, а контент-менеджер мог менять тексты без участия верстальщика.

Вёрстка — лишь один из этапов создания сайта. Полный путь от брифа до запуска описан в статье этапы разработки сайта.

Современные стандарты вёрстки в 2026 году

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

Mobile-first и адаптивность

Mobile-first — принцип, при котором вёрстку начинают с самого узкого экрана и постепенно расширяют. Даже если основная аудитория сидит за компьютерами, как в среднем по России, треть просмотров со смартфонов — слишком большая доля, чтобы считать мобильную версию второстепенной. Плюс Google индексирует сайты преимущественно по мобильной версии страницы. Практическое правило: нет горизонтальной прокрутки ни на одной ширине от 320 пикселей, текст читается без увеличения, кнопки удобно нажимать пальцем.

Доступность (a11y) и WCAG 2.2

Доступность (accessibility, сокращённо a11y) — это возможность пользоваться сайтом людям с нарушениями зрения, слуха, моторики, а также всем, кто оказался в неудобной ситуации: на ярком солнце, с одной свободной рукой, с медленным интернетом. Международный ориентир — рекомендации WCAG 2.2. В вёрстке это означает:

• достаточный контраст текста и фона;
• осмысленный атрибут alt у изображений;
• видимый фокус на ссылках, кнопках и полях;
• полную навигацию с клавиатуры — без «ловушек» в модальных окнах;
• подписи у полей форм и понятные сообщения об ошибках.

Подробнее о том, как проектировать и проверять доступные интерфейсы, — в нашей статье доступность интерфейсов.

Производительность и Core Web Vitals

Производительность — это скорость, с которой страница появляется на экране и откликается на действия. На каждую из метрик Core Web Vitals вёрстка влияет конкретными решениями:

• LCP ухудшают тяжёлые неоптимизированные изображения в первом экране, блокирующие стили и скрипты, поздняя загрузка главной картинки.
• INP ухудшают громоздкие скрипты, которые занимают основной поток браузера, и избыточные обработчики событий.
• CLS ухудшают картинки и баннеры без заданных размеров, шрифты, которые при загрузке меняют ширину текста, и блоки, вставляемые над уже видимым контентом.

Поэтому верстальщик указывает ширину и высоту изображений, резервирует место под динамические блоки, подгружает картинки ниже первого экрана лениво и следит за объёмом JavaScript.

Компонентный подход и методологии

Компонентный подход — это вёрстка интерфейса из независимых переиспользуемых блоков (кнопка, карточка, форма), каждый из которых описан один раз и одинаково выглядит на всех страницах. Он же главный способ ускорить вёрстку: новая страница собирается из готовых компонентов, а не пишется с нуля.

Порядок в именовании классов поддерживают методологии, самая известная в Рунете — БЭМ (Блок, Элемент, Модификатор). На больших проектах компоненты объединяют в дизайн-систему и документируют в Storybook, чтобы дизайнеры, верстальщики и разработчики говорили на одном языке. Как это устроено, мы разбирали в статье Storybook: библиотека компонентов для фронтенда.

Инструменты верстальщика

Инструменты верстальщика — это программы и сервисы, которые помогают получить макет, написать код, собрать проект и проверить результат. Набор зависит от команды, но базовые категории одинаковы почти везде:

Категория	Инструменты	Для чего
Макеты	Figma	Получение размеров, цветов, шрифтов, экспорт графики, просмотр состояний элементов
Редакторы и IDE	VS Code, WebStorm	Написание кода с подсветкой, автодополнением и проверкой ошибок
CSS-фреймворки	Tailwind CSS, Bootstrap	Готовые утилиты и компоненты для быстрой вёрстки типовых интерфейсов
Препроцессоры	Sass	Переменные, вложенность и миксины для удобной работы с большими стилями
Сборщики	Vite	Сборка проекта, оптимизация файлов, локальный сервер с мгновенным обновлением
Проверка качества	Chrome DevTools, Lighthouse, W3C Validator, axe	Отладка, замер производительности, валидность кода, аудит доступности
Кроссбраузерность	Can I use, BrowserStack	Поддержка свойств CSS и HTML браузерами, тестирование на реальных устройствах

Инструменты не заменяют понимания основ: фреймворк ускоряет работу, но если верстальщик не знает, как устроены Flexbox и каскад стилей, он будет бороться с фреймворком, а не пользоваться им. Справочники по свойствам — на MDN.

Как проверить качество вёрстки: чек-лист приёмки

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

• Страница соответствует макету в разумных допусках: шрифты, цвета, отступы и порядок блоков совпадают.
• Адаптив проверен на реальных смартфоне и планшете, а не только в режиме эмуляции браузера.
• Нет горизонтальной прокрутки ни на одной ширине экрана от 320 пикселей.
• Сайт корректно работает в Chrome, Safari, Firefox и Яндекс Браузере, включая Safari на iPhone.
• Валидатор W3C не показывает критических ошибок.
• Lighthouse и PageSpeed Insights не показывают проблем с LCP, INP и CLS.
• На каждой странице ровно один заголовок h1, подзаголовки идут по иерархии.
• У всех содержательных изображений заполнен атрибут alt.
• Все интерактивные элементы имеют состояния наведения, фокуса и ошибки, как в макете.
• Формы отправляются, показывают понятные ошибки, а поле ввода не перекрывается клавиатурой на смартфоне.
• Шрифты корректно отображают кириллицу, включая букву «ё» и знаки рубля и тире.
• Страница приемлемо открывается при медленном мобильном интернете (режим троттлинга в DevTools).
• По сайту можно пройти с клавиатуры клавишей Tab, фокус всегда виден.
• Длинные заголовки и тексты не ломают блоки — проверьте, вставив текст вдвое длиннее, чем в макете.
• Если это было в ТЗ, проверены версия для печати и тёмная тема.

Удобно зафиксировать этот список в договоре или ТЗ как критерии приёмки — тогда споров о том, «готово» ли, не возникает.

Частые ошибки вёрстки и сложности

Ошибки вёрстки — это решения, которые не видны на скриншоте, но проявляются при реальном использовании: на другом устройстве, с другим текстом или при медленном интернете. Чаще всего встречаются:

• Div-суп без семантики. Страница собрана из одинаковых div-ов, поисковики и скринридеры не понимают структуру.
• Фиксированные высоты блоков. Стоит контент-менеджеру добавить строку текста — она вылезает за пределы карточки.
• Картинки без размеров. Браузер не резервирует место, и при загрузке контент «прыгает» — растёт CLS.
• Войны !important. Стили перебивают друг друга принудительно, и любая правка ломает что-то в другом месте.
• Нет состояний элементов. Кнопки не реагируют на наведение и фокус, поля не показывают ошибку.
• Игнор Safari. Вёрстку проверили только в Chrome, а у пользователей iPhone съезжают блоки или не работают формы.
• Тяжёлые шрифты и скрипты. Подключены все начертания шрифта и несколько библиотек ради одного слайдера.
• Текст картинкой. Заголовки и цены вставлены изображениями — их не видит поисковик и не может прочитать скринридер.
• Несколько h1 на странице. Заголовки выбраны по размеру шрифта, а не по смыслу.

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

Сколько стоит и сколько длится вёрстка сайта

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

Фактор	Как влияет на трудоёмкость
Число уникальных шаблонов	Главный фактор: верстается каждый уникальный шаблон, а типовые страницы (карточки товаров, статьи) собираются из него
Количество брейкпоинтов	Каждая дополнительная раскладка под класс устройств добавляет работу по адаптиву и тестированию
Анимации и интерактив	Сложные анимации, слайдеры, фильтры и калькуляторы требуют JavaScript и отдельной отладки
Требование pixel-perfect	Точное попиксельное совпадение с макетом увеличивает время на сверку и правки
Список поддерживаемых браузеров	Поддержка устаревших версий браузеров требует обходных решений
Требования доступности	Соответствие WCAG добавляет работу по разметке, фокусу, контрасту и тестированию
Интеграция с CMS или фреймворком	Нарезка шаблонов под конкретную систему — отдельный объём работы
Качество макета	Неполный UI-кит и отсутствие мобильных макетов увеличивают сроки за счёт уточнений

Ориентиры по типам проектов удобнее давать в терминах трудоёмкости, а не в рублях:

• Лендинг — один уникальный шаблон с несколькими секциями; объём зависит прежде всего от анимаций и числа адаптивных раскладок.
• Корпоративный сайт — обычно от нескольких до полутора десятков уникальных шаблонов: главная, услуги, кейсы, статьи, контакты.
• Интернет-магазин — каталог с фильтрами, карточка товара, корзина, оформление заказа, личный кабинет; много состояний и сценариев, которые нужно проверить.
• Веб-сервис — сложные интерфейсы с таблицами, формами и дашбордами; здесь вёрстка уже неотделима от фронтенд-разработки на фреймворке.

Для ориентира по нашим ценам: frontend-разработка в YuSMP Group — от 60 000 ₽, создание сайта под ключ — от 90 000 ₽. Точная стоимость зависит от факторов из таблицы, поэтому мы оцениваем проект по макету или ТЗ. Если нужен не только код по готовому дизайну, а сайт целиком — от прототипа и дизайна до запуска и продвижения, — смотрите создание сайтов под ключ.

Совет заказчику: просите оценку в разрезе шаблонов и требований (брейкпоинты, браузеры, доступность). Так вы сможете сравнивать предложения подрядчиков по существу, а не по итоговой цифре, за которой может скрываться разный объём работ.

Найдем лучшее решение для вас

Частые вопросы о вёрстке сайта

Чем вёрстка отличается от фронтенд-разработки?

Вёрстка — часть фронтенд-разработки: перевод макета в HTML и CSS с базовым JavaScript для интерактивных элементов. Фронтенд шире: кроме вёрстки он включает сложную логику интерфейса на фреймворках вроде React или Vue, работу с API, управление состоянием приложения и производительность. Для лендинга или корпоративного сайта часто достаточно вёрстки, для веб-сервиса нужна полноценная фронтенд-разработка.

Можно ли сверстать сайт без знания JavaScript?

Статическую страницу — да: структура и внешний вид задаются HTML и CSS, а многие эффекты (наведение, переходы, простые анимации, адаптив) делаются чистым CSS. Но почти любой реальный сайт требует хотя бы базового JavaScript — для мобильного меню, слайдера, модальных окон и проверки форм. Поэтому верстальщику нужен JavaScript на начальном уровне.

Что лучше: Flexbox или CSS Grid?

Это не конкуренты, а инструменты для разных задач. Flexbox раскладывает элементы в одном направлении — в строку или в столбец — и хорош для меню, кнопок и рядов карточек. CSS Grid работает со строками и колонками одновременно и подходит для каркаса страницы и сложных сеток. В современной вёрстке их используют вместе: Grid для общей сетки, Flexbox внутри блоков.

Нужна ли валидность W3C для SEO?

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

Что такое pixel-perfect и всегда ли он нужен?

Pixel-perfect — вёрстка, которая совпадает с макетом с точностью до пикселя: отступы, размеры и положение элементов сверяют наложением макета на страницу. Это оправдано для имиджевых проектов и строгих дизайн-систем. Для большинства сайтов достаточно соответствия в разумных допусках: браузеры по-разному рендерят шрифты, а гибкая сетка всё равно меняет размеры блоков на разных экранах.

Можно ли сверстать сайт с помощью нейросети или конструктора?

Да, для прототипа или простой страницы. Нейросети и плагины для Figma генерируют код по макету и заметно ускоряют черновую работу, конструкторы позволяют собрать сайт без кода. Но семантику, адаптив на реальных устройствах, доступность и производительность всё равно проверяет и доводит человек: сгенерированный код часто избыточен и не учитывает сценарии, которых нет в макете.