Что входит в верстку сайта
Верстка сайта превращает дизайн-макет в работающие страницы: с корректной структурой HTML, стилями CSS и интерактивными элементами. Мы адаптируем интерфейс под смартфоны, планшеты и настольные экраны, учитываем состояния компонентов, длинные тексты и изображения разного формата.
Работаем с лендингами, корпоративными ресурсами, интернет-магазинами, B2B-порталами и личными кабинетами. При необходимости подключаем специалистов по разработке веб-сайтов и проектируем клиентскую часть как элемент общей архитектуры продукта.
- семантическая HTML-разметка и компонентный CSS;
- адаптивные сетки и согласованные контрольные точки;
- интерактивные состояния форм, меню и модальных окон;
- подготовка шаблонов для CMS или frontend-фреймворка.
Этапы работы и сроки
Сначала изучаем макеты, UI-kit, пользовательские сценарии и требования к браузерам. Фиксируем состав страниц, повторно используемые компоненты, варианты адаптации и критерии приемки. Если дизайн не описывает отдельные состояния, согласуем их до реализации.
- аудит макетов и декомпозиция задач;
- создание базовой сетки и библиотеки компонентов;
- верстка страниц и программирование интерактивности;
- тестирование, исправления и передача результата.
Ориентировочный срок для лендинга обычно составляет 5–10 рабочих дней, для многостраничного проекта — от 2–4 недель. Оценка зависит от готовности макетов, количества уникальных блоков, анимации и интеграций. Для сложных интерфейсов можем использовать React.
Адаптивность, качество и проверка
Страницы проверяем на согласованном наборе разрешений и в актуальных версиях Chrome, Firefox, Safari и Edge. Визуальные отклонения от макета оцениваем на контрольных экранах; допустимую разницу, например 2–4 px, заранее фиксируем для значимых элементов.
Дополнительно анализируем Lighthouse и Core Web Vitals. В качестве ориентиров могут использоваться LCP до 2,5 секунды, INP до 200 мс и CLS до 0,1. Итоговые значения зависят не только от HTML и CSS, но также от контента, сторонних скриптов, backend-разработки и инфраструктуры.
Интеграция и развитие проекта
Готовые шаблоны подключаем к CMS, API или серверному приложению. Проверяем формы, валидацию, сообщения об ошибках, загрузку данных и отображение пустых состояний. Код передаем через репозиторий вместе с инструкцией по сборке и перечнем зависимостей.
После запуска команда может устранять выявленные дефекты, добавлять блоки и адаптировать интерфейс под новые сценарии в рамках поддержки и развития сайта. Состав работ и формат реакции фиксируются отдельно.
