Что входит в вёрстку
- Разбор макета: проверяем, что нарисованы все состояния кнопок, форм, меню и мобильные экраны.
- Семантическая разметка: один H1, логичные заголовки, списки и таблицы как настоящие элементы, а не картинки.
- Адаптив под ширину экрана от телефона до широкого монитора.
- Интерактив: меню, слайдеры, вкладки, всплывающие окна, валидация форм.
- Оптимизация изображений и шрифтов, отложенная загрузка того, что ниже первого экрана.
- Проверка в актуальных браузерах и на реальных телефонах.
- Подготовка к CMS (системе управления сайтом): разбивка на шаблоны и блоки.
Почему от вёрстки зависит поиск и конверсия
Пользователь не видит код, но чувствует его: страница прыгает при загрузке, кнопка не нажимается пальцем, форма не отправляется в мобильном браузере. Поисковый робот читает разметку и по ней понимает, где заголовок, где цена, где навигация. Аккуратная вёрстка — основа, на которой потом работают техническое SEO и реклама: исправлять её задним числом дороже, чем сделать правильно.
На какие показатели скорости ориентируемся
| Показатель | Что измеряет | Хороший уровень |
|---|---|---|
| LCP | Когда отрисовался самый крупный элемент первого экрана | до 2,5 с |
| INP | Насколько быстро страница реагирует на нажатия | до 200 мс |
| CLS | Насколько сдвигается содержимое при загрузке | до 0,1 |
Это пороги Google; публичного подтверждения, что Яндекс учитывает именно их при ранжировании, нет. Мы ориентируемся на них как на измеримую планку удобства: быстрый и стабильный первый экран удерживает посетителя из любой поисковой системы и из рекламы.
Вёрстка многостраничного сайта по неделям
| Неделя | Работа | Что проверяете вы |
|---|---|---|
| 1-я | Разбор макета, сетка, шрифты, цвета, библиотека общих блоков | Список вопросов к макету |
| 2–3-я | Главная и ключевые шаблоны: каталог, карточка, статья, контакты | Страницы на тестовом адресе |
| 4-я | Остальные шаблоны, формы, интерактив, мобильные состояния | Работу на своём телефоне |
| 5-я | Скорость, проверка в браузерах, исправления, передача кода | Приёмку по чек-листу |
Срок рассчитан на сайт из 8–12 уникальных шаблонов. Лендинг из одного шаблона верстается быстрее, интернет-магазин с фильтрами и личным кабинетом — дольше.
Что влияет на стоимость вёрстки
Вёрстка стоит от 100 000 ₽ разово. Цену определяют число уникальных шаблонов (повторяющиеся страницы не считаются отдельно), количество анимаций и интерактивных элементов, нестандартные мобильные решения, поддержка старых браузеров и интеграция с CMS. Неполный макет — без мобильных экранов или состояний форм — увеличивает срок: недостающее приходится проектировать по ходу. Посадку вёрстки на движок, например 1С-Битрикс, считаем отдельно.
Когда отдельная вёрстка не нужна
Если макета ещё нет, заказывать только вёрстку рано: начните с дизайна сайта или сразу с разработки под ключ. Для небольшого сайта, который вы будете сами менять каждую неделю, конструктор вроде Tilda проще и дешевле ручного кода. Ручная вёрстка оправдана, когда важны скорость, уникальный интерфейс и дальнейшее развитие сайта силами программистов.