Главная → Блог → Сайты → Разработка веб сайтов

Разработка веб сайтов: этапы, приёмка, что остаётся вам

Автор: Герман, основатель V³ Creative · Обновлено 23 августа 2026 · Чтение 12 мин · Тип: разбор

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

Отдельно про сам запрос. Формулировку «разработка веб сайтов» набирают два разных человека, и их интересы почти не пересекаются. Один ищет учебник и курсы: рядом в статистике стоят «разработка веб сайтов html», «разработка веб сайта книга», «обучение веб разработке сайтов». Другой ищет исполнителя: «разработка веб сайта компаниям», «разработка веб сайтов для бизнеса», «разработка веб сайтов на заказ». Статья написана для второго. Верстать руками она не научит и бесплатных путей не обещает: разговор идёт про деньги, сроки и приёмку глазами заказчика.

Разработка веб сайтов — это только код?

Нет, код тут примерно треть. Проект состоит из трёх слоёв, и заказчик обычно видит один.

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

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

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

Из каких этапов состоит разработка сайта?

Из шести, и границы между ними стоит записать в договор датами и результатами; одних названий этапов мало.

1. Аналитика и требования. Что сайт должен делать, кому и по каким запросам. Здесь появляется список разделов и список функций; эскизы идут следующим этапом. Как собрать исходные данные для этого этапа, разобрано в материале как составить бриф на дизайн.
2. Проектирование. Схема страниц и путь посетителя. Дешёвый этап, на котором ещё можно передумать: перерисовать прямоугольник стоит час, переделать свёрстанную страницу — день.
3. Дизайн. Макеты в графическом редакторе, обычно двух ширин: под компьютер и под телефон. На выходе — картинка, которую нельзя открыть в браузере.
4. Вёрстка и программирование. Макет превращается в страницы, появляются админка, формы, интеграции. Самый длинный этап и самый непрозрачный для заказчика.
5. Тестирование. Проверка на разных устройствах и браузерах, проверка форм, проверка поведения при ошибках. Отдельная работа, которую при экономии вырезают первой.
6. Запуск и передача. Перенос на боевой домен, защищённое соединение, счётчики, передача доступов и исходников, инструкция по обновлению.

Последний пункт стоит развернуть, потому что его чаще всего считают формальностью. Защищённое соединение ставится не одной галочкой у хостера: справка Яндекса описывает переезд последовательностью шагов. Получить и установить сертификат (DV, OV или EV), заменить протокол во внутренних ссылках, файле Sitemap, robots.txt и языковых ссылках, проверить доступность нового адреса, поставить постоянный редирект с кодом 301 со старых страниц, добавить обе версии в Вебмастер и включить переезд в разделе «Переезд сайта». Справка отдельно оговаривает: при соблюдении этих шагов трафик на сайт не теряется. Смысл HTTPS там же назван прямо — снизить риск перехвата персональных данных посетителей и избежать подмены содержимого.

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

Что происходит после того, как макет утверждён?

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

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

Адаптация под телефоны. Яндекс признаёт три способа: адаптивный дизайн, когда сайт доступен по одному адресу для всех типов устройств и подстраивается под размер экрана; динамическую вёрстку, когда сервер отдаёт по одному адресу разный код; и отдельный поддомен вида m.example.com. Первый способ сегодня основной, и разница между ним и отдельной мобильной версией разобрана в материале адаптивный сайт.

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

Интеграции. Формы, почта, CRM, оплата, счётчики. Каждая интеграция — отдельная точка отказа, и проверяют их поимённо, каждую своим тестовым отправлением.

Кто нужен на проекте, кроме дизайнера

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

• Проектировщик. Отвечает за структуру и путь посетителя. Когда роли нет, сайт получается набором красивых экранов без логики перехода между ними.
• Дизайнер. Отвечает за макет. Разработка интерфейса веб сайта заканчивается на картинке, дальше её кто-то должен оживить.
• Фронтенд-разработчик. Превращает макет в страницы, отвечает за телефоны и скорость. Чем эта роль отличается от дизайнерской, разобрано в материале кто такой веб-разработчик.
• Бэкенд-разработчик. Отвечает за админку, формы, оплату, обмен данными с другими системами. На простом сайте роль сводится к настройке готовой системы управления.
• Тестировщик. Проверяет по списку. Роль вырезают чаще всех, и её работа переезжает на заказчика после запуска.

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

Как принять то, что не видно глазами?

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

Пороги названы прямо. LCP, время появления главного содержимого экрана, должен уложиться в 2,5 секунды с начала загрузки. INP, отклик страницы на действие человека, — в 200 миллисекунд или меньше. CLS, накопленный сдвиг вёрстки, — не выше 0,1. Мерить документация советует по 75-му перцентилю загрузок страницы, раздельно для мобильных и десктопных устройств, то есть требование звучит так: три четверти реальных заходов с телефона укладываются в порог.

Ещё два числа — про доступность текста и кнопок. По критерию 1.4.3 стандарта WCAG 2.2 контраст текста к фону держится не ниже 4,5:1, а для крупного текста от 18 пунктов (или 14 пунктов полужирного) — не ниже 3:1. Это уровень AA, средний из трёх уровней соответствия. По критерию 2.5.8 того же уровня цель для нажатия занимает минимум 24 на 24 CSS-пикселя, и у правила есть пять исключений. Проверять это глазами не нужно: цифры сверяются пипеткой и линейкой прямо в макете, до вёрстки.

Почему сайт на скриптах попадает в поиск позже?

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

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

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

Что проверить в мобильной версии до приёмки?

Пять пунктов, каждый со ссылкой на официальное требование. Мобильная версия сегодня главная: Google индексирует и ранжирует сайт по мобильной версии контента, обойдённой агентом смартфона, и называет это mobile-first indexing.

1. Содержимое совпадает с компьютерной версией. Документация формулирует прямо: если на мобильном сайте меньше содержания, его надо привести к тому же составу, что и на десктопе. Заодно совпадать должны структурированные данные, заголовок страницы и её описание.
2. Мета-теги для роботов одинаковые. Документация предупреждает: при разных робот-тегах на мобильной и десктопной версии, особенно при noindex или nofollow на мобильной, Google может не обойти и не проиндексировать страницу.
3. Нет горизонтальной прокрутки от 320 пикселей. Требование Яндекса: страницы открываются корректно и без горизонтальной прокрутки на устройствах с разрешением 320 пикселей и более. Это ровно тот пункт, который проверяется сужением окна браузера.
4. Стили и скрипты открыты роботу. Ресурсы должны быть доступны мобильному индексирующему роботу, то есть закрытые в robots.txt папки со стилями и скриптами — не оптимизация, а нарушение требования.
5. Есть мета-тег viewport. Без него узкий экран рисует страницу в виртуальном окне около 980 пикселей и просто уменьшает результат, а медиазапросы адаптивной вёрстки не срабатывают вовсе. Строка одна, а без неё весь адаптив бессмысленный.

Отдельно про устаревшее: справка Яндекса прямо просит не использовать Flash, Silverlight и Applet на страницах для мобильных пользователей, а размер текста задавать таким, чтобы он удобно читался на экране телефона.

Свой код, готовая CMS или конструктор

Три пути, и выбор между ними упирается в один вопрос: кто будет обслуживать сайт через год. Сравнение собрано по признакам, которые видит заказчик.

Что забрать себе на приёмке?

Всё, без чего работа встанет при смене подрядчика. Перечень пишется в акт.

• Домен и почта на компанию. В данных администратора домена стоит ваша организация, дата продления записана в календарь. Домен на сотруднике исполнителя превращает расставание в переговоры.
• Хостинг и панель управления. Учётная запись владельца ваша, подрядчику выдаётся отдельная. Так же и с базой данных.
• Исходники и проектные файлы. Код, макеты в редакторе, шрифты с лицензией, изображения в исходном качестве. Проверка простая: по этому комплекту другой разработчик должен собрать сайт заново.
• Доступ в админку с полными правами. Роль администратора должна быть у вас.
• Кабинет поиска и счётчик. Права на сайт подтверждены на компанию, счётчик Метрики заведён на неё же, подрядчику права делегируются.
• Инструкция по обновлению. Короткий текст: где менять цены, как добавить страницу, куда приходят заявки. Полстраницы, а экономят месяцы.

Сюда же относится вопрос прав на результат. Формулировку про переход исключительных прав на код и макеты в полном объёме с момента подписания акта стоит держать в договоре с самого начала: обсуждать её после сдачи дороже.

Чек-лист: как за пять минут проверить готовый сайт

Список для владельца, без программ и без подрядчика. Проверяются факты; вкус в этом списке не участвует.

1. Один адрес. Наберите сайт с www, без www и по незащищённому протоколу: все версии должны приводить на одну страницу по защищённому соединению.
2. Текст в исходнике. Откройте исходный код страницы и найдите в нём заголовок и цену. Нашлись — хорошо, страница не зависит от очереди на рендеринг.
3. Ширина 320 пикселей. Сузьте окно браузера до узкого телефона: горизонтальной прокрутки быть не должно.
4. Несуществующий адрес. Допишите к адресу сайта любую чепуху. Должна открыться страница «не найдено», и отдавать она обязана код 404, а не 200.
5. Форма доходит. Отправьте заявку с телефона и проверьте почту и CRM. Проверяют каждую форму отдельно, включая форму в подвале.
6. Цели заведены. В Метрике настроены отправка формы и клик по номеру телефона как минимум, иначе рекламу потом нечем оценивать.
7. Правка без подрядчика. Зайдите в админку и поменяйте телефон в шапке сами.
8. Комплект на руках. Исходники, доступы, домен на компанию, инструкция. Всё перечислено в акте поимённо.

Пункт, который проваливают чаще прочих, — четвёртый. Яндекс называет распространённой ошибкой замену сообщения об ошибке 404 на страницу-заглушку, которая возвращается с кодом ответа 200: поисковая система считает, что страница с некорректным адресом существует, не удаляет её из базы, и это приводит к более медленному индексированию полезных страниц сайта. У Google тот же случай называется soft 404.

Что из этого запомнить владельцу?

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

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

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

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

Читайте также

Герман

Основатель V³ Creative. Веду проекты сам — от разбора до финального макета.