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

Вёрстка сайта: путь от макета до страницы в браузере

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

HTML придумал в ЦЕРНе Тим Бернерс-Ли, первое публичное описание тегов появилось в конце 1991 года. Первая рекомендация CSS1 вышла от W3C 17 декабря 1996 года, а HTML5 получил статус рекомендации 28 октября 2014 года. Результат верстальщика — не готовый сайт, а статичная основа: страницы выглядят как в макете, но данные из базы подключают дальше программисты, например через CMS.

HTML, CSS и JavaScript: за что отвечает каждый слой страницы

Грамотный верстальщик пишет семантическую разметку: теги header, nav, main, article, footer вместо вереницы одинаковых div. По ним поисковый робот и программа экранного доступа понимают, где главный текст, а где навигация. Flexbox выстраивает элементы в ряд или колонку, Grid задаёт двумерную сетку. Раньше блоки двигали float-ами и таблицами, и такой код ещё живёт на старых сайтах.

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

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

Как идёт работа верстальщика: пять шагов и расчёт часов

1. Приёмка макета. Верстальщик открывает файл в Figma и ищет недорисованное: состояния кнопок при наведении, поля с ошибкой, длинные заголовки, мобильную версию.
2. Подготовка. Цвета, шрифты и отступы выносят в переменные, графику нарезают: фото в WebP, иконки в SVG.
3. Блоки. Шапку, первый экран, карточки и подвал делают по отдельности сразу с адаптивом.
4. Сборка страниц. Блоки собирают в шаблоны и сверяют с макетом на нескольких ширинах.
5. Проверка и сдача. Прогон по браузерам и устройствам, затем шаблоны уходят программистам.

Допустим, у сайта 6 типов страниц и 14 уникальных блоков. На блок с адаптивом уходит 3 часа — это 42 часа. Сборка шаблонов по 2 часа на страницу даёт 12 часов, проверка и правки — ещё 10. Итого 64 часа, восемь рабочих дней одного специалиста. При условной ставке 1 500 ₽ в час выходит 96 000 ₽. Цифры учебные: реальная смета зависит от сложности макета и числа правок. Как вёрстка вписывается в бюджет проекта, разобрано в материале «Сколько стоит создание сайта».

Вёрстка рядом с дизайном, frontend-разработкой и конструкторами

• Дизайн. Дизайнер решает, как выглядит и работает интерфейс. Верстальщик возвращает макет, если блок невозможно собрать или он ломается на узком экране.
• Frontend-разработка. Вёрстка — её фундамент. Frontend-разработчик ещё отвечает за состояние интерфейса, запросы к серверу и сборку проекта.
• Интеграция с CMS. Шаблон «натягивают» на WordPress или 1С-Битрикс, чтобы тексты правились из админки. Это работа программиста, но от качества вёрстки зависит её срок.
• Конструкторы. В Tilda код генерирует редактор: быстро для лендинга, но контроль над разметкой ограничен рамками сервиса.

В BigPanda вёрстка входит в разработку сайтов, а правки уже работающих страниц берёт на себя поддержка сайта.

Где ломается вёрстка: проверки перед сдачей

• Валидность кода. W3C Markup Validation Service ловит незакрытые теги и неверную вложенность.
• Иерархия заголовков. Один h1, дальше h2 и h3 по смыслу, а не по размеру шрифта.
• Размеры картинок. Без заданных ширины и высоты страница «прыгает» при загрузке, а это метрика CLS из Core Web Vitals. Порог «хорошо» для неё — 0,1.
• Реальные устройства. Эмуляция в инструментах разработчика не заменяет телефон: мобильный Safari по-своему считает высоту экрана с адресной строкой.
• Нестандартное содержимое. Длинное слово в заголовке или название товара в три строки не должны ломать сетку.

Частые вопросы