6.5: Процес веб-розробки
- Page ID
- 16072
У цьому розділі розглядається процес створення сайту з точки зору клієнта.
Крок 1: Відкриття та планування
Планування веб-сайту починається з дослідження вашого ринку, користувачів, конкурентів і вашого бізнесу. Якщо у вас вже є веб-сайт, ви можете використовувати наявні дані веб-аналітики, щоб зрозуміти, наскільки добре ви задовольняєте потреби своїх користувачів. Також варто запустити деякі лабораторії користувачів, щоб спостерігати, як користувачі взаємодіють з існуючим сайтом. Погляньте на розділ дослідження ринку для детального обговорення цього питання.
Детальніше про це читайте в розділі «Дослідження ринку».
Ключові питання, які вам потрібно задати.
Бізнес: Які цілі вашого бізнесу? Як ця цифрова власність повинна допомогти вам досягти цих цілей? (Наприклад, чи повинен він генерувати потенційних клієнтів для вас, щоб стежити за? Це магазин електронної комерції?)
Користувачі: Хто ваші користувачі, ваші потенційні клієнти? Яка проблема потрібна вашому веб-сайту, щоб допомогти їм вирішити? Наприклад, для збору інформації про подорожі в одному місці, наприклад, на сайті www.tripit.com. [Доступ до 30 жовтня 2017]
Докладніше про користувачів читайте в розділі Дизайн користувацького досвіду.
Це дослідження допоможе вам стратегічно планувати свій веб-сайт, гарантуючи, що він узгоджується як з потребами користувачів, так і бізнес-цілями.
У дослідженнях і плануванні ви також повинні досягти розуміння того, які завдання або дії користувачі повинні робити на вашому веб-сайті. Вони, як правило, відповідають вашим бізнес-цілям. Деякі завдання, які користувачеві може знадобитися зробити, включають перевірку доступності готелю, підписку на розсилку або друк інформації.
Перш ніж розпочнеться будь-який проект веб-дизайну, визначитеся, для яких браузерів, операційної системи та пристроїв ви будете розробляти. Зазвичай для браузерів ви використовуєте найновіші, плюс один раніше. Для пристроїв iOS та Android досить різні, тому якщо ви оптимізуєте обидва, це може бути досить дорогим. Технологія рухається так швидко, що ви не можете встигнути за всіма новітніми ОС і пристроями.
Вибір доменного імені
Доменні імена мають важливе значення. Вони є частиною URL-адреси веб-сайту. Доменне ім'я виглядає приблизно так: www.mycompany.com
У це можна включити набагато більше інформації. Доменні імена можуть нести наступну інформацію: subdomain.domain.tld/directory
Домен — зареєстроване доменне ім'я сайту
Субдомен — домен, який є частиною більшого домену
TLD — домен верхнього рівня, верхній в ієрархії доменних імен
directory — папка для організації вмісту
TLD може вказувати країну, в якій зареєстрований домен, а також може давати інформацію про характер домену.
com — найпоширеніший TLD
co.za, .co.uk, .com.au — ці ДВУ дають інформацію про країну
.org — використовується неприбутковими організаціями
.gov — використовується урядами
.ac — використовується академічними установами
Доменні імена повинні бути зареєстровані, і в більшості випадків за це стягується плата. Багато хостинг-провайдерів будуть реєструвати доменні імена від вашого імені, але ви також можете зробити це самостійно.
Доменні імена повинні легко запам'ятовуватися і, якщо можливо, включати важливі ключові слова пошуку для вашого бізнесу. Наприклад, якщо ви створювали веб-сайт для свого ресторану під назвою Omega, www.omegarestaurant.com може бути кращим вибором, ніж www.omega.com, оскільки він містить важливе ключове слово «ресторан».
UX і контент-стратегія
Вам також потрібно зібрати, проаналізувати та скласти карту, який вміст потрібен на веб-сайті. Потім цей вміст структурується в процесі, який називається інформаційною архітектурою. Карта сайту повинна відображати ієрархію вмісту на веб-сайті та навігацію (як користувачі пробираються через веб-сайт).
Докладніше про це читайте в розділі «Дизайн користувацького досвіду».
Дивіться це посилання (designmodo. com/wireframingprototypingmockuping/) для гарного пояснення відмінностей між каркасом, прототипуванням та макетуванням.
У той же час врахуйте, який контент ви хочете включити на свій сайт. Чи буде це відносно статичний сайт, який часто не змінюється, або вам знадобиться редагована CMS для регулярного додавання та оновлення вмісту, такого як повідомлення в блогах, зображення та продукти?
Погляньте на обговорення щодо вибору статичного веб-сайту проти CMS раніше в цьому розділі
Якщо веб-сайт буде достатньо великим, щоб його вимагати, слід створити документ функціональної специфікації, використовуючи всю інформацію, зібрану до цього часу. Цей документ повинен деталізувати вимоги до розробки веб-сайту і може бути використаний для передачі будь-яких конкретних дизайнерських обмежень.
Настав час перейти від планування до будівництва.
Видимість пошукової системи
Трафік пошукових систем є життєво важливим для веб-сайту; без нього, ймовірність того, що сайт ніколи не буде виконувати свої маркетингові функції. Важливо, щоб пошукові системи могли бачити весь загальнодоступний веб-сайт, індексувати його повністю та враховувати його релевантність для обраних ключових слів.
Пошукова оптимізація (SEO) має свою главу в цьому підручнику, але ось ключові міркування для веб-розробки та дизайну.
Детальніше про це читайте в розділах «Цифровий копірайтинг» та «Пошукова оптимізація».
У веб-розробці копію, яка відображається на веб-сторінці, потрібно зберігати окремо від коду, який повідомляє браузеру, як відображати веб-сторінку. Це означає, що павук пошукової системи зможе легко розрізнити, який вміст потрібно прочитати і тому сканувати павуком і який текст є інструкцією до браузера. Каскадні таблиці стилів (CSS) можуть подбати про це.
Якщо пошукова система не може бачити текст на сторінці, це означає, що вона не може сканувати та індексувати цю сторінку.
Крок 2: Дизайн
Дизайн зазвичай відбувається ще до розробки. Відповідно до кроків, описаних раніше в цьому розділі, дизайнер перетворить каркаси та основні планувальні матеріали в красиво оформлені макети. Це статичні зображення, які показують, як веб-сайт буде виглядати, як тільки він закодований.
Крок 3: Розробка
Фаза розробки, як правило, починається після завершення проектування. Розробники іноді починають свою участь ще на етапі каркаса, створюючи прототипи низької точності для підтримки процесу тестування користувачів. Зазвичай розробник використовує шаблони дизайну для кодування фактичного веб-сайту, використовуючи мову інтерфейсу, яку ви вибрали. Розробка на стороні сервера та міркування CMS також можуть бути частиною цього етапу.
Крок 4: Тестування та запуск
Після того, як ви запланували дивовижний сайт, спроектував його красиво, побудував його вміло і заповнив його фантастичною копією, прийшов час, щоб перевірити його повністю, а потім взяти його в прямому ефірі!
Тестування є важливою частиною розробки та дизайну веб-сайтів, і воно повинно проходити протягом усього процесу планування, проектування та побудови, залишаючи лише остаточне тестування якості (QA), перш ніж сайт почне працювати. Тестовими повинні бути реальні потенційні користувачі сайту, а не тільки члени команди розробників. Сайт повинен бути протестований у всіх поширених браузерах і пристроях, щоб переконатися, що він виглядає і працює так, як слід у всіх них. Всі посилання повинні бути перевірені, щоб переконатися, що вони працюють правильно, і це завжди гарна ідея, щоб отримати остаточну перевірку всієї копії, перш ніж вона почне працювати.
Для перевірки HTML слід використовувати такі інструменти, як валідатор HTML W3C, validator.w3.org. Докладніше про тестування читайте в розділі 6.7 Забезпечення якості.
Переконайтеся, що ваші теги відстеження веб-аналітики на місці, після чого настав час взяти ваш сайт в прямому ефірі. Тепер вам потрібно перейти до залучення трафіку на ваш щойно запущений сайт, ось де і стане в нагоді вся тактика Engage в цьому підручнику.