Вёрстка сайта простыми словами: что это и почему от неё зависит всё
Что такое вёрстка, чем она отличается от дизайна и CMS, почему один макет по-разному выглядит на телефоне и как проверить качество работы.
Вёрстка — это превращение дизайн-макета в работающую страницу: текст, кнопки, картинки и формы становятся HTML-разметкой, CSS-стилями и небольшим количеством JavaScript. Простыми словами: дизайнер рисует, как должно выглядеть, а вёрстка делает так, чтобы это действительно выглядело и работало в браузере.
Дизайн, вёрстка и CMS — разные вещи
| Что это | За что отвечает | Кто делает |
|---|---|---|
| Дизайн | Как выглядит страница и как устроен путь пользователя | Дизайнер |
| Вёрстка | Как макет превращается в код и ведёт себя в браузере | Фронтенд-разработчик |
| CMS | Как вы меняете тексты и страницы без программиста | Разработчик и вы |
Их часто путают. Красивый макет в Figma — это ещё не сайт: его нужно сверстать, подключить формы, проверить на телефонах и только потом посадить на админку. Плохая вёрстка ломает даже хороший дизайн, а аккуратная — вытягивает простой.
Что делает хорошая вёрстка
- Совпадает с макетом: отступы, размеры, шрифты и цвета не «примерно», а по дизайну.
- Адаптируется: на телефоне, планшете и большом экране нет горизонтальной прокрутки.
- Быстро грузится: оптимизированные изображения, шрифты и минимум лишнего кода.
- Использует семантику: заголовки, списки и кнопки — настоящие, а не нарисованные div-ами.
- Доступна с клавиатуры и скринридера: фокус виден, формы подписаны.
- Работает в браузерах: Chrome, Safari, Firefox, Edge — без «сюрпризов».
- Не дёргается при загрузке: у картинок и блоков заранее заданы размеры.
- Готова к SEO: правильные заголовки, alt у изображений, чистый HTML.
Почему на телефоне «всё поехало»
Потому что макет верстали под фиксированную ширину. Жёсткие размеры в пикселях, абсолютное позиционирование и картинки без пропорций на узком экране начинают наезжать друг на друга. Хорошая вёрстка проектируется как гибкая с самого начала: сетка, переносы, ограничения по ширине и продуманные точки перелома.
Как проверить качество
- Откройте сайт на своём телефоне, а не только в эмуляторе на компьютере.
- Увеличьте масштаб до 200%: текст должен оставаться читаемым, без обрезаний.
- Пройдите страницу только клавиатурой: Tab, Enter, Escape — всё должно работать.
- Включите медленную сеть и посмотрите, не прыгает ли контент при загрузке.
- Проверьте формы: заявка доходит, есть понятная ошибка, кнопка не зависает.
- Откройте консоль браузера: ошибок быть не должно.
- Запустите Lighthouse: скорость и доступность покажут слабые места.
Сколько это стоит и где можно сэкономить
Вёрстка входит в стоимость сайта, но её можно заказать отдельно по готовому макету. Это дешевле, чем полный цикл, но тогда структуру, дизайн и контент вы готовите сами. Готовая тема или конструктор тоже экономят на старте, однако ограничивают: нестандартный блок придётся «прикручивать», а обновления зависят от чужого кода.
Простой HTML-сайт, WordPress или портал: что выбрать
Если нужен сайт с аккуратной вёрсткой и понятной админкой — посмотрите наши решения и состав работ. А если есть готовый макет и нужна только вёрстка, это тоже отдельная задача: скажите об этом сразу.
Есть похожая задача?
Расскажите, что происходит сейчас: где теряется время и какие операции повторяются. Предложим, что автоматизировать первым.