Вёрстка сайта: что это такое и на что влияет
Вёрстка сайта — превращение графического макета в код, который браузер показывает на экране. Дизайнер рисует картинку, верстальщик собирает из неё работающую страницу: с текстом, который можно выделить, кнопками, которые нажимаются, и блоками, которые подстраиваются под размер экрана.
Этап невидим для заказчика — на приёмке он видит то же, что и на макете. Именно поэтому здесь чаще всего экономят, а расплачиваются потом позициями и заявками.
Что входит в работу
- Разбор макета. Верстальщик выделяет повторяющиеся элементы: кнопки, карточки, заголовки. Из них собирается набор, который дальше используется на всех страницах.
- HTML — структура. Разметка содержимого: где заголовок, где список, где таблица. Это то, что читают поисковые роботы и программы чтения с экрана.
- CSS — оформление. Цвета, отступы, шрифты, поведение блоков при изменении ширины экрана.
- JavaScript — поведение. Меню, слайдеры, всплывающие окна, проверка форм.
- Проверка. Разные браузеры, разные размеры экрана, реальные телефоны, а не только уменьшенное окно на компьютере.
Виды вёрстки
| Вид | Как ведёт себя | Где применяется |
|---|---|---|
| Фиксированная | Ширина не меняется, на телефоне появляется прокрутка вбок | Устаревший подход, встречается на старых сайтах |
| Адаптивная | Несколько заранее заданных макетов под группы экранов | Стандарт для большинства проектов |
| Отзывчивая | Плавно тянется под любую ширину без фиксированных точек | Простые страницы, лендинги |
| Мобильная сначала | Собирается от телефона к большому экрану | Проекты, где основной трафик мобильный |
На практике адаптивная и отзывчивая часто смешиваются: базовое поведение плавное, а на нескольких ключевых ширинах макет перестраивается. Терминологический спор здесь неважен — важно, чтобы сайт нормально выглядел и на телефоне, и на широком мониторе.
На что влияет качество вёрстки
Три последствия, которые заказчик замечает уже после запуска.
Скорость. Тяжёлая вёрстка с лишними обёртками, неоптимизированными картинками и десятком подключённых библиотек грузится медленно. Это одновременно фактор ранжирования и причина ухода людей — подробнее в статье про скорость загрузки сайта.
Понимание содержимого поиском. Если весь текст свёрстан одинаковыми блоками без заголовков и списков, робот видит сплошное полотно. Правильная структура — это не эстетика кода, а сигнал о том, что на странице главное. Как устроены заголовки — заголовок в тексте.
Конверсия. Форма, которая на телефоне уезжает под клавиатуру, кнопка, которую не попасть пальцем, поле без подписи — всё это теряет заявки, оплаченные рекламой. Разбор одной такой ошибки — плейсхолдер вместо подписи поля.
Как принять вёрстку
Проверка не требует умения читать код. Достаточно пройти по списку.
- Открыть на реальном телефоне, а не в уменьшенном окне браузера. Проверить: ничего не уезжает вбок, текст читается без увеличения.
- Растянуть окно на компьютере от узкого к широкому — блоки не должны наползать друг на друга.
- Выделить текст мышью. Если он не выделяется — это картинка, а не текст, и поиск его не увидит.
- Заполнить и отправить форму с телефона, включая ошибочные данные: понятно ли, что не так, сохраняется ли введённое.
- Проверить скорость на мобильном соединении, а не только в офисе по кабелю.
- Нажать все интерактивные элементы — меню, слайдеры, всплывающие окна, галерею.
Отдельно стоит потребовать проверку в тех браузерах, которыми реально пользуется ваша аудитория. Данные есть в аналитике — в отчётах Метрики.
Коротко
- Вёрстка — превращение макета в код: HTML задаёт структуру, CSS оформление, JavaScript поведение.
- Виды: фиксированная (устарела), адаптивная, отзывчивая, мобильная сначала.
- Качество вёрстки влияет на скорость, понимание содержимого поиском и конверсию форм.
- Текст, свёрстанный картинкой, для поиска не существует.
- Принимать работу нужно на реальном телефоне и мобильном соединении.
- Обязательная проверка — отправка формы с ошибочными данными.
Собираем сайты так, чтобы они быстро грузились и доводили до заявки, — разработка сайтов.