Шість кроків для розробки сайту

І хоча вважається, що найголовніші процеси у веб розробці сайту це кодінг та веб дизайн, насправді це не зовсім вірно. Дійсно, такі технології, як HTML, CSS, та JavaScript дають форму та визначають спосіб обробки даних.  Але що зазвичай лишається за кулісами та водночас залишається важливою частиною процесу розробки, це стадії попереднього збору інформації, детальне планування, підтримка проекту після запуску.

У цій статті ми розглянемо як виглядає середньостатистичний процес розробки сайту. Загальна кількість стадії розробки зазвичай коливається у межах від п’яти до вісьми, але на загальну картину це не впливає. Виберемо середній показник.  

Ось шість кроків у розробці сайту:  1) Збір інформації, 2)Дизайн, 3) Написання та структурування контенту, 4) Кодінг, 5) Тестування, огляд і запуск 6) підтримка та оновлення.

Часова шкала розробки сайту

Часова шкала розробки сайту

Коли ви думаєте про створення вебсайту, ваші думки зазвичай кружляють навколо двох понять: час та гроші. Ці дві величини напряму залежать від розміру та складності проекту. Щоб окреслити у цілому весь процес розробки, ви можете створити часову шкалу розробки сайту, додаючи задачі та встановлюючи віхи проекту. Це найкращий спосіб відстежувати прогрес розробки проекту щоб не відставати від графіку.

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

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

Цикл розробки сайту

Крок 1. Збір інформації: Призначення, Основні цілі, Цільова  аудиторія

Цей крок, дослідження та збір інформації, визначає, якими саме будуть усі наступні кроки. Головне завдання на цьому етапі - чітко зрозуміти призначення майбутнього сайту, цілі, яких ви бажаєте досягнути, та яку саме аудиторію ви хочете залучити на свій сайт. Такий перелік питань розробки сайту допомагає розвинути кращу стратегію для подальшого керування проектом.

Портал новин відрізняється від розважального сайту, а ресурси для підлітків не схожі на сайти для дорослих. Різний функціонал потрібен для сайтів з різною аудиторією, що означає, необхідно використовувати різні технології в залежності від цілей. Добре описаний, докладний план, складений на попередньо зібраній інформації, допоможе вам уникнути витрат на додаткові ресурси для вирішення раптово виниклих проблем, таких як зміни у дизайні та додатковий функціонал, який від самого початку не планувався.

Далі підпунктом цього кроку буде створення Sitemap та скетчу для майбутнього  сайту.

Це необхідно для того, щоб чітко розуміти, як буде працювати сайт, його функціонал та розмітку блоків, посилань, кнопок тощо.

Sitemap дозволить вам зрозуміти, як виглядатиме структура сайту, але не описує інтерфейс користувача. Іноді, перед початком кодінгу, або навіть дизайну, необхідно узгодити все з клієнтом, щоб перейти до наступної фази розробки. У цьому випадку, створюється скетч-малюнок сайту (або прототип сайту). Скетч це візуальна  презентація призначеного для користувача інтерфейсу того функционалу, який ви плануєте створити. У скетчі немає ніяких елементів дизайну, лого, кольорів тощо. Він просто показує елементи які будуть додані на сторінку та їх розміщення. Це простий та недорогий схематичний малюнок.

Важливим також буде вибір стеку технологій - мова програмування, фреймворки,  CMS.

Приблизна тривалість від 1 тижня.

Крок 2. Дизайн: Макети сторінок, узгодження та затвердження

Під час фази дизайну, ваш сайт отримує свою майбутню форму. На цьому етапі створюється весь візуальний контент - фото та відео. Нагадаємо собі, що вся інформація, зібрана під час прешого кроку є дуже важливою. Відвідувачі та цільова аудиторія повинні постійно враховуватися під час розробки дизайну сайту.

Макет сайту  це результат роботи дизайнера. Це вже справжній дизайн сайту, як він повинен виглядати. Первинна функція макету - подати структуру інформації, визуалізувати контент, та продемонструвати функціонал. Макети вже мають кольори, лого, зображення та можуть дати загальне уявлення про майбутній продукт.

Замовник продивляється макети та затверджує їх, або висловлює свої зауваження та коментарі. Якщо клієнт не впевнений, що задоволений деякими елементами дизайну, ви змінюєте макет та показуєте йому знову. Цей цикл повинен повторюватися, допоки замовник не буде на 100% задоволений макетом свого майбутнього сайту.

Приблизна тривалість від 2 тижнів.

Крок 3.  Написання та структурування контенту

Написання та структурування контенту звичайно відбувається паралельно з іншими стадіями розробки сайту, та його участь не варто недооцінювати. На цьому етапі необхідно викласти у письмовому вигляді усе, що ви хочете розповісти своїй цільовій аудиторії на сайті та додати заклики до дії. Написання контенту включає також створення яскравих заголовків, редагування тексту, написання нових текстів, обробку існуючих, та інше. Це забирає багато часу. Як правило, клієнт бере на себе створення контенту, готового для розміщення на сайті.  Найкраще всього, коли контент надається до, або під час кодінгу.

Приблизна тривалість від 4 тижнів.

Крок 4. Кодінг

І ось, нарешті, ви починаєте створювати сайт.  Графічні елементи, створенні на попередніх етапах, повинні використовуватися для створення самого сайту. Зазвичай, спочатку створюють головну сторінку, а потім, згідно їєрархії сайту,  додаються другорядні сторінки. Frameworks та CMS реалізовуються, щоб сервер міг впоратися з інсталяією та налаштуванням без проблем.

Усі статичні елементи сторінки, які були створені на стадії створення макетів, повинні бути створені та протестовані. Далі додаються різноманітні функції, наприклад інтерактивні. Тут дуже важливо глибоке розуміння кожної технології для розробки сайту, яку ви збираєтесь використовувати.

Коли ви використовуєте CMS для створення сайту, ви зможете також встановити CMS plugins якщо є потреба у них на цьому етапі. Інший важливий крок це SEO (Search Engine Optimization, оптимізація для пошукових систем). SEO це оптимізація елементів сайту (таких як, заголовок, опис, ключові слова) що можуть допомогти  вашому сайту досягти більш високого рангу у пошукових системах. Та знову таки, валідний код дуже важливий для SEO.

Приблизна тривалість від 4 тижнів.

Крок 5. Тестування, Огляд і Запуск

Тестування це, мабуть, найбільш рутинна частина процесу. Кожне посилання має бути протестоване, щоб впевнитися,що серед них немає недійсних посилань (битих). Вы повинні перевірити кожну форму, кожен скрипт, запустити софт, перевіряючий правописання, щоб уникнути помилок. Використовуйте валідатори коду, щоб впевнитися, що ваш код відповідає поточним веб стандартам. Валідний код необхідний, якщо вам важлива, наприклад, кроссбраузерність.

Після того, як ви декілька разів протестуєте ваш сайт, прийшов час викласти його на сервер.  Для цього використовується FTP (File Transfer Protocol) протокол. Після того, як ви розгорнули файли, протестуйте все ще раз, щоб впевнетися що усі файли завантижились вірно.

Приблизна тривалість від 1 тижня.

Крок 6. Обслуговування: Підтримка та Оновлення

Важливо пам’ятати, що сайт це не стільки продукт, скільки сервіс. Недостатньо просто передати його користувачу. Ви повинні упевнитися, що все працює без помилок, всі задоволені результатом, а у протилежному випадку, ви маєте бути готовими виправити помилки.

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

Іншим важливим моментом є регулярне та своєчасне оновлення сайту. Якщо ви використовуєте CMS, регулярні оновлення захистят вас від зламу, вірусів, та знизять ризики в області безпеки.

Приблизна тривалість - постійно.

Замість висновку, хочу сказати, що процес розробки не починається кодінгом та не закінчується у той день, коли ви його запустили. Фаза підготовки, планування є вирішальним у продуктивності розробки проекту. Ретельне та глибоке дослідження таких аспектів, як вік, стать, інтереси кінцевого користувача можуть стати ключем до успіху. Період після запуску є достатньо важливим. Ваш проект повинен бути швидким та гнучким у достатній мірі, щоб змінювати сайт в залежності від відгуку його користувачів або духу часу. Усвідомлення того, що всі фази розробки однаково важливі, запобіжить появі несподіваних багів та дасть  вам впевненість, що все йде як задумано, та ви повністю контролюєте процес.