1. Website Development Process
Chapter 10 and 5
from Web development and Design Foundations with XHTML
1

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

3. 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

4. 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

5. 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

6. 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

7. 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

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

9. SO, WHAT IS THE
DEVELOPMENT
PROCESS?
9

10. The Development Process
 Life cycle
10

11. 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

12. Checkpoint 1
Consider the target audience of this site. 12

13. 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

14. 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

15. 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

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

17. 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

18. Web Site
Organization
 Hierarchical
 Linear
 Random
18

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

20. 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

21. 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

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

23. 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

24. 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

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

26. 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

27. Checkpoint 2
Where am I? 27

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

29. 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

30. 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.

31. Production
 Choose a web authoring tool
 Organize your site files
 Develop and individually test components
 Add content
 Main Job Roles Involved:
◦ Project Manager, Senior Web Developer, Web
Developer, Graphic Designer, Database
Administrator, Content Manager
31

32. 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
 Main Job Roles Involved:
◦ Project Manager, Web Developer, Tester
(sometimes web developer, sometimes Quality
Assurance person), Client, Content Manager
32

33. 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

34. 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

35. 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

36. 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

37. 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