Вёрстка сайта

1. Получить макет с состояниями: hover, focus, disabled, пустые и длинные тексты
2. Согласовать сетку, отступы и типографику в токенах (rem, переменные CSS)
3. Сверстать шапку, подвал и типовые секции как переиспользуемые блоки
4. Проверить адаптив на реальных устройствах, не только в DevTools
5. Подготовить список шаблонов для натяжки: главная, услуга, статья, контакты
6. Сдать архив с исходниками, шрифтами и инструкцией по сборке, если есть препроцессор

Что входит в «вёрстку сайта» по договору

На практике под вёрсткой понимают перевод утверждённого дизайна в HTML и CSS (иногда с минимальным JS для меню, слайдера или табов). В объём обычно входят все согласованные страницы и состояния, кроссбраузерность в актуальных Chrome, Safari, Firefox и Яндекс.Браузере, адаптив под оговорённые брейкпоинты и базовая доступность: фокус, контраст, alt у смысловых картинок. Не входят, если отдельно не оговорено: наполнение текстами, подключение CMS, интеграция форм с CRM, SEO-тексты и анимации уровня «кинематографичный скролл».

Семантика и иерархия заголовков

• Один логичный H1 на страницу; секции начинаются с H2
• nav, main, header, footer вместо бессмысленных div-обёрток
• Кнопки — button или ссылка a, а не div с onclick без роли
• Списки преимуществ — ul/li, пошаговые сценарии — ol
• Формы с label, связанным с полем, а не только placeholder

Семантика влияет на SEO и на то, как скринридеры озвучивают страницу. Ошибка «все заголовки через div с классом title» усложняет натяжку: разработчик CMS не понимает, куда вставлять динамический заголовок записи. Заранее пометьте в макете, какие заголовки придут из админки, а какие статичны.

Сетки, компоненты и дизайн-система

Даже на лендинге из десяти блоков выгодно выделить кнопки, карточки, бейджи и формы в переиспользуемые классы или компоненты. Это ускоряет правки «сделайте все кнопки на 2px выше» и снижает расхождение между страницами. CSS Grid подходит для сложных двумерных раскладок, Flexbox — для строк навигации и карточек в ряд. Избегайте фиксированных высот блоков с текстом: при реальном контенте вёрстка не должна ломаться.

Изображения, шрифты и иконки

• WebP/AVIF с fallback, srcset для ретины
• Явные width/height или aspect-ratio против CLS
• Подмножество шрифтов (кириллица, нужные начертания), font-display: swap
• SVG для иконок; спрайт только если оправдан размером
• Ленивая загрузка ниже первого экрана, но не для LCP-картинки

Сдача и приёмка вёрстки

1. Демо на статическом хостинге или в архиве с index.html по страницам
2. Чек-лист расхождений с макетом: допускается ли отличие в 1–2px
3. Проверка длинных слов и email в кнопках на узком экране
4. Отсутствие горизонтального скролла на 320–360px
5. Передача исходников SCSS/PostCSS, если верстальщик использовал сборку

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

Взаимодействие с дизайнером и контентом

Вёрстка ломается не только из-за кода, но и из-за «внезапных» текстов: юрист принёс абзац на полэкрана, маркетинг добавил шесть бейджей в карточку. Заложите в макет примеры длинных заголовков и коротких, опишите правила обрезки (line-clamp) или переноса. Если фотографии поставит заказчик позже, используйте placeholder с тем же aspect-ratio, чтобы не переделывать сетку. Иконки соцсетей и логотипы партнёров лучше получить в SVG или PNG с прозрачностью заранее.

• Согласовать поведение таблиц и вложенных списков в текстовых блоках
• Проверить кириллицу и латиницу в одном заголовке — переносы могут отличаться
• Учесть будущие баннеры акций в шапке без сдвига меню
• Зафиксировать цвет ссылок и visited для статей блога