Website Development Process

Website Development Process

Chapter 10 and 5
from Web development and Design Foundations with XHTML

1

Before you Start - Remember!
 Attempting to build a website without a
plan is like trying to construct a house
without an architectural blueprint.

2

Learning Outcomes
 In
this chapter, you will learn
about:
◦ The skills, functions, and job roles
needed for a successful web
development project
◦ Familiarize yourself with the web
development process and its
different components.

3

Skills and Functions Needed for a
Successful Large-Scale Project
 Project Manager
 Marketing Representative
 Copy Writer & Editor
 Content Manager
 Graphic Designer
 Database Administrator
 Network Administrator
 Information Architect
 Web Developer

4

Skills and Functions Needed for a
Successful Small Project
 The skills and functions are essentially the
same as on a large project
 Each person may wear many “hats” and
juggle their job roles
◦ Example: The web developer may also be the
graphic designer.

 Some job roles may be outsourced
◦ Most Common:
An external web site provider is used so there
is less (if any) need for a Network
Administrator.

5

What is an information architect?
 The Information Architecture
Institute defines information
architecture as:
◦ The art and science of organizing and
labeling websites, intranets, online
communities and software to support
usability and findability.

6

So, what does an information
architect do?

 Analyze, organize and label information
on websites so regular people (not
involved in the design of the site) can
actually find what they are looking for.

Courtesy webdesignerdepot.com 7

Information architecture
responsibilities?

 Some of the responsibilities include:
◦ Define Primary audience goals
◦ Conduct competitive analysis
◦ Define content outline
◦ Create sitemaps and wireframes

8

SO, WHAT IS THE
DEVELOPMENT
PROCESS?

9

The Development Process
 Life cycle

10

Conceptualization
 Determine the intended/target audience
 Determine the goals or mission of the
web site
◦ Short-term goals
◦ Long-term goals

 Main Job Roles Involved:
◦ Client, Project Manager, Information Architect,
Marketing Representative, Senior Web
Developer
11

Checkpoint 1

Consider the target audience of this site. 12

Analysis
 Determine the following:
◦ information topics
◦ functionality requirements (high-level)
 Determine “what” a site will do – not “how” it will
do it
◦ environmental requirements
◦ content requirements

 Review competitor’s sites (Competitive
Analysis - what are the others doing?)
13

Competitive Analysis
 A high level analysis of major competitors is
vital to a website’s success. It is better to know
the competition’s strengths and weaknesses
before you finalize your website strategy.
 Basic Steps:
1. Identify the competition
2. Decide what to analyze
3. Develop a competition survey
4. Answer survey for each competitor
5. Analyze survey data
6. Write a report of the findings and
recommendations 14

Sample Survey

Criteria Site 1 Site 2 Site 3 …
General Site Features
Site Design (1-10)
Navigation (1-10)
Layout (1-10)
Look and feel
Personalization
Email Newsletter (Y/N)
Technology
RSS (Y/N)
CSS (Y/N)
Ajax (Y/N)
Dynamic pages (Y/N)

15

Design
1. Determine the site structure and
organization
2. Prototype the design
◦ Determine a page layout design

16

Site structure
 The site structure is like a skeleton that
holds the body together.
 Use some techniques like card sorting to
help building the structure of the site.
 Choose meaningful names for the
grouped list that reflect the purpose of
your pages.
 Use your grouped content to create
which is a text-based, hierarchical map of
the site (Site organization). 17

Web Site
Organization

 Hierarchical
 Linear
 Random

18

Hierarchical
Organization

 A clearly defined home
page
 Navigation links to
major site sections
 Often used for
commercial and
corporate Web sites

19

Hierarchical
Too Shallow

 Be careful that the organization is not too shallow.
◦ Too many choices  a confusing and less usable web site
◦ Information Chunking
 “seven plus or minus two” principle
◦ Many web designers try not to place more than nine major navigation links on
a page or in a well-defined page area.

20

Hierarchical
Too Deep
 Be careful that the organization is
not too deep.

◦ This results in many “clicks” needed to
drill down to the needed page.

◦ User Interface “Three Click Rule”
 A web page visitor should be able to get
from any page on your site to any other
page on your site with a maximum of three
hyperlinks.

21

Linear
Organization

 A series of pages that provide a tutorial, tour,
or presentation.
 Sequential viewing

22

Random
Organization
 Sometimes called
“Web” Organization

 Usually there is no
clear path through the
site

 May be used with
artistic or concept
sites

 Not typically used for
commercial sites.

23

Navigation
 People don’t always work from the
home page – they get to a page from
a link or from a search
 Every page of a site should let you
know:
◦ Where am I
◦ What’s here
◦ Where can I go now
24

Navigation
 Major types of navigation:
◦ Global (across the website)
◦ Local (for a subsection of the website)

25

Web Site Navigation
Best Practices
 Make your site easy to navigate
◦ Provide clearly labeled navigation in the same
location on each page
◦ Most common – across top or down left side
◦ Provide “breadcrumb” navigation

26

Checkpoint 2

Where am I? 27

WHAT TOOLS TO USE TO
BUILD THE SITE
STRUCTURE AND PAGES’
LAYOUT?

28

Use Sitemap for organization
 A sitemap shows the hierarchy of the site. It lets
a writer, designer, or developer see the
relationship among all the pages of the site at a
glance.

29

Wireframe
 A sketch of blueprint of a Web page
 Shows the structure of the basic page
elements, including:
◦ Logo
◦ Navigation
◦ Content
◦ Footer

 Wireframes do not include any reference to color,
typography, or visual imagery.

Production
 Choose a web authoring tool
 Organize your site files
 Develop and individually test components
 Add content

◦ Project Manager, Senior Web Developer, Web
Developer, Graphic Designer, Database
Administrator, Content Manager

31

Testing

 Test on different web browsers and
browser versions
 Test with different screen resolutions
 Test using different bandwidths
 Test from another location
 Test, Test, Test

◦ Project Manager, Web Developer, Tester
(sometimes web developer, sometimes Quality
Assurance person), Client, Content Manager
32

Types of Testing
 Automated Testing Tools and Validation
◦ Automated Testing (Link checkers, etc.)
◦ W3C XHTML and CSS validation tests

 Usability Testing
◦ Testing how actual web page visitors use a
web site
◦ Can be done at almost any stage of
development
 Early –- use paper and sketches of pages
 Design – use prototype
 Production & Testing – use actual pages
33

Approval & Launch
 User or Client Testing
◦ Client will test site before giving official
approval for site launch

 Approval & Launch
◦ Obtain sign-off form or email from client
◦ Upload files to web server
◦ Create backup copies of files
◦ MAKE SURE YOU TEST THE WEB SITE
AGAIN!
34

Maintenance
 Maintenance – the never-ending task…
◦ Enhancements to site
◦ Fixes to site
◦ New areas added to site

 A new opportunity or issue is identified
and another loop through the
development process begins.

35

Evaluation
 Re-visit the goals, objectives, and
mission of the web site

 Determine how closely they are being
met

 Develop a plan to better meet the
goals, objectives and mission

36

Summary
 This chapter introduced you to the
system development life cycle and its
application to web development projects.

 The job roles related to web site
development were also discussed.

 IA is a very critical input for building the
site map & wireframes

37

Website Development Process

More Related Content

What's hot

Similar to Website Development Process

More from Hend Al-Khalifa

Recently uploaded

In this document

Website Development Process