Archives

Web Page Width and Fixed vs. Fluid Designs (current)

What is XML, Why and How Is It Used? (June 11, 2008)

Web Careers: Job Titles and Skills (January 15, 2008)

What is XHTML? (December 15, 2007)

AJAX and Spry (September 18, 2007)

HTML 5 and XHTML 2.0? (July 20, 2007)

HTML Reference - Learn HTML Tags (April 6, 2007)

Amazing Internet/Web Advancements (March 26, 2007)

Web Design and Development Process (March 24, 2007)

Firefox, FoxIt, TerraGen, and Expression Web (March 5, 2007)


Web Tips and News

HFCC Web Design and Development Club

Web Site Development Process

March 24, 2007

The following article was drafted by the club for a discussion on the process and tasks involved in developing a professional web site. These steps (or phases) follow the generic Software Development Life Cycle (SDLC) used in many software development projects, with modifications for the specifics to web design and development. If you have any comments or suggestions, please feel free to contact the club.

1. Analysis and Planning

  • Meet with client and determine project scope (how many pages, how technically sophisticated), timeline (project/work plan), budget
  • Determine purpose of site, i.e. marketing, information, e-commerce, etc.
  • Determine who your audience is, which in turn, impacts reading level of content, technology used, design of site, etc.
  • Assemble project team: designers, programmers, writers, etc.
  • Create protocols for updating live web content
    Who will have FTP access to server? Will you use a separate development server and production server or deployment/production folders with user permissions for each? Who will approve content changes? Will you be using an IDE with check-in/out feature?
  • How will you contact the client contact(s) for content and images?
  • Determine software and hardware needs, i.e. server(s), storage space, bandwidth, special software, (streaming server, database server, e-mail server, FTP server, scripting language support/interpreters, etc.)
  • Determine domain name (or sub-domain, directory, etc.)
  • Assess whether any content in web site will be sensitive and need to be secured via password protection, stored offline, placed on a different server behind a firewall, etc
  • What support will be needed to maintain the final site, i.e. time/resources to keep content up-to-date, check for dead links, orphan links, etc.

2. Design (the Blueprint)

  • What will be the structure of the web site?
  • How many levels deep and how wide will the site be? Consider creating a visual sitemap.
  • What other navigation methodologies will be used, i.e. menus, search box, site map, quick links pull-down, knowledge-base, etc?
  • Create a “wireframe” of the home page and for the second-level pages (a skeleton web page with all the navigation, function and content elements that will appear on the final web site, but with no graphic design elements)
  • Develop content (text) with client, writers, etc.
  • Identify and collect images, drawings, photography to be used in site.
    Will you use stock photos (which may need to be purchased) or will take create or take original digital photographs?
  • Design web page templates, i.e. the layout and design of the home page (1st level page), 2nd level pages, and 3rd level pages (most recommend web sites no more than 3 levels deep)
  • Determine what programming/scripting language will be needed and pseudo-code the scripts (dynamic aspects of site), i.e. JavaScript menus, ASP database queries, search box scripts, printer-friendly scripts, discussion board scripts, knowledge-base scripts, etc. Or, make acquisition of pre-existing scripts, if appropriate and available.
  • Develop and demonstrate prototypes to client for feedback, revise as needed, and repeat (will involve revisiting design steps above)

3. Production/Construction/Development

  • Create the web page templates, which may involve PhotoShop, HTML, CSS, Dreamweaver, etc.
  • Create and integrate any multimedia elements, i.e. Quicktime, Flash, etc.
  • Develop necessary scripts, i.e. JavaScript menus, ASP/PHP database queries, search box scripts, etc.
  • Add content to web page templates for each web page in web site
  • Implement secured areas of site, if necessary, i.e. password protection, database roles, LDAP, etc.

4. Testing

  • Proofread text
  • Ensure all links work
  • Use focus groups to test ease of navigation and ability to find information
  • Test any scripts or code, i.e. JavaScript menus, search button code, database code, etc.
  • Ensure site is accessible, i.e. meets accessibility standards (visual, hearing, etc.)
  • Test cross-browser compatibility, i.e. Microsoft Internet Explorer, Firefox, etc.
  • Test download time
  • Test web site appearance and usability in different monitor resolutions, i.e. 800x600, 1024x758, etc. and possibly devices (PDA, cell phone, etc.) if necessary
  • Perform web site stress/load test, i.e. how many concurrent users/visitors can be on the web server at one or can perform queries at once?

5. Launch Web Site

  • Transfer web site from Production Server to Live Server

6. Evaluation and Maintenance

  • Review web site usage logs (software such as WebTrends may be helpful) to find out how long visitors are staying on your site, what pages do they visit frequently, which pages do they visit infrequently, which pages do they stay on the longest, which pages do they not stay on very long, do visitors purchase products on an e-commerce site or just look, how many repeat visitors are you getting, etc.
  • Collect feedback from visitors via web master content email/form.
  • As web site is maintained and page are added, modified, and removed, verify orphan pages are archived offline, content on existing pages is kept up-to-date (e.g. no former employees list, products no longer available, current prices, etc.), etc.
  • Make revisions to site based on collected information from above (may have to revisit analysis, planning, design, development steps above)

7. Site Marketing

  • Consider enrolling in Google AdWords
  • Consider enrolling in Google AdSense
  • Identify and implement appropriate HTML meta tags and page titles
  • Add web site to search engines and directories (free)
  • Hire or become an expert in the field of “search engine optimization”
  • Track your web site ranking in search engines and directories and revise site as necessary to increase rankings (consider use of Web Position Gold software, etc.)
  • Consider Banner Ad advertising
  • Implement an “Subscribe” feature (e-mail//RSS, etc.) on your web site so customers/visitors can sign up to receive newsletter, promotions, coupons
  • Find blogs and newsgroups to advertise your web site in


Additional Resources

http://www.macronimous.com/resources/web_development_life_cycle.asp
http://www.pingmag.jp/2005/12/09/the-website-development-process/
http://webstyleguide.com/process/index.html
http://www.nhbis.com/design_process.html
http://searchenginewatch.com/