Заказы на вёрстку сайтов: адаптивная вёрстка макета в код

Вёрстка — это отдельная работа, а не часть «сделать сайт»

Вёрстка — это перевод дизайн-макета в HTML, CSS и JavaScript: браузер должен показать ровно то, что нарисовал дизайнер. Это не программирование логики и не наполнение контентом, поэтому вёрстку часто заказывают отдельно — у студии есть дизайн и бэкенд, а рук на разметку не хватает.

К нам приходят с двумя типами заказов на вёрстку сайтов. Первый: у клиента есть макет и нужен исполнитель, который аккуратно соберёт страницы. Второй: сайт уже живёт, но разъезжается на телефонах, и нужно переверстать шаблоны, не трогая остальную систему.

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

Адаптив: телефон здесь главный экран

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

Адаптивная вёрстка сайтов — это не только «всё влезло в экран». Это читаемые размеры текста без зума, кликабельные зоны под палец, таблицы и прайсы, которые прокручиваются внутри себя, а не рвут страницу, и картинки, которые не тянут по три мегабайта на мобильном интернете.

Проверяем результат на реальных ширинах, а не на одной выдуманной точке: узкие Android, стандартные iPhone, планшет в двух ориентациях, широкий монитор. Отдельно смотрим формы — именно они чаще всего ломаются на маленьких экранах и молча съедают заявки.

Как макет превращается в код

Принимаем макет в Figma: со слоями, компонентами и указанными шрифтами. Разбираем его на повторяющиеся элементы — шапка, карточка, кнопка, форма — и собираем страницы из этих компонентов. Так правка цвета кнопки не превращается в поиск по двадцати файлам.

Пишем семантическую разметку: заголовки по уровням, списки списками, alt у изображений. Это нужно не для красоты, а для поиска и для доступности — поисковый робот и скринридер читают структуру, а не картинку.

Отдельно закладываем состояния: наведение, нажатие, ошибка в поле, пустой список, длинное название товара, которое не помещается в строку. Дизайнер обычно рисует идеальный случай, а в жизни бывает и товар с названием в шесть слов.

Тильда, шаблоны и готовые вёрстки — когда их достаточно

Заказы сайтов на Тильде и работа с готовыми вёрстками — нормальный вариант, когда нужно быстро проверить нишу или собрать простой лендинг под рекламную кампанию. Конструктор снимает вопросы хостинга, форм и мобильной сетки, а править контент клиент сможет сам.

Мы честно говорим, где конструктор упрётся: сложная логика фильтров, интеграции с 1С или CRM за пределами стандартных, десятки типовых страниц с разными шаблонами, тонкая работа со скоростью загрузки. В такой момент шаблон начинают чинить дороже, чем стоила бы своя вёрстка.

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

Кастомная вёрстка: за что платят отдельно

Кастомная вёрстка нужна там, где важны нестандартная сетка, анимация, скорость загрузки и точное совпадение с брендом. Здесь никто не подгоняет дизайн под возможности конструктора — код пишется под макет, а не макет под чужой шаблон.

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

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

Цена и сроки: от чего они на самом деле зависят

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

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

Оплату принимаем в сумах или долларах, работаем по договору. Сроки фиксируем по этапам: сначала общие компоненты и главная, затем внутренние страницы, затем правки после приёмки.

Как принимать работу и не остаться с проблемным кодом

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

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

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

Что делаем мы

Jar Agency — агентство полного цикла из Ташкента. Мы верстаем и как отдельную услугу, и в составе разработки: лендинги, корпоративные сайты, интернет-магазины, веб- и мобильные приложения, интеграции и аналитику.

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

Как это выглядело у клиентов

Частые вопросы