Этапы создания сайта и порядок разработки. Часть 1

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

Основные этапы создания сайта

Процедуру создания сайта можно разделить на 7 универсальных этапов:

1. Подготовка
2. Проектирование
3. Разработка дизайна
4. Верстка
5. Программная настройка
6. Наполнение контентом и тестирование
7. Продвижение и повышение продаж

1. Подготовка

На подготовительном этапе уделяется внимание 2 основным вещам:

1. Цели и задачи, конкретизация идей проекта
2. Регистрация доменного имени и хостинга

Читайте о том, как правильно формулировать цели и задачи и на что обратить внимание при регистрации домена, в статье «Что нужно для создания сайта?»

2. Проектирование

На этом этапе разрабатывается техническое задание (коротко ТЗ).

Отличное ТЗ служит хорошим ориентиром при взаимодействии между заказчиком и исполнителем (даже если заказываешь сам у себя) и экономит дорогое время дизайнеров и программистов в несколько раз.

Чтобы вы понимали важность ТЗ, расскажу одну историю.

Один клиент заказал нашей студии большой сложный интернет-проект стоимостью несколько сотен тысяч рублей, но решил сэкономить 40 000 руб. на его проектировании. В процессе работ видение клиента постоянно менялось, он периодически просил переделать уже запрограммированный функционал и оплачивал доп. работы. В итоге создание проекта ему обошлось в 500 тыс. руб.

Спустя некоторое время этот же клиент захотел сделать другой проект, но уже с полноценным техническим заданием. На этапе проектирования мы обсудили все ключевые моменты проекта, его бизнес-логику, структуру. Клиент хорошо понял, каким видит свой проект, и 80% ненужных изменений в дальнейшем удалось избежать. В итоге стоимость разработки его ресурса составила около 200 тыс. руб. Цифры конечно примерные, но порядок тот же.

3. Разработка дизайна

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

1. Заказать разработку уникального дизайна. Плюсы: сразу под логотип, фирменный стиль и бизнес-логику. Минусы: стоит дорого, делается долго.
2. Взять бесплатный (или купить платный) шаблон. Плюсы: стоит недорого, экономится время на верстке. Минусы: придется доделывать под конкретные задачи сайта, что в итоге тоже может быть долго по времени.

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

4. Верстка

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

Верстка должна быть кросс-браузерной и адаптивной.

Кросс-браузерный сайт должен нормально отображаться во всех современных браузерах: Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Safari, Яндекс Браузер. В 90-х годах Internet Explorer был самым популярным браузером. Он охватывал 70% аудитории рунета, и сайт можно было делать только под него. В 2000-х картина изменилась, стали развиваться Mozilla Firefox, Opera, Safari, а крупные поисковые системы Яндекс и Google выпустили свои браузеры.

Адаптивный сайт должен нормально отображаться на всех мобильных платформах, смартфонах и планшетах. Это тренд, начавшийся в 2011 году. Тогда это было редкость, сейчас мобильная версия – необходимый атрибут любого сайта. Объем мобильного трафика уже давно превысил объем трафика настольных компьютеров.

Важно! Много полезной актуальной информации об адаптивных сайтах читайте в статье «Стоит ли делать мобильную версию сайта?»

5. Программная настройка

Все этапы создания сайта важны, но программный – самый ответственный и дорогостоящий. Когда сайт спроектирован, готов дизайн и верстка, осталось все это соединить в единое целое, а точнее – запрограммировать. Здесь можно пойти по 2-м путям:

1. Обратиться к профессиональным программистам
2. Попытаться настроить все самому или обратиться к начинающему веб-мастеру

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

От этапа программирования зависит:

• Скорость загрузки сайта. Чем выше, тем лучше. Средняя скорость загрузки должна быть не больше 1-2 секунд.
• Видимость сайта поисковыми системами. Неопытный программист по ошибке может сделать так, что поисковые системы заблокируют ваш ресурс, и вы даже не будете знать причину. На что следует обратить внимание: htaccess, robots, коды ответов сервера.
• Движок сайта (по-другому Система управления контентом, Content Management System, CMS). CMS должная быть простой и функциональной. Редактирование любой текстовой и графической информации должно занимать минимальное количество времени (желательно до 5 кликов, и не более 3-х минут)
• Правильная работа модулей. Из-за низкой стоимости услуг некоторых веб-мастеров ошибки на их сайтах – нормальное явление. Но ошибки так же встречаются и у опытных веб-разработчиков. Один изъян в процедуре оформления заказа (например, неработающее поле выбора доставки) может испортить весь заказ.
• Безопасность. Для любого веб-приложения существует угроза заражения вирусом или взлома. Чтобы этого не произошло, нужно выполнять требования безопасного программирования.

 
Читайте об этапах «Наполнение контентом и тестирование»,  «Продвижение и повышение продаж», и о порядке разработки сайта в следующей статье «Этапы создания сайта, порядок разработки. Часть 2».