Вёрстка сайта простыми словами: виды, этапы и как проверить результат

Что такое вёрстка сайта?

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

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

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

Основа вёрстки состоит из двух технологий. Skillbox сравнивает HTML с каркасом здания, который определяет расположение стен, окон и дверей, а CSS с внутренней отделкой. Если HTML добавляет на страницу заголовок или абзац, то CSS отвечает за цвет, шрифт и расположение. Подробнее об устройстве разметки написано в материалах про теги HTML и про CSS.

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

Как макет превращается в страницу: этапы работы

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

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

Следующий шаг касается повторяющихся частей. В Википедии отмечено, что готовый документ режут на шаблоны, например верхнюю полосу с логотипом и нижнюю с важной информацией. Благодаря этому шапку и подвал меняют один раз, а правка появляется на всех страницах. Именно такие шаблоны потом подхватывает CMS и подставляет в них тексты из админки.

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

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

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

Табличная вёрстка появилась из-за нехватки возможностей. По данным Skillbox, в начале двухтысячных разработчики размещали содержимое в столбцах и ячейках, и такой сайт не умел подстраиваться под размер экрана. Википедия добавляет ещё одну проблему: браузер не показывает таблицу, пока она не загружена целиком, поэтому вложенные таблицы замедляли страницы. Для данных таблицы остаются уместными, например для прайс-листов.

История вёрстки хорошо показывает, откуда берётся кроссбраузерность. В девяностых браузер Netscape добавил собственные теги, и это никого не тревожило: по Википедии, другими браузерами пользовались только 10% посетителей. Затем выросла доля Internet Explorer, поддержка технологий у браузеров разошлась, и сайты стали выглядеть по-разному. Когда страницы начали ломаться, разработчикам пришлось создать «режим совместимости», в котором браузер работал по-старому. Этот случай объясняет, зачем появились стандарты W3C и валидаторы кода.

Из подходов к ширине страницы Skillbox описывает три. Фиксированная вёрстка держит одну ширину и на узком экране даёт полосу прокрутки. В резиновой вёрстке кнопка занимает, например, 20% ширины экрана и меняется вместе с устройством. Адаптивная вёрстка строится на медиазапросах: это CSS-правила, которые подключают нужные стили в зависимости от ширины или ориентации экрана.

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

Сама идея пришла из практики. По справке web.dev, адаптивный сайт показывает контент в одну колонку на телефоне, в две на планшете и в три или четыре на настольном компьютере.

Адаптивная вёрстка и мобильный поиск

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

Технический минимум начинается с одной строки в head. По справке web.dev, без метатега viewport мобильный браузер рисует страницу по ширине экрана компьютера, около 980px, а затем уменьшает её, и текст приходится увеличивать пальцами. Значение width=device-width подгоняет страницу под ширину устройства. Яндекс Вебмастер тоже советует добавить этот метатег в head.

Яндекс выделяет и другие условия. Он просит открыть роботу CSS и JavaScript, от которых зависит вид страниц на телефоне, иначе их могут показать в выдаче неверно. Если у сайта отдельная мобильная версия и поисковик не видит связи между версиями, в мобильной выдаче могут появиться обе, а сигналы разделятся между ними. Проверить страницы можно в Вебмастере в инструменте «Проверка мобильных страниц».

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

Влияние вёрстки на скорость и заявки

Скорость и стабильность макета проверили на деньгах два крупных проекта. Компания Vodafone провела A/B-тест, о котором рассказывает web.dev. Страницы различались только оптимизацией под Web Vitals, других функциональных и визуальных отличий не было. Версия с улучшенным LCP на 31% дала рост продаж на 8%, а переходы от лидов к посещениям выросли на 15%, от корзины к посещениям на 11%.

Чтобы получить такой результат, команда Vodafone изменила вёрстку и рендеринг. Логику виджета перенесли с клиента на сервер, оптимизировали изображения и сделали так, чтобы картинки вне экрана не грузились раньше времени. Руководитель отдела цифрового маркетинга Давиде Гросси описывает рабочий принцип команды в том же материале так:

Экспериментируйте, учитесь быстро

Давиде Гросси, руководитель отдела цифрового маркетинга Vodafone

Второй кейс про визуальную стабильность. Yahoo! JAPAN News снизила смещение макета на 0,2 и получила рост просмотров за сеанс на 15%, рост длительности сеанса на 13% и снижение отказов на 1,72 процентного пункта. Сдвиги вызывают случайные щелчки и дезориентацию, и такие страницы посетители бросают быстрее.

Решение у команды было вёрсточным: она резервировала место под изображение заранее с помощью полей соотношения сторон, чтобы текст не прыгал при загрузке картинки. Число URL с низкой производительностью в Search Console после этого снизилось на 98%. Практический вывод для вашего сайта: у каждой картинки и рекламного блока должны быть заданы размеры.

Доступная и семантическая вёрстка

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

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

Цена пренебрежения доступностью видна по истории пиццерии Domino's. По описанию организации BOIA, покупатель Роблес с нарушением зрения указал в иске, что у графики нет альтернативного текста, а сайт плохо работает с программами чтения экрана. Суд апелляционной инстанции признал, что закон ADA применим к сайтам, и дело закончилось мировым соглашением. Это американский закон, российским сайтам его требования не навязаны, но принцип понятен и на нашем рынке. Нужны ли вам формальные требования, согласуйте с юристом.

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

Хорошая новость в том, что доступность обычно улучшает сайт для всех. Читаемый контраст, понятные состояния кнопок и осмысленные описания картинок помогают и тем, кто смотрит страницу на телефоне в дороге.

Как проверить вёрстку и принять работу верстальщика?

Проверку проще разбить на шаги: так её можно провести самому или поручить сотруднику. Практикум предлагает последовательность: сначала прогнать код через валидатор, затем пройти страницу в DevTools. Часть шагов показана в списке ниже.

1. Откройте страницу в DevTools и сузьте окно до ширины телефона: блоки должны оставаться на местах.
2. Включите тёмную тему, уменьшите анимации, поднимите контрастность и поставьте минимальный размер шрифта.
3. Добавьте больше текста в заголовки и кнопки: проверьте, что вёрстка подстраивается, а не ломается.
4. Добавьте или уберите карточки товаров и пункты списков, как это сделает редактор.
5. Запустите валидатор HTML и исправьте ошибки, которые видны посетителю или меняют структуру заголовков.

О валидаторе стоит сказать отдельно. По Практикуму, валидность это соответствие кода стандартам W3C, благодаря которым сайт работает в разных браузерах так, как задумано. Там же приведён показательный факт: на главной Google валидатор нашёл 119 ошибок, а сервисом пользуются до 4 миллиардов человек. Не каждая ошибка ломает отображение, но исправлять их стоит, поэтому блокирующими считайте только заметные дефекты, остальное планируйте после запуска.

Рабочий набор инструментов у верстальщика невелик. В таблице Практикума DevTools нужен, чтобы проверить результат без изменения исходного кода и понять, почему не подгрузились шрифты, Figma показывает размеры и свойства элементов, а плагин Emmet за несколько секунд создаёт базовую структуру разметки. Заказчику эти названия полезно знать, чтобы понимать отчёты и задавать вопросы по существу.

Сверять результат с макетом помогают плагины Pixel Perfect: они накладывают картинку дизайнера на страницу и показывают расхождения. Скорость загрузки смотрите в отчёте «Время загрузки страниц» в Яндекс Метрике, который советует образовательный раздел Яндекс Рекламы. Для заказчика есть и профилактика: попросите верстальщика использовать em и rem вместо пикселей, чтобы интерфейс слушался настроек шрифта в браузере, и вынести цвета в переменные.

Наконец, подумайте, нужна ли вам индивидуальная вёрстка. В том же материале Яндекса отмечено, что в вёрстке часто используют no-code решения, где страницы собирают из готовых блоков без ручного написания кода. Для типового сайта компании такой путь обычно быстрее, а индивидуальная вёрстка оправдана при нестандартном интерфейсе или сложной логике. Подбор платформы разбирают в обзоре конструкторов сайтов.

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