Красивый макет — ещё не сайт: зачем нужна вёрстка
Дизайнер прислал красивые картинки будущего сайта, все в восторге. Почему нельзя «просто загрузить» их в интернет — и за что дальше берёт деньги верстальщик? Отвечаем в очередной статье серии «Просто об IT».
Спойлер: дизайн — это чертёж, а вёрстка — строительство. И именно от вёрстки зависит, как сайт поведёт себя на тысячах разных экранов — от старого смартфона до огромного монитора.
Вёрстка — перевод картинки на язык браузера
Браузер не умеет показывать «картинку дизайна» — он читает код на специальных языках: HTML описывает, что на странице есть (заголовок, текст, кнопка, фото), а CSS — как это выглядит (цвета, шрифты, отступы, расположение). Вёрстка — это процесс перевода дизайн-макета в такой код.
Термин пришёл из типографики: раньше наборщик «верстал» газетную полосу, раскладывая текст и иллюстрации. Суть не изменилась — только полоса теперь резиновая: страница должна красиво «перевёрстываться» под любой экран сама.
Кстати, третий язык браузера — JavaScript — отвечает за поведение: что случится при клике, как раскроется меню, как обновится корзина. Связка HTML + CSS + JavaScript и есть тот самый фронтенд из нашей прошлой статьи.
Адаптивность: один сайт — тысячи экранов
Ваш сайт откроют с iPhone и с дешёвого Android, с планшета и с ноутбука, в вертикальном и горизонтальном положении. Адаптивная вёрстка — это умение страницы перестраиваться под любой экран: на мониторе товары стоят в четыре колонки, на телефоне — в одну, меню сворачивается в «гамбургер», кнопки становятся крупнее под палец.
Почему это критично для бизнеса: в Узбекистане подавляющая часть посетителей заходит с телефонов. Если сайт свёрстан «под компьютер», мобильный пользователь увидит мелкий текст и уезжающие за экран кнопки — и уйдёт к конкуренту. Поисковики это знают: Google оценивает в первую очередь именно мобильную версию сайта.
Поэтому современный подход называется mobile first — сначала проектируем телефонную версию, потом расширяем до компьютерной. Если подрядчик показывает вам макеты только «широкой» версии — обязательно спросите, как это будет выглядеть на телефоне.
Хорошая и плохая вёрстка: в чём разница
Снаружи два сайта могут выглядеть одинаково, но у одного вёрстка аккуратная, а у другого — «на скотче». Разница вылезает потом: криво отображается на новых устройствах, медленно загружается, ломается при мелких правках, плохо индексируется поисковиками.
Качественная вёрстка — это не перфекционизм, а деньги: скорость загрузки напрямую влияет на конверсию и позиции в поиске, а семантичность (правильные «роли» элементов в коде) — на SEO и доступность для людей с ограниченными возможностями.
- Скорость: страница открывается быстро даже на слабом телефоне и мобильном интернете.
- Адаптивность: ничего не ломается ни на одном размере экрана.
- Семантичность: заголовки, списки и кнопки размечены правильно — поисковики «понимают» страницу.
- Устойчивость: правка в одном месте не ломает соседние блоки.
- Доступность: сайт можно читать с экранного диктора, элементы контрастны, формы подписаны.
Как самому проверить вёрстку за 10 минут
Не нужно быть программистом, чтобы оценить базовое качество. Откройте сайт на своём телефоне и на компьютере. На компьютере попробуйте менять ширину окна браузера — от узкой до широкой: контент должен плавно перестраиваться, без горизонтальной прокрутки и наездов текста на кнопки.
Затем проверьте скорость бесплатным инструментом Google PageSpeed Insights: вводите адрес — получаете оценку и список проблем. Не пугайтесь, если оценка не 100 (такое редко у кого бывает), но «красная» зона по мобильным — повод для разговора с разработчиком. И последнее: понажимайте всё подряд — каждая кнопка должна куда-то вести, каждая форма — отправляться.
Частые вопросы
Чем вёрстка отличается от дизайна?
Дизайн — картинка-макет, как сайт должен выглядеть. Вёрстка — код, который заставляет браузер показать этот макет на любом экране. Дизайнер рисует, верстальщик строит. Часто обе роли совмещает один фронтенд-разработчик.
Что значит «сайт не адаптивный»?
Он свёрстан под один размер экрана (обычно компьютерный) и на телефоне показывается уменьшенной копией: мелкий текст, нужно растягивать пальцами. Сегодня это прямые потери: большинство посетителей — мобильные, и Google ранжирует по мобильной версии.
Почему нельзя просто вставить картинку макета на сайт?
Картинка не масштабируется под экраны, по ней нельзя кликнуть «внутрь», текст с неё не читают поисковики, и весит она много. Сайт-картинка — это красивый, но бесполезный для продвижения и продаж муляж.
Вёрстка и «натяжка на CMS» — это одно и то же?
Нет, это два этапа: сначала макет верстается в статичные страницы, затем «натягивается» на систему управления (CMS) — чтобы вы могли сами менять тексты и товары через админку. Подробнее про CMS расскажем в отдельной статье.