Что такое вёрстка сайта, какой она бывает и как проверить работу верстальщика

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

Кто виноват: дизайнер или программист? Чаще всего ни тот, ни другой. Проблема в этапе, о котором заказчики обычно не задумываются. Он называется вёрсткой.

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

Удобно сравнить разработку сайта с ремонтом квартиры. Дизайн — это проект: как будет выглядеть каждая комната. Вёрстка — сама отделка по этому проекту: стены, плитка, двери. Программирование — инженерные системы: свет, вода, отопление. Без проекта отделывать нечего, а без инженерки в красивой квартире нельзя жить.

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

Языков три, и у каждого своя работа:

• HTML отвечает за содержание и каркас. Он говорит браузеру: вот заголовок, вот абзац, вот кнопка, вот картинка.
• CSS отвечает за внешний вид. Цвета, шрифты, отступы, где стоит каждый блок и как он ведёт себя на узком экране.
• JavaScript отвечает за поведение. Меню раскрывается, слайдер листается, фильтр в каталоге отбирает товары без перезагрузки.

Человека, который этим занимается, раньше звали верстальщиком. Сейчас чаще говорят «фронтенд-разработчик». Фронтенд — это всё, что пользователь видит и трогает в браузере. Обычно такой специалист не только верстает, но и пишет логику интерфейса.

Вёрстка стоит в середине пути. До неё сайт существует только на картинках, после неё начинает оживать.

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

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

Главный вопрос сегодня один: как сайт ведёт себя на экранах разной ширины. Телефон, планшет, ноутбук, большой монитор. От ответа зависит, каким будет сайт для большинства ваших посетителей. По этому признаку вёрстку и делят на виды.

Первые три варианта Яндекс в своих рекомендациях вебмастерам называет допустимыми. Но на практике почти все новые сайты делают адаптивными. Это проще в поддержке: правите текст один раз, и он меняется везде.

Мобильная версия сайта давно перестала быть дополнением. Google с 2023 года индексирует сайты в первую очередь по мобильной версии. Если на телефоне часть текста скрыта или страница сломана, поисковик увидит именно это.

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

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

Заказчики часто просят свёрстать «пиксель в пиксель». Звучит понятно, но есть нюанс. Дизайнер рисует макет обычно в двух-трёх размерах: для большого экрана, планшета и телефона. А экранов в жизни сотни, и каждый своей ширины.

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

Вторая ловушка — идеальные тексты в макете. В дизайне название товара умещается в одну строку, а в жизни оно звучит как «Комплект зимних шин с дисками для внедорожника, 4 шт.». Хорошая вёрстка выдерживает длинные названия, пустые поля и фотографии разных пропорций.

Третья — состояния элементов. Как выглядит кнопка при наведении? Что видит человек, если ошибся в номере телефона? Что показывает каталог, если по фильтру ничего не нашлось? Если этого нет в макете, верстальщик придумает сам, и не всегда удачно.

Многое из этого закладывается ещё на этапе дизайна сайта. Чем подробнее макет, тем меньше верстальщику приходится додумывать.

Две страницы могут выглядеть одинаково, а внутри быть устроены совершенно по-разному. Как два дома с одинаковым фасадом: в одном тёплые стены и ровная проводка, в другом всё держится на честном слове. Снаружи разницу видно не сразу, но жить в них по-разному.

Что отличает хорошую вёрстку изнутри:

• Правильная разметка. Заголовки размечены как заголовки, списки как списки, кнопки как кнопки. Это помогает поисковикам понять страницу, а людям с плохим зрением пользоваться программами экранного чтения.
• Быстрая загрузка. Картинки сжаты и подгружаются по мере прокрутки, лишний код не тянется на каждую страницу. Подробно об этом мы писали в статье про скорость загрузки сайта.
• Ничего не прыгает. Человек целится в кнопку, а в этот момент сверху догружается баннер, и палец попадает в рекламу. Хорошая вёрстка заранее резервирует место под каждый блок.
• Работает во всех браузерах. Chrome, Safari на iPhone, Яндекс Браузер, Firefox. Это называют кроссбраузерностью. Чаще всего сюрпризы преподносит Safari.

У Google есть понятные ориентиры для скорости и стабильности страниц. Они называются Core Web Vitals, и их можно посмотреть в бесплатном сервисе PageSpeed Insights.

Чтобы принять вёрстку, не нужно читать код. Большую часть проблем видно глазами, если знать, куда смотреть. На проверку уйдёт час, и лучше потратить его до подписания акта.

Начните с телефонов. Откройте сайт на своём смартфоне и на чужом: например, на старом Android с маленьким экраном. Поверните телефон горизонтально. Пролистайте каждую типовую страницу до конца.

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

Дальше пройдитесь по списку:

• Тексты. Увеличьте масштаб страницы до 200%. Текст должен остаться читаемым и не вылезать за края блоков.
• Формы. Заполните каждую с телефона. При вводе номера должна открываться цифровая клавиатура, а при ошибке появляться понятная подсказка.
• Кнопки и ссылки. По ним удобно попадать пальцем, они не стоят вплотную друг к другу. Телефон и почта нажимаются.
• Длинный контент. Попросите добавить товар с очень длинным названием и статью без картинки. Посмотрите, как это выглядит.
• Браузеры. Откройте сайт в Safari на iPhone и в Яндекс Браузере. Сравните с тем, что видели в Chrome.
• Скорость. Проверьте пару главных страниц в PageSpeed Insights и в «Проверке мобильных страниц» Яндекс Вебмастера.

И, конечно, положите макет и готовую страницу рядом. Расхождения в отступах и размерах шрифтов сразу бросаются в глаза.

Особенно внимательно проверяйте сложные элементы: таблицы, расписания, фильтры, калькуляторы. На телефоне они ломаются первыми. Хороший пример такой задачи — сайт центра йоги «Прана». Там 71 направление и 172 преподавателя, а расписание подтягивается из 1С каждые 10 минут. Такое расписание должно быть удобным и с компьютера, и с телефона в дороге.

Большинство споров при сдаче вёрстки возникает не из-за плохой работы, а из-за разных ожиданий. Заказчик думал, что сайт проверят на всех телефонах, а подрядчик проверил на двух. Чтобы этого не случилось, договоритесь заранее.

Что стоит записать в задании:

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

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

Если макет у вас уже есть, его можно отдать на отдельную вёрстку сайта. А если сайт готов, но работает медленно и прыгает при загрузке, начинать стоит с ускорения сайта. Часто проблема именно в вёрстке, и её можно исправить без полной переделки.

Вёрстка превращает картинку-макет в живую страницу, которая работает в любом браузере и на любом экране. Это середина пути между дизайном и программированием, и от неё зависит, каким сайт увидят ваши клиенты с телефонов.

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