Website Development Process


Published on

Published in: Education
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Website Development Process

  1. 1. Website Development Process Chapter 10 and 5from Web development and Design Foundations with XHTML 1
  2. 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. 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. 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. 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. 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. 7. So, what does an informationarchitect 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 7
  8. 8. Information architectureresponsibilities? Some of the responsibilities include: ◦ Define Primary audience goals ◦ Conduct competitive analysis ◦ Define content outline ◦ Create sitemaps and wireframes 8
  10. 10. The Development Process Life cycle 10
  11. 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. 12. Checkpoint 1Consider the target audience of this site. 12
  13. 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. 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. 15. Sample SurveyCriteria Site 1 Site 2 Site 3 …General Site Features Site Design (1-10) Navigation (1-10) Layout (1-10) Look and feelPersonalization Email Newsletter (Y/N)Technology RSS (Y/N) CSS (Y/N) Ajax (Y/N) Dynamic pages (Y/N) 15
  16. 16. Design1. Determine the site structure and organization2. Prototype the design ◦ Determine a page layout design 16
  17. 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. 18. Web Site Organization Hierarchical Linear Random 18
  19. 19. Hierarchical Organization A clearly defined home page Navigation links to major site sections Often used for commercial and corporate Web sites 19
  20. 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. 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. 22. Linear Organization A series of pages that provide a tutorial, tour, or presentation. Sequential viewing 22
  23. 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. 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. 25. Navigation Major types of navigation: ◦ Global (across the website) ◦ Local (for a subsection of the website) 25
  26. 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. 27. Checkpoint 2 Where am I? 27
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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