Веб-разработка: что это и как устроено создание многостраничного сайта

Веб-разработка без жаргона

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

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

Когда говорят «создание многостраничных сайтов», имеют в виду именно этот полный цикл. Отличие от одностраничного сайта не в количестве экранов, а в том, что появляется структура: разделы, переходы между ними и логика, по которой человек попадает туда, куда ему нужно.

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

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

Из каких работ складывается многостраничный сайт

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

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

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

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

Кому нужен многостраничный сайт

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

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

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

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

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

Многостраничный сайт или одностраничный: как выбрать

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

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

Из чего складывается структура многостраничного сайта

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

Обычно есть несколько типов страниц. Главная объясняет, чем занимается компания, и разводит людей по направлениям. Страницы услуг раскрывают каждое направление отдельно. Служебные страницы закрывают вопросы про компанию, документы и контакты. Иногда добавляются примеры работ и статьи.

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

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

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

Навигация: больше, чем верхнее меню

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

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

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

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

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

Тексты и материалы для многостраничного сайта

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

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

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

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

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

На чём собирают многостраничный сайт

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

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

Уточните заранее и то, кому принадлежат доступы. Домен, аккаунт платформы и почта должны быть оформлены на вас, а не на подрядчика — иначе смена исполнителя превращается в отдельную историю с переговорами вместо простой передачи паролей.

На что смотреть при выборе подрядчика

До начала работ можно проверить немного, но эти признаки говорят о многом:

• Подрядчик объясняет состав работ по этапам и говорит, что в него не входит. Расплывчатое «сделаем сайт под ключ» без расшифровки — повод задать уточняющие вопросы прямо на первом разговоре.
• Он спрашивает про бизнес до того, как обсуждать дизайн: какие услуги приоритетные, кто клиент, что человек должен сделать на сайте. Без этих ответов структура получится произвольной.
• В портфолио есть работы, похожие на вашу задачу по устройству, а не только по внешнему виду. Красивый одностраничник ничего не говорит о том, умеет ли исполнитель собирать структуру из двадцати страниц.
• Он честно проговаривает, что нужно от вас и в какие моменты: материалы, ответы по услугам, согласование текстов. Проект, где от клиента якобы ничего не требуется, обычно останавливается на середине.
• Есть договор, счёт и акты, а порядок работы с документами понятен заранее. Наличие электронного документооборота стоит уточнить отдельно, если для вашей бухгалтерии это важно.

Ни один пункт сам по себе ничего не гарантирует. Но если подрядчик не может объяснить состав работ простыми словами, дальше будет только сложнее: непонимание на старте превращается в спор о том, что было обещано, ближе к сдаче.

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

Этапы работы над многостраничным сайтом

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

Что потребуется от вас во время работы

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

Участие заказчика укладывается в несколько понятных моментов:

1. Рассказать про бизнес, услуги и клиентов на первом разговоре.
2. Передать материалы: описания услуг, фото, логотип, доступы к домену.
3. Назначить одного человека, который принимает решения.
4. Посмотреть и согласовать структуру до дизайна.
5. Согласовать дизайн типовых страниц и тексты.

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

Частые ошибки при заказе многостраничного сайта

Эти ошибки повторяются от проекта к проекту:

• Начинать с дизайна, а не со структуры. Красивые страницы, назначение которых не определено, приходится переделывать, когда выясняется, что половины нужных разделов нет, а половина нарисованных не нужна.
• Сравнивать предложения только по сумме. Два одинаковых по цене предложения могут включать совершенно разный объём: у одного тексты и структура внутри, у другого — только сборка готовых макетов.
• Откладывать тексты на конец. Это самая частая причина, по которой проект стоит месяцами: всё готово, кроме содержания, а написать его никто не взялся.
• Копировать структуру конкурента. У него другие услуги, другая аудитория и, возможно, неудачный сайт — со стороны этого не видно, а вы получите чужую логику разделов.
• Не обсудить, что будет после запуска. Кто обновляет содержание, кто чинит поломки, кто продлевает домен — если это не проговорено, сайт постепенно устаревает и перестаёт работать.

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

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

Что происходит с сайтом после запуска

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

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

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

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

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

Материалы, которые ускорят работу

Работа пойдёт быстрее, если к первому разговору готово следующее:

• Список услуг, которые нужно показать на сайте
• Понимание, какие из них приоритетные
• Логотип и фирменные цвета, если они есть
• Фотографии работ, команды или производства
• Доступ к домену или решение, где его регистрировать
• Примеры сайтов, которые вам нравятся и не нравятся
• Ответ на вопрос, что человек должен сделать на сайте

Как обсудить задачу и понять объём работ

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

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

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

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

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